/* ================= My tracks and the cassette player (tracks-r18, David 1 Nov) =================
   The glove box's MY TRACKS panel and the player on the request-line monitor, in the request line's new style
   (request-line.css): quiet dark glass, Inter Tight with JetBrains Mono labels, neon edges and short eased motion.
   - The cassette (.cas): one of three designs (img/cassette/, 480/960 WebP + PNG, background and reel holes
     transparent). Two reels (.hub) sit behind the shell's holes and turn while a track plays (.player.playing, and the
     playing track's row, .mt-row.spin). Each design's hole and label positions are below ([data-cas]); the player writes
     the title on the label's first line and the DJ on the second (.cas-lab).
   - My tracks: a header with the Hustle MM logo, the three tabs as one segmented control, and a row per track: its
     cassette, the title, the DJ and station, the day it was made and how long it is kept, then Play and Download (a
     saved full track, marked OWNED) or Play and Full track (a preview). The chosen row gets a neon flare and keeps a neon
     edge; a full track's row opens its three files. The list fades up out of a soft blur when the glove box opens and
     when the tab changes (.mt-in, night-shift-v3.js trkFade).
   - The player: logo and status, the cassette, the cassette picker, the DJ, the progress bar, the transport, and Back
     to My tracks beside Download / Full track. Tall screens stack it; wide ones (phone landscape, the zoomed desktop)
     put the cassette on the left.
   prefers-reduced-motion (and .still) turn off the reel spin, the flares, the fades and the pulses. */
:root { --mt-ease: cubic-bezier(.22, .61, .36, 1); --mt-ease1: cubic-bezier(.2, .8, .2, 1); }

