/* Variant: Player — a music player with the project stages as the track list. Dark. */
:root {
  --bg: #0f0d14; --surface: #19161f; --muted: #13111a; --ink: #f5f2fa; --ink-2: #a39eb2; --line: #2a2534;
  --accent: #ff7a3d; --accent-ink: #1a0a02; --accent-soft: #3a1f14; --green-soft: #1f1a2a; --amber-soft: #2e2214;
  --night: #19161f; --night-2: #221e2b; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #f5f2fa; --night-ink-2: #a39eb2;
  --ui-bg: #221e2a; --ui-line: #302a3a; --ui-fill: #3c3548; --ui-fill-2: #28232f; --ui-strong: #f5f2fa; --ui-accent: #ff7a3d; --ui-img: #3a2418;
  --ui-tint-a: #4a2a1a; --ui-tint-b: #3a1f3a; --ui-tint-c: #3a3218;
  color-scheme: dark;
}
.pl { display: grid; gap: 1.25rem; padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(160deg, #221d2c, #15121b); box-shadow: 0 40px 80px -40px rgba(255, 122, 61, 0.35); }
@media (min-width: 40em) { .pl { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.pl-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, #ff7a3d, #e0457b 55%, #6a4fe8); }
.pl-art b { position: relative; z-index: 1; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 750; color: #ffffff; letter-spacing: -0.05em; }
.pl-disc { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0.35) 0 2px, rgba(0, 0, 0, 0.18) 2px 4px); }
@media (prefers-reduced-motion: no-preference) { .pl-disc { animation: pl-spin 6s linear infinite; } @keyframes pl-spin { to { rotate: 360deg; } } }
.pl-now { font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.pl-song { margin-top: 0.3rem; font-size: 1.375rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.pl-artist { color: var(--ink-2); font-size: 0.875rem; }
.pl-bar { height: 4px; margin-top: 1rem; border-radius: 999px; background: var(--line); }
.pl-bar span { display: block; width: 46%; height: 100%; border-radius: inherit; background: var(--accent); position: relative; }
.pl-bar span::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; }
@media (prefers-reduced-motion: no-preference) { .pl-bar span { animation: pl-prog 30s linear infinite; } @keyframes pl-prog { from { width: 10%; } to { width: 95%; } } }
.pl-ctrl { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 1rem; }
.pl-ctrl i { display: block; background: var(--ink); }
.pl-prev, .pl-next { width: 18px; height: 16px; clip-path: polygon(0 0, 20% 0, 20% 40%, 100% 0, 100% 100%, 20% 60%, 20% 100%, 0 100%); }
.pl-next { rotate: 180deg; }
.pl-play { width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink) !important; position: relative; }
.pl-play::after { content: ""; position: absolute; left: 38%; top: 30%; width: 34%; height: 40%; background: var(--bg); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pl-tracks { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pl-tracks li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.5rem; padding-block: 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); }
.pl-tracks li b { font-weight: 550; color: var(--ink); }
.pl-tracks li.is-on, .pl-tracks li.is-on b { color: var(--accent); }
.tile--dark { background: linear-gradient(160deg, #3a1f14, #19161f 70%); }