/* ---------- the cassette ---------- */
.cas { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 1.645); container-type: inline-size; isolation: isolate; }
.cas .cas-pic, .cas .cas-pic img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* the reels: a cream hub with six spokes round a dark spindle hole, drawn a touch larger than the shell's hole */
.cas .hub { position: absolute; z-index: 0; top: var(--hy); width: calc(var(--hd) * 1.08); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #0a0812; }
.cas .hub-l { left: var(--hx1); }
.cas .hub-r { left: var(--hx2); }
.cas .hub::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #0a0812 0 26%, #3b3446 27.5%, transparent 29%), radial-gradient(circle, transparent 0 55%, #efe8d6 57%),
    repeating-conic-gradient(from 10deg, #efe8d6 0 16deg, #1d1826 16deg 60deg);
  animation: casSpin 1.7s linear infinite paused; }
@keyframes casSpin { to { transform: rotate(360deg); } }
.player.playing .cas .hub::before, .mt-row.spin .cas .hub::before { animation-play-state: running; }
/* where the holes and the label's two writing lines are on each design (% of the picture; label boxes in cqw) */
.cas[data-cas="black"] { --ar: 1527 / 928; --hx1: 28.95%; --hx2: 71%; --hy: 48.28%; --hd: 8.84%;
  --lx: 12%; --lw: 74%; --t1: 6.81cqw; --h1: 4.92cqw; --t2: 12.21cqw; --h2: 4.56cqw; --f1: 4.1cqw; --f2: 3.5cqw; }
.cas[data-cas="rainbow"] { --ar: 1535 / 943; --hx1: 28.01%; --hx2: 71.63%; --hy: 49.53%; --hd: 9.06%;
  --lx: 18%; --lw: 70%; --t1: 6.76cqw; --h1: 7.74cqw; --t2: 15.23cqw; --h2: 5.34cqw; --f1: 5.6cqw; --f2: 4cqw; }
.cas[data-cas="cream"] { --ar: 1536 / 939; --hx1: 28.3%; --hx2: 71.61%; --hy: 48.76%; --hd: 8.9%;
  --lx: 16%; --lw: 72%; --t1: 6.48cqw; --h1: 5.5cqw; --t2: 12.41cqw; --h2: 3.85cqw; --f1: 4.4cqw; --f2: 3.1cqw; }
/* the label: written in marker, the title on the first line and the DJ on the second */
.cas .cas-lab { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cas .cas-lab > span { position: absolute; left: var(--lx); width: var(--lw); display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  font-family: "Permanent Marker", cursive; font-weight: 400; letter-spacing: 0; color: #1d1934; text-shadow: none; transform: rotate(-1.2deg); }
.cas .cas-lab .l1 { top: var(--t1); height: var(--h1); line-height: var(--h1); font-size: calc(var(--f1) * var(--k, 1)); }
.cas .cas-lab .l2 { top: var(--t2); height: var(--h2); line-height: var(--h2); font-size: calc(var(--f2) * var(--k, 1)); color: #3a2f52; }
.player.nodj .cas .cas-lab .l2 { visibility: hidden; }

/* ---------- My tracks: the panel ---------- */
#trk.trk { gap: 10px; padding: 10px 14px 12px; border: 0; border-radius: 16px; color: #fff; text-shadow: none; letter-spacing: 0; font: 500 14px/1.35 "Inter Tight", system-ui, sans-serif;
  background: radial-gradient(90% 45% at 0% 0%, rgba(255,45,170,.12), transparent 60%), radial-gradient(70% 40% at 100% 100%, rgba(61,240,255,.09), transparent 60%), linear-gradient(180deg, rgba(8,6,18,.97), rgba(3,2,10,.98));
  box-shadow: inset 0 0 0 1px rgba(255,45,170,.5), inset 0 0 24px rgba(255,45,170,.12), inset 0 -2px 0 rgba(61,240,255,.45), 0 18px 40px rgba(0,0,0,.6); }
#trk > * { width: 100%; }
#trk b { font: inherit; letter-spacing: inherit; color: inherit; }
#trk :focus-visible { outline: 2px solid #3df0ff; outline-offset: 2px; }
#trk button { font-family: "Inter Tight", system-ui, sans-serif; }
#trk .trk-body { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
#trk .mt-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 48px; }
#trk .mt-head .tz-logo { flex: none; display: block; line-height: 0; }
#trk .mt-head .tz-logo img { display: block; width: auto; height: 20px; max-width: none; filter: drop-shadow(0 0 6px rgba(255, 196, 96, .22)); }
#trk .mt-head h3 { margin: 0; padding: 0 0 0 10px; border-left: 1px solid rgba(255,255,255,.16); font: 800 16px/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: .02em; color: #fff; text-transform: none; white-space: nowrap; }
/* the tabs: one segmented control, the open tab lit with an amber neon edge */
#trk .trk-tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#trk .trk-tabs button { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent;
  font: 600 12.5px/1.15 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #b6b0c8; text-align: center; transition: background .25s, color .25s, box-shadow .25s; }
#trk .trk-tabs button:hover { color: #fff; background: rgba(255,255,255,.05); }
#trk .trk-tabs button.on { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)), rgba(255,179,71,.13);
  box-shadow: inset 0 0 0 1px rgba(255,179,71,.7), 0 0 14px rgba(255,179,71,.25); }
#trk .trk-tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px; background: #ffb347; box-shadow: 0 0 8px #ffb347; }
#trk .trk-tabs em { flex: none; min-width: 18px; padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.1); font: 700 10px/1 "JetBrains Mono", monospace; font-style: normal; color: inherit; }
#trk .trk-tabs button.on em { background: #ffb347; color: #1a0e00; }
#trk .trk-note { flex: none; margin: 0; padding: 7px 10px; border-left: 2px solid #ffb347; border-radius: 0 9px 9px 0; background: rgba(255,179,71,.07); font: 500 12.5px/1.4 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #cfc9e0; }
#trk .trk-note b { font-weight: 700; color: #fff; }
#trk .mt-body { display: flex; flex-direction: column; gap: 8px; }
#trk .mt-body > .mt-empty { flex: 1 1 auto; }
#trk .mt-foot { margin: auto 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font: 500 12px/1.45 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #8f88a8; }
/* CLOSE: a glass pill */
#gbox .gx { border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,8,20,.88); color: #ebe6f6; font: 600 12px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .06em; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
#gbox .gx:hover { border-color: #ffb347; color: #fff; box-shadow: 0 0 14px rgba(255,179,71,.3); }

/* ---------- My tracks: a track row ---------- */
#trk .mt-row { --c: #ff4fa3; position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 10px 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01) 60%), rgba(13,11,28,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s, background .3s; }
#trk .mt-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c) 45%, transparent); transition: background .3s, box-shadow .3s; }
#trk .mt-row.on { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 60%), color-mix(in srgb, var(--c) 9%, #0d0b1c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent), 0 0 16px color-mix(in srgb, var(--c) 28%, transparent); }
#trk .mt-row.on::before { background: var(--c); box-shadow: 0 0 8px var(--c); }
/* the neon flare when a row is chosen: its edge flashes, a light sweep crosses it and it glows for a moment */
#trk .mt-row.mt-flare, #trk.mt-in .mt-row.mt-flare { animation: mtGlow 1s ease-out; }
#trk .mt-row.mt-flare::before { animation: mtEdge 1s ease-out; }
#trk .mt-row.mt-flare::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent) 38%, rgba(255,255,255,.22) 50%, color-mix(in srgb, var(--c) 30%, transparent) 62%, transparent);
  transform: translateX(-100%); animation: mtSweep .9s var(--mt-ease) forwards; }
@keyframes mtGlow { 0% { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 80%, transparent), 0 0 30px var(--c); } 60% { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent), 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); } }
@keyframes mtEdge { 20% { background: #fff; box-shadow: 0 0 10px 2px var(--c), 0 0 24px 4px var(--c); } }
@keyframes mtSweep { to { transform: translateX(200%); } }
/* the head: cassette, title, DJ and station, date and how long it is kept (the whole head is the button that chooses) */
#trk .mt-pick { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; }
#trk .mt-row.full .mt-pick { padding-right: 22px; }
#trk .mt-pick .cas { filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); transition: filter .3s, transform .3s var(--mt-ease1); }
#trk .mt-row.on .mt-pick .cas { filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 45%, transparent)); }
#trk .mt-pick:hover .cas { transform: translateY(-1px); }
#trk .mt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#trk .mt-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 700 15px/1.22 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
#trk .mt-dj { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12.5px/1.3 "Inter Tight", system-ui, sans-serif; color: #e3def0; }
#trk .mt-dj i { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); vertical-align: middle; }
#trk .mt-stn { font-weight: 500; color: #8f88a8; text-overflow: ellipsis; }
#trk .mt-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 10.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #8f88a8; }
#trk .mt-meta time { color: #d9d3ea; }
#trk .mt-meta b { margin: 0 6px; color: #5f5975; }
#trk .mt-chev { position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid #b6b0c8; border-bottom: 2px solid #b6b0c8; transform: rotate(45deg); transition: transform .3s var(--mt-ease1), border-color .3s; }
#trk .mt-row.on .mt-chev { transform: translateY(4px) rotate(225deg); border-color: var(--c); }
/* Play, Download / Full track, OWNED */
#trk .mt-acts { display: flex; align-items: center; gap: 8px; min-width: 0; }
#trk .mt-acts > button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font: 700 13px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .25s, color .2s; }
#trk .mt-acts svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
#trk svg.ln { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#trk .mt-play { --g: #7dff8f; border: 1.5px solid #7dff8f; background: rgba(125,255,143,.08); color: #e9ffec; box-shadow: 0 0 12px rgba(125,255,143,.16); }
#trk .mt-play:hover { background: rgba(125,255,143,.16); box-shadow: 0 0 16px rgba(125,255,143,.35); }
#trk .mt-play svg { color: #7dff8f; }
#trk .mt-dl { --g: #3df0ff; border: 1.5px solid #3df0ff; background: rgba(61,240,255,.07); color: #e6fdff; box-shadow: 0 0 12px rgba(61,240,255,.14); }
#trk .mt-dl:hover { background: rgba(61,240,255,.15); box-shadow: 0 0 16px rgba(61,240,255,.35); }
#trk .mt-dl svg { color: #3df0ff; }
#trk .mt-buy { --g: #ff2daa; flex: 1 1 auto; min-width: 0; border: 0; color: #14010c; font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #ff2daa, #ff5cc4 55%, #ff2daa);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 16px rgba(255,45,170,.4); }
#trk .mt-buy.in { color: #ffd0ec; background: rgba(255,45,170,.1); box-shadow: inset 0 0 0 1.5px #ff2daa, 0 0 12px rgba(255,45,170,.25); }
#trk .mt-own { flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(125,255,143,.5); background: rgba(125,255,143,.08);
  font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: #c9ffd2; white-space: nowrap; }
/* a full track's three files, opened under the chosen row */
#trk .mt-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--mt-ease1); }
#trk .mt-row.on .mt-more { grid-template-rows: 1fr; }
#trk .mt-more > div { min-height: 0; overflow: hidden; }
#trk .mt-row:not(.on) .mt-more > div { visibility: hidden; transition: visibility 0s .35s; }
#trk .mt-fh { margin: 2px 0 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font: 700 10px/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #8f88a8; }
#trk .mt-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#trk .mt-file { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 4px 2px 8px; border-radius: 11px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
#trk .mt-side { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, #0b0918); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent);
  font: 800 13px/1 "Inter Tight", system-ui, sans-serif; color: #fff; }
#trk .mt-fn { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13.5px/1.2 "Inter Tight", system-ui, sans-serif; color: #fff; }
#trk .mt-fn small { display: block; margin-top: 2px; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: #8f88a8; }
#trk .mt-ic { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(125,255,143,.7); background: rgba(125,255,143,.07); color: #7dff8f; cursor: pointer; transition: background .2s, box-shadow .25s; }
#trk .mt-ic.dl { border-color: rgba(61,240,255,.7); background: rgba(61,240,255,.07); color: #3df0ff; }
#trk .mt-ic:hover { box-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent); }
#trk .mt-ic svg { width: 15px; height: 15px; fill: currentColor; }
#trk .mt-ic svg.ln { fill: none; }
/* empty tabs: the cassette, a heading, a line and a way forward */
#trk .mt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 18px 14px; text-align: center; border-radius: 14px;
  background: radial-gradient(70% 55% at 50% 30%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%), rgba(13,11,28,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#trk .mt-eart { display: block; width: min(168px, 56%); filter: drop-shadow(0 12px 22px rgba(0,0,0,.65)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 30%, transparent)); animation: mtFloat 6s ease-in-out infinite; }
@keyframes mtFloat { 50% { transform: translateY(-4px); } }
#trk .mt-empty h4 { margin: 2px 0 0; font: 800 20px/1.15 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: none; }
#trk .mt-empty p { max-width: 300px; margin: 0; font: 500 13.5px/1.45 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #b6b0c8; }
#trk .mt-eacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
#trk .mt-go { --g: #ff2daa; position: relative; overflow: hidden; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; font: 800 14px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: #14010c; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #ff2daa, #ff5cc4 55%, #ff2daa); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 18px rgba(255,45,170,.4); }
#trk .mt-go.alt { --g: #d9d3ea; color: #ebe6f6; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* the set list tab, in the same type */
#trk .sl-h { margin: 2px 0 6px; font: 700 10.5px/1.35 "JetBrains Mono", monospace; letter-spacing: .1em; color: #8f88a8; }
#trk .sl-row { gap: 10px; min-height: 46px; padding: 3px 2px; border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: none; }
#trk .sl-n { min-width: 18px; font: 700 11px/1 "JetBrains Mono", monospace; color: #ffb347; }
#trk .sl-t { font: 600 14px/1.25 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #fff; }
#trk .sl-buy { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #7dff8f; background: rgba(125,255,143,.08); color: #d6ffdc; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .04em; }
#trk .sl-buy.in { background: #7dff8f; color: #062a10; }
#trk .sl-buy:disabled { border-color: rgba(255,255,255,.15); background: transparent; color: #7b7590; }
#trk .sl-none { font: 600 15px/1.3 "Inter Tight", system-ui, sans-serif; color: #fff; }
#trk .sl-note { font: 500 12.5px/1.4 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; color: #b6b0c8; border-top-color: rgba(255,255,255,.08); }
#trk .sl-view { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #ff2daa; color: #14010c; font: 700 11px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: .02em; }
/* the fade: the panel blooms up as the glove box opens, then the rows follow one after another */
#trk.mt-open { animation: mtPanel .42s var(--mt-ease) both; }
@keyframes mtPanel { from { opacity: 0; filter: blur(6px) brightness(1.5); transform: scale(.985); } }
#trk.mt-in :is(.trk-note, .mt-row, .mt-empty, .mt-foot, .sl-h, .sl-row, .sl-none, .sl-note) { animation: mtIn .46s var(--mt-ease) both; animation-delay: calc(90ms + var(--i, 0) * 60ms); }
#trk.mt-in .trk-note { --i: -1; }
#trk.mt-in .mt-foot, #trk.mt-in .sl-note { --i: 6; }
#trk.mt-in .sl-row:nth-child(2) { --i: 1; } #trk.mt-in .sl-row:nth-child(3) { --i: 2; } #trk.mt-in .sl-row:nth-child(4) { --i: 3; }
#trk.mt-in .sl-row:nth-child(5) { --i: 4; } #trk.mt-in .sl-row:nth-child(n+6) { --i: 5; }
@keyframes mtIn { from { opacity: 0; filter: blur(5px) brightness(1.5); transform: translateY(8px); } 60% { filter: blur(0) brightness(1.06); } }

/* ---------- the player ---------- */
.player { --pc: #ff4fa3; position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; overflow: hidden; color: #fff; text-align: left; text-shadow: none; letter-spacing: 0;
  font: 500 14px/1.35 "Inter Tight", system-ui, sans-serif;
  background: radial-gradient(90% 42% at 50% 30%, color-mix(in srgb, var(--pc) 18%, transparent), transparent 70%), radial-gradient(70% 40% at 100% 100%, rgba(61,240,255,.1), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.98), rgba(3,2,10,.99)); }
.player[hidden] { display: none; }
/* the neon edge round the screen, as on the request line: pink, with a cyan line along the bottom */
.player::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 18px / 22px;
  box-shadow: inset 0 0 0 1px rgba(255,45,170,.55), inset 0 0 24px rgba(255,45,170,.16), inset 0 -2px 0 rgba(61,240,255,.45); }
html.phone-panels.lens #monitor.lens-on .player::before { border-radius: 0; }
.player.pl-arrive { animation: plArrive .42s var(--mt-ease) both; }
@keyframes plArrive { from { opacity: 0; filter: blur(6px) brightness(1.5); } }
.player :focus-visible { outline: 2px solid #3df0ff; outline-offset: 3px; }
.player button { font-family: "Inter Tight", system-ui, sans-serif; color: inherit; }
.player svg.ln { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the head: logo, on air / paused, owned / preview (clear of the monitor's zoom button top right) */
.pl-head { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 52px 0 0; }
.pl-head .tz-logo { flex: 0 1 auto; min-width: 0; display: block; line-height: 0; overflow: hidden; }
#monitor .pl-head .tz-logo img, .pl-head .tz-logo img { display: block; width: auto; height: 20px; max-width: none; filter: drop-shadow(0 0 6px rgba(255, 196, 96, .22)); }
.pl-tag { flex: none; display: flex; align-items: center; gap: 7px; height: 26px; margin: 0 0 0 auto; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  font: 700 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .14em; color: #b6b0c8; white-space: nowrap; transition: color .3s, border-color .3s, box-shadow .3s; }
.pl-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3a3550; transition: background .3s; }
.player.playing .pl-tag { color: #fff; border-color: #ff2daa; box-shadow: 0 0 14px rgba(255,45,170,.35); }
.player.playing .pl-led { background: #ff2daa; box-shadow: 0 0 8px #ff2daa; animation: plBlink 1.2s steps(2, start) infinite; }
.player.paused .pl-tag { color: #ffd9a0; border-color: rgba(255,179,71,.6); }
.player.paused .pl-led { background: #ffb347; box-shadow: 0 0 6px #ffb347; }
@keyframes plBlink { 50% { opacity: .25; } }
.pl-kind { flex: none; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(125,255,143,.5); background: rgba(125,255,143,.08);
  font: 700 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: #c9ffd2; white-space: nowrap; }
.player.pv .pl-kind { border-color: rgba(61,240,255,.55); background: rgba(61,240,255,.08); color: #c6f9ff; }
/* the body: tall screens stack it, the cassette taking whatever height is left */
.pl-in { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; container: pl / size; }
.pl-grid { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.pl-a { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-b { flex: none; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-stage { position: relative; flex: 1 1 0; min-height: 84px; container-type: size; display: grid; place-items: center; }
/* a soft pool of the station's colour under the cassette, brighter while it plays */
.pl-stage::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 30%; border-radius: 50%; pointer-events: none; opacity: .45;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 55%, transparent), transparent); filter: blur(6px); transition: opacity .5s; }
.player.playing .pl-stage::before { opacity: .9; animation: plPool 2.4s ease-in-out infinite; }
@keyframes plPool { 50% { opacity: .6; } }
.pl-cas { position: relative; width: min(100cqw, 160cqh); }
.pl-cas .cas { filter: drop-shadow(0 14px 22px rgba(0,0,0,.7)); }
.player.playing .pl-cas .cas { filter: drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 14px color-mix(in srgb, var(--pc) 35%, transparent)); }
/* the cassette picker: the three designs, the chosen one with an amber edge */
.pl-tapes { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pl-tl { margin-right: 4px; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #7b7590; }
.pl-tapes button { position: relative; overflow: hidden; display: grid; place-items: center; width: 54px; height: 40px; padding: 4px 5px; border: 0; border-radius: 10px; background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); cursor: pointer; transition: box-shadow .25s, background .25s; }
.pl-tapes button picture, .pl-tapes button img { display: block; width: 100%; height: auto; pointer-events: none; }
.pl-tapes button:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pl-tapes button[aria-checked="true"] { background: rgba(255,179,71,.09); box-shadow: inset 0 0 0 1.5px #ffb347, 0 0 12px rgba(255,179,71,.3); }
/* r197: an owned track's tiles are its three files (tile 1 with the DJ, 2 clean, 3 the bonus Side B), each labelled;
   the chosen one (amber edge) is always the file on the player */
.player.pl-files .pl-tapes { gap: 8px; }
.player.pl-files .pl-tapes button { flex: 0 1 112px; min-width: 0; width: auto; height: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 7px; }
.player.pl-files .pl-tapes button picture { width: 48px; }
.player.pl-files .pl-tapes button:disabled { opacity: .35; cursor: not-allowed; }
.pl-tn { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; font: 600 11.5px/1.15 "Inter Tight", system-ui, sans-serif; color: #d9d3ea; }
.pl-tn b { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.08); font: 800 10px/1 "Inter Tight", system-ui, sans-serif; color: #fff; }
.pl-tapes button[aria-checked="true"] .pl-tn { color: #ffe2b8; }
.pl-tapes button[aria-checked="true"] .pl-tn b { background: #ffb347; color: #1a0f00; }
.tz-full .player.pl-files .pl-tapes button { width: auto; height: auto; flex-basis: 140px; }
.tz-full .player.pl-files .pl-tapes button picture { width: 62px; }
.tz-full .pl-tn { font-size: 13px; }
/* r197: Share beside Download on an owned track (the player) and on each Purchased row */
.player .pl-sh[hidden] { display: none; }
.player .pl-sh { --g: #ff2daa; gap: 6px; padding: 0 14px; border-color: rgba(255,45,170,.6); background: rgba(255,45,170,.07); color: #ffd0ec; box-shadow: 0 0 12px rgba(255,45,170,.16); }
.player .pl-sh:hover { background: rgba(255,45,170,.15); box-shadow: 0 0 16px rgba(255,45,170,.35); }
#trk .mt-sh { --g: #ff2daa; border: 1.5px solid #ff2daa; background: rgba(255,45,170,.07); color: #ffe0f2; box-shadow: 0 0 12px rgba(255,45,170,.14); }
#trk .mt-sh:hover { background: rgba(255,45,170,.15); box-shadow: 0 0 16px rgba(255,45,170,.35); }
#trk .mt-sh svg { color: #ff5cc4; }
/* the DJ */
.pl-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-pol { flex: none; position: relative; width: 30px; aspect-ratio: 721 / 900; padding: 3px 3px 8px; background: #ece6d8; box-shadow: 0 4px 10px rgba(0,0,0,.6); transform: rotate(-4deg); }
.pl-pol .pp { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--pc) 45%, #151018), #0b0810); font: 400 13px/1 "Permanent Marker"; color: #fff; }
.pl-pol .pp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.pl-meta { flex: 1; min-width: 0; }
.pl-meta small { display: block; font: 700 10px/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #8f88a8; }
.pl-djn { display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 calc(17px * var(--k, 1))/1.15 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; color: #fff; }
.player .pl-sub { margin: 2px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12.5px/1.3 "Inter Tight", system-ui, sans-serif; color: #b6b0c8; }
/* the progress bar: a thin line in the station's colour with a bright tip; tap or drag, arrow keys step 5 s */
.pl-prog { flex: none; display: flex; align-items: center; gap: 12px; min-height: 24px; }
.pl-bar { position: relative; flex: 1 1 auto; min-width: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); cursor: pointer; touch-action: none; }
.pl-bar::before { content: ""; position: absolute; inset: -14px 0; }
.pl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 50%, transparent), var(--pc)); box-shadow: 0 0 8px var(--pc); transition: width .25s linear; }
.pl-bar i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px var(--pc), 0 0 16px 3px color-mix(in srgb, var(--pc) 55%, transparent); }
.pl-bar:focus-visible { outline-offset: 10px; }
.pl-t { flex: none; min-width: 3.4em; font: 600 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: #8f88a8; font-variant-numeric: tabular-nums; }
.pl-t:first-child { color: #fff; }
.pl-t:last-child { text-align: right; }
/* the transport: glass rewind / forward, and a pink play / pause */
.pl-ctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 26px; }
.pl-ctl button { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.pl-ctl svg { fill: currentColor; }
.pl-sm { gap: 1px; width: 46px; height: 46px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #ebe6f6 !important; font: 700 10px/1 "JetBrains Mono", monospace; transition: box-shadow .25s, background .25s; }
.pl-sm svg { width: 15px; height: 15px; }
.pl-sm:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px #3df0ff, 0 0 14px rgba(61,240,255,.3); }
.pl-ctl .pl-big { width: 64px; height: 64px; color: #14010c !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 50%), linear-gradient(135deg, #ff2daa, #ff5cc4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 24px rgba(255,45,170,.5), 0 10px 26px -12px rgba(255,45,170,.9); }
.pl-big svg { width: 26px; height: 26px; }
.pl-big .i-pause, .player.playing .pl-big .i-play { display: none; }
.player.playing .pl-big .i-pause { display: inline; }
.player.playing .pl-big { animation: plRing 1.8s ease-out infinite; }
@keyframes plRing { 0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 0 rgba(255,45,170,.55), 0 0 24px rgba(255,45,170,.5); } 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 12px rgba(255,45,170,0), 0 0 24px rgba(255,45,170,.5); } }
/* Back to My tracks beside Download (owned) / Full track (a preview), as Back sits beside Continue on the request line */
.pl-foot { flex: none; display: flex; gap: 8px; }
.player .pl-x { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 50px !important; padding: 0 14px 0 8px; border-radius: 13px;
  border: 1px solid rgba(255,179,71,.55); background: rgba(255,179,71,.06); color: #ffe2b8; font: 700 14px/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; box-shadow: 0 0 12px rgba(255,179,71,.14); cursor: pointer; transition: background .2s, box-shadow .25s; }
.player .pl-x:hover { background: rgba(255,179,71,.14); box-shadow: 0 0 16px rgba(255,179,71,.35); }
.player .pl-x svg { width: 18px; height: 18px; flex: none; }
.player .pl-go { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; min-height: 50px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 13px;
  font: 800 15px/1.1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; color: #02161a !important; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #3df0ff, #8ff8ff 55%, #3df0ff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 20px rgba(61,240,255,.4), 0 8px 22px -10px rgba(61,240,255,.8); }
.player .pl-go svg { width: 18px; height: 18px; flex: none; }
.player.pv .pl-go { color: #062a10 !important; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), linear-gradient(90deg, #7dff8f, #b4ffbe 55%, #7dff8f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 20px rgba(125,255,143,.4), 0 8px 22px -10px rgba(125,255,143,.8); }
.player .pl-go::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); animation: plShine 3.4s ease-in-out 1s infinite; }
@keyframes plShine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.player .pl-go > * { position: relative; }
.player .pl-ph { flex: none; margin: 0; text-align: center; font: 500 12px/1.3 "Inter Tight", system-ui, sans-serif; color: #ffd23f; }
.player .pl-ph:empty { display: none; }
/* narrow players: "My tracks" on the back button, a smaller head */
@container pl (max-width: 329px) { .pl-xw { display: none; } }
/* r197: an owned track has Share in the foot too, so "Back to" goes a little sooner to leave Download room */
@container pl (max-width: 420px) { .player.pl-files .pl-xw { display: none; } }
/* r198 (David, 13 Nov, phone): no squashed labels on small phones. A tile's name wraps (balanced) rather than being
   cut; on narrow players the side letter sits on the tile's corner so the name has the width, and Back gets shorter
   ("Back", then the arrow alone, still labelled for screen readers) so Share and Download keep their full words */
.pl-xb { display: none; }
.pl-tn { white-space: normal; }
.pl-tn > span { min-width: 0; text-wrap: balance; text-align: center; }
.pl-sm { gap: 2px; }
@container pl (max-width: 320px) {
  .player.pl-files .pl-tapes { gap: 6px; }
  .player.pl-files .pl-tapes button { padding: 6px 4px 7px; }
  .player.pl-files .pl-tn b { position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; }
  .player.pl-files .pl-xm { display: none; }
  .player.pl-files .pl-xb { display: inline; }
  .player.pl-files .pl-x { padding: 0 12px 0 8px; }
}
@container pl (max-width: 290px) {
  .player.pl-files #pl-back { width: 48px; padding: 0; }
  .player.pl-files #pl-back > span { display: none; }
}
/* very short players (a small phone's panel): the tiles are just their names so the cassette keeps some room */
@container pl (max-height: 330px) {
  .player.pl-files .pl-tapes button picture { display: none; }
  .player.pl-files .pl-tapes button { padding: 6px; }
  .player.pl-files .pl-tn b { position: static; }
  .player.pl-files .pl-stage { min-height: 44px; }
}
/* short players: a tighter stack */
@container pl (max-height: 430px) and (max-aspect-ratio: 6/5) {
  .pl-grid, .pl-b { gap: 7px; }
  .pl-ctl { gap: 20px; }
  .pl-ctl .pl-big { width: 56px; height: 56px; }
  .pl-sm { width: 44px; height: 44px; }
  .player .pl-x, .player .pl-go { min-height: 46px !important; }
  .pl-meta small { display: none; }
  .pl-pol { width: 28px; }
}
/* wide players (phone landscape, the zoomed desktop): the cassette on the left, the rest on the right */
@container pl (min-aspect-ratio: 6/5) {
  .pl-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 4cqw, 48px); }
  .pl-a { height: 100%; justify-content: center; }
  .pl-b { justify-content: center; gap: clamp(8px, 2.2cqh, 18px); }
}
/* the zoomed desktop: everything a size up */
.tz-full .player { padding: 0 34px 26px; gap: 14px; }
.tz-full .pl-head { min-height: 66px; padding-right: 64px; }
.tz-full #monitor .pl-head .tz-logo img { height: 30px; }
.tz-full .pl-djn { font-size: calc(26px * var(--k, 1)); }
.tz-full .player .pl-sub { font-size: 15px; }
.tz-full .pl-pol { width: 54px; }
.tz-full .pl-t { font-size: 13px; }
.tz-full .pl-ctl .pl-big { width: 78px; height: 78px; }
.tz-full .pl-sm { width: 56px; height: 56px; }
.tz-full .player .pl-x, .tz-full .player .pl-go { min-height: 58px !important; font-size: 16px; }
.tz-full .pl-tapes button { width: 68px; height: 48px; }
/* phones: the monitor full screen when zoomed; the zoom button is 48px there */
html.phone-panels.lens #monitor.lens-on .pl-head { min-height: 60px; padding-right: 62px; }
html.phone-panels.lens #monitor.lens-on .player { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape .pl-head { min-height: 44px; padding-right: 0; }
  html.phone-landscape.lens #monitor.lens-on .pl-head { padding-right: 62px; }
  html.phone-landscape #monitor .pl-head .tz-logo img { height: 18px; }
}

/* My tracks on phones (night-shift-phone.css places the panel): the head clears CLOSE and the zoom button; landscape
   keeps the left column (head, tabs stacked, CLOSE) and the list on the right */
html.phone-panels #trk .mt-head { padding-right: 140px; }
/* the small JetBrains Mono labels keep to an 11px floor on phones */
html.phone-panels #trk :is(.mt-meta, .mt-own, .mt-fh, .mt-fn small, .sl-h), html.phone-panels .player :is(.pl-tag, .pl-kind, .pl-tl, .pl-meta small, .pl-t) { font-size: 11px; letter-spacing: .04em; }
html.phone-panels #trk .mt-head .tz-logo img { height: 17px; }
html.phone-panels #trk .mt-head h3 { font-size: 15px; padding-left: 8px; }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape #trk .mt-head { grid-area: 1 / 1; flex-wrap: wrap; gap: 4px 8px; padding-right: 0; }
  html.phone-landscape #trk .trk-tabs { grid-area: 2 / 1; grid-template-columns: minmax(0, 1fr); }
  html.phone-landscape #trk .trk-tabs button { justify-content: flex-start; padding-left: 12px; }
  html.phone-landscape #trk .mt-row.full { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  html.phone-landscape #trk .mt-row.full .mt-more { grid-column: 1 / -1; }
}

/* the press flare on the player's and the rows' buttons (night-shift-v3.js adds .mt-glow on a tap) */
:is(.player, #trk) .mt-glow { animation: mtTap .7s ease-out; }
:is(.player, #trk) :is(.pl-big, .pl-sm, .pl-go, .pl-x, .mt-acts > button, .mt-ic, .mt-go, .pl-tapes button)::after { content: ""; position: absolute; left: -45%; bottom: 0; width: 45%; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--g, #fff) 30%, #fff 50%, var(--g, #fff) 70%, transparent); filter: drop-shadow(0 0 4px var(--g, #fff)); }
:is(.player, #trk) .mt-glow::after { animation: mtStreak .65s var(--mt-ease) both; }
@keyframes mtTap { 0% { filter: brightness(1.35); box-shadow: 0 0 0 0 color-mix(in srgb, var(--g, #fff) 80%, transparent), 0 0 24px var(--g, #fff); } 100% { filter: none; } }
@keyframes mtStreak { 15% { opacity: 1; } to { opacity: 0; transform: translateX(330%); } }
.player .pl-big { --g: #ff2daa; } .player .pl-sm { --g: #3df0ff; } .player .pl-go { --g: #3df0ff; } .player.pv .pl-go { --g: #7dff8f; } .player .pl-x { --g: #ffb347; } .pl-tapes button { --g: #ffb347; }
#trk .mt-ic { --g: #7dff8f; } #trk .mt-ic.dl { --g: #3df0ff; }

/* ---------- reduced motion: no reel spin, flares, fades, pulses or shimmer ---------- */
@media (prefers-reduced-motion: reduce) {
  #trk, #trk *, #trk *::before, #trk *::after, .player, .player *, .player *::before, .player *::after { animation: none !important; transition: none !important; }
  #trk .mt-row.mt-flare::after, :is(.player, #trk) .mt-glow::after { display: none; }
}
.still #trk, .still #trk *, .still #trk *::before, .still #trk *::after, .still .player, .still .player *, .still .player *::before, .still .player *::after { animation: none !important; transition: none !important; }
/* r130: "Email me my tracks" (My tracks on another device: night-shift-v3.js paintTrk keyForm) */
#trk .mt-key { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
#trk .mt-key .mt-foot { flex: 1 0 100%; margin: 0; }
#trk .mt-key input { flex: 1 1 180px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.04); color: #ebe6f6; font: 500 14px/1 "Inter Tight", system-ui, sans-serif; }
#trk .mt-keymsg { flex: 1 0 100%; margin: 0; font: 500 12px/1.45 "Inter Tight", system-ui, sans-serif; color: #8f88a8; }