From ae41a4086611be8c7265f0f4b8083b11e9a3227b Mon Sep 17 00:00:00 2001
From: zoop <github@zo0p.dev>
Date: Thu, 10 Sep 2026 14:51:53 -0400
Subject: [PATCH] change scrobbling to last.fm

---
 .dev.vars.example             |  15 +-
 public/badges/brgr.png        | Bin 0 -> 6365 bytes
 src/components/Buttons.astro  |   4 +
 src/components/Music.astro    | 307 +++++++++++++---------------------
 src/components/Stats.astro    |  93 +---------
 src/components/Webrings.astro |   2 +-
 src/data/site.ts              |   1 +
 src/layouts/Base.astro        |   2 +-
 src/pages/api/lastfm.json.ts  | 149 +++++++++++++++++
 src/pages/index.astro         |   2 +-
 src/scripts/music.ts          | 289 +++++++++++++++++++-------------
 src/styles/global.css         | 115 ++++++++++++-
 12 files changed, 574 insertions(+), 405 deletions(-)
 create mode 100644 public/badges/brgr.png
 create mode 100644 src/pages/api/lastfm.json.ts

diff --git a/.dev.vars.example b/.dev.vars.example
index 9afce7d..50a9f0b 100644
--- a/.dev.vars.example
+++ b/.dev.vars.example
@@ -6,12 +6,15 @@ ADMIN_PASSWORD=
 # 32+ random bytes, e.g. `openssl rand -hex 32`
 SESSION_SECRET=
 
-# one-time: get a refresh token via the spotify authorization-code flow with
-# scopes: user-read-currently-playing user-read-recently-played user-top-read
-# without these the "now playing" / "on repeat" sections just stay hidden.
-SPOTIFY_CLIENT_ID=
-SPOTIFY_CLIENT_SECRET=
-SPOTIFY_REFRESH_TOKEN=
+# music widget — now playing + weekly scrobble stats from last.fm. reads a PUBLIC
+# profile, so just a key (last.fm/api/account/create) + your username. no auth.
+LASTFM_API_KEY=
+LASTFM_USER=
+
+# (legacy) spotify — no longer used; the music widget is on last.fm now.
+# SPOTIFY_CLIENT_ID=
+# SPOTIFY_CLIENT_SECRET=
+# SPOTIFY_REFRESH_TOKEN=
 
 # currently-reading widget — personal token from https://hardcover.app/account/api
 HARDCOVER_TOKEN=
diff --git a/public/badges/brgr.png b/public/badges/brgr.png
new file mode 100644
index 0000000000000000000000000000000000000000..59f42432481bd8a1e9868968cef257baa1b29d97
GIT binary patch
literal 6365
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

literal 0
HcmV?d00001

diff --git a/src/components/Buttons.astro b/src/components/Buttons.astro
index a171c25..891aecd 100644
--- a/src/components/Buttons.astro
+++ b/src/components/Buttons.astro
@@ -314,6 +314,10 @@ const badgeUrl = `https://${site.domain}/badges/zachy.gif`;
     z-index: 3;
     transform: translate(var(--x), calc(var(--y) - 5px)) rotate(0deg) scale(1.2);
   }
+  .badge:hover ~ .badge,
+  .badge:focus-visible ~ .badge {
+    transform: translate(var(--x), calc(var(--y) - 7px)) rotate(var(--t));
+  }
   .badge:hover::before,
   .badge:focus-visible::before {
     top: 3px;
diff --git a/src/components/Music.astro b/src/components/Music.astro
index 7d251c6..a559fa1 100644
--- a/src/components/Music.astro
+++ b/src/components/Music.astro
@@ -22,7 +22,7 @@ import { Icon } from "astro-icon/components";
       hidden
     />
     <span class="music__eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
-    <Icon class="music__logo" name="ph:spotify-logo" aria-hidden="true" />
+    <Icon class="music__logo" name="ph:music-notes" aria-hidden="true" />
     <span class="music__main">
       <span class="music__label" id="music-label">now playing</span>
       <span class="music__sub" id="music-sub" aria-hidden="true"></span>
@@ -43,37 +43,58 @@ import { Icon } from "astro-icon/components";
     </div>
 
     <div class="music-wall__body">
-      <div class="music-block" id="np-section" hidden>
-        <h2 class="label">now playing</h2>
-        <div class="np" id="np">
-          <div class="np__body">
-            <img class="np__art np__art--none" id="np-art" alt="" width="64" height="64" decoding="async" />
-            <div class="np__meta">
-              <div class="np__title" id="np-title">&mdash;</div>
-              <div class="np__artist" id="np-artist">&mdash;</div>
-              <div class="np__foot">
-                <span class="np__tx" aria-hidden="true">
-                  <Icon name="ph:skip-back-fill" />
-                  <Icon name="ph:play-fill" />
-                  <Icon name="ph:skip-forward-fill" />
-                </span>
-                <span class="np__dur" id="np-dur"></span>
-                <span class="np__ago" id="np-ago"></span>
-                <a class="np__src" id="np-src" href="#" target="_blank" rel="noopener">
-                  <Icon class="np__logo" name="ph:spotify-logo-fill" aria-hidden="true" /><span>spotify</span>
-                </a>
-              </div>
-            </div>
-            <div class="np__prog" id="np-prog" hidden><div class="np__prog-fill" id="np-prog-fill"></div></div>
-          </div>
+      <a class="np" id="np-src" href="#" target="_blank" rel="noopener" hidden>
+        <img class="np__art np__art--none" id="np-art" alt="" width="60" height="60" decoding="async" />
+        <span class="np__meta">
+          <span class="np__title" id="np-title">&mdash;</span>
+          <span class="np__by" id="np-by">&mdash;</span>
+          <span class="np__foot">
+            <span class="np__src">
+              <Icon class="np__logo" name="ph:spotify-logo-fill" aria-hidden="true" /><span>spotify</span>
+            </span>
+            <span class="np__ago" id="np-ago"></span>
+          </span>
+        </span>
+      </a>
+
+      <div class="stat-bigs" id="lfm-bigs" hidden>
+        <div class="stat-big">
+          <span class="stat-big__n" id="lfm-week">&mdash;</span>
+          <span class="stat-big__k">this week</span>
+        </div>
+        <div class="stat-big">
+          <span class="stat-big__n" id="lfm-all">&mdash;</span>
+          <span class="stat-big__k">all&#8209;time</span>
+        </div>
+        <div class="stat-big">
+          <span class="stat-big__n" id="lfm-mins">&mdash;</span>
+          <span class="stat-big__k">minutes</span>
         </div>
       </div>
 
-      <div class="music-block top" id="top-section" hidden>
-        <h2 class="label">top tracks <span class="label__sub">last 4 weeks</span></h2>
-        <div class="mosaic" id="mosaic"></div>
-        <div class="mosaic__caps" id="mosaic-caps"></div>
+      <p class="lfm-lib" id="lfm-lib" hidden></p>
+
+      <div class="stat-block" id="lfm-top-block" hidden>
+        <h2 class="label">on repeat &middot; this week</h2>
+        <ul class="stat-list" id="lfm-top"></ul>
       </div>
+
+      <div class="stat-block" id="lfm-artists-block" hidden>
+        <h2 class="label">top artists &middot; this week</h2>
+        <ul class="stat-list" id="lfm-artists"></ul>
+      </div>
+
+      <div class="stat-block" id="lfm-recent-block" hidden>
+        <h2 class="label">recently played</h2>
+        <ul class="stat-list stat-list--plain" id="lfm-recent"></ul>
+      </div>
+
+      <p class="wall-foot">
+        scrobbling <a
+          href="https://www.last.fm/user/zoop-zach"
+          target="_blank"
+          rel="noopener">via last.fm &#8599;</a>
+      </p>
     </div>
   </dialog>
 </div>
@@ -304,31 +325,51 @@ import { Icon } from "astro-icon/components";
     overflow-y: auto;
     max-height: calc(min(82vh, 40rem) - 2.6rem);
   }
-  .music-block + .music-block {
-    margin-top: 1.4rem;
+  .music-wall__body .stat-bigs {
+    margin-top: 1rem;
   }
-  .music-block .label {
-    margin-bottom: 0.7rem;
+  .music-wall__body .np[hidden] + .stat-bigs {
+    margin-top: 0;
+  }
+  .lfm-lib {
+    margin: 0.7rem 0 0;
+    font-family: var(--mono);
+    font-size: 0.66rem;
+    letter-spacing: 0.02em;
+    color: var(--faint);
+  }
+  .stat-list--plain li::before {
+    display: none;
+  }
+  .stat-list--plain .stat-list__v {
+    color: var(--faint);
   }
 
   .np {
-    width: 100%;
-    border: 1px solid var(--faint);
-    background: #151412;
-  }
-  .np__body {
     display: flex;
-    gap: 0.7rem;
-    padding: 0.65rem;
+    gap: 0.8rem;
+    align-items: center;
+    padding: 0.7rem;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #151412;
+    text-decoration: none;
+    transition:
+      border-color 0.18s ease,
+      background 0.18s ease;
+  }
+  .np:hover,
+  .np:focus-visible {
+    border-color: var(--faint);
+    background: #191714;
   }
   .np__art {
-    width: 64px;
-    height: 64px;
-    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    flex: none;
     object-fit: cover;
-    border: 1px solid var(--faint);
-    border-radius: 4px;
-    background: var(--faint);
+    border-radius: 5px;
+    background: var(--line);
   }
   .np__art--none {
     background: linear-gradient(145deg, #2c2a26, #171614);
@@ -338,21 +379,25 @@ import { Icon } from "astro-icon/components";
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    gap: 0.05rem;
+    gap: 0.15rem;
     font-family: var(--mono);
   }
   .np__title {
-    color: #fff;
-    font-size: 0.8rem;
-    line-height: 1.35;
+    color: var(--ink);
+    font-size: 0.85rem;
+    line-height: 1.3;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    transition: color 0.18s ease;
   }
-  .np__artist {
+  .np:hover .np__title,
+  .np:focus-visible .np__title {
+    color: #fff;
+  }
+  .np__by {
+    font-size: 0.72rem;
     color: var(--muted);
-    font-size: 0.74rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -361,157 +406,41 @@ import { Icon } from "astro-icon/components";
     display: flex;
     align-items: center;
     gap: 0.6rem;
-    margin-top: 0.3rem;
+    margin-top: 0.32rem;
     font-size: 0.68rem;
   }
-  .np__tx {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.32rem;
-    color: var(--muted);
-    flex-shrink: 0;
-  }
-  .np__tx svg {
-    display: block;
-  }
-  .np__dur {
-    color: var(--muted);
-    white-space: nowrap;
-  }
-  .np__ago {
-    color: var(--faint);
-    white-space: nowrap;
-  }
   .np__src {
-    margin-left: auto;
     display: inline-flex;
     align-items: center;
-    gap: 0.3rem;
+    gap: 0.35ch;
     color: var(--muted);
-    text-decoration: none;
-    white-space: nowrap;
   }
-  .np__src:hover {
+  .np:hover .np__src {
     color: #fff;
   }
   .np__logo {
-    width: 0.95em;
-    height: 0.95em;
+    width: 1em;
+    height: 1em;
+    flex: none;
     color: #1ed760;
-    flex-shrink: 0;
-    display: block;
   }
-  .np__prog {
-    height: 2px;
-    background: #2b2825;
+  .np--live .np__logo {
+    animation: np-glow 1.8s ease-in-out infinite;
   }
-  .np__prog-fill {
-    height: 2px;
-    width: 0%;
-    background: linear-gradient(90deg, rgb(255, 224, 138), rgb(255, 171, 94), rgb(255, 95, 109));
-    transition: width 1s linear;
-  }
-
-  .mosaic {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    grid-auto-flow: dense;
-    gap: 3px;
-    aspect-ratio: 4 / 3;
-    width: 100%;
-  }
-  .mosaic__cell {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    min-width: 0;
-    background: rgba(255, 255, 255, 0.04);
-  }
-  .mosaic__cell--xl {
-    grid-column: span 2;
-    grid-row: span 2;
-  }
-  .mosaic__cell img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    filter: saturate(0.7) brightness(0.82);
-    transition:
-      filter 0.18s ease,
-      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .mosaic__cell:hover img,
-  .mosaic__cell:focus-visible img {
-    filter: none;
-    transform: scale(1.08);
-  }
-  .mosaic__caps {
-    position: relative;
-    margin-top: 0.5rem;
-    min-height: 1.35em;
-    font-family: var(--mono);
-    font-size: 0.74rem;
-  }
-  .mosaic__cap {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: baseline;
-    gap: 0.55rem;
-    opacity: 0;
-    transition: opacity 0.14s ease;
-    pointer-events: none;
-    white-space: normal;
-  }
-  .mosaic__rank {
-    color: var(--faint);
-    font-variant-numeric: tabular-nums;
-    flex-shrink: 0;
-  }
-  .mosaic__title {
-    color: var(--ink);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 1;
-    min-width: 0;
-  }
-  .mosaic__artist {
-    color: var(--faint);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-    min-width: 0;
-  }
-  .mosaic__cap:first-child {
-    opacity: 1;
-  }
-
-  @supports selector(:has(*)) {
-    .top:has(.mosaic__cell:hover) .mosaic__cap,
-    .top:has(.mosaic__cell:focus-visible) .mosaic__cap {
-      opacity: 0;
+  @keyframes np-glow {
+    50% {
+      filter: drop-shadow(0 0 4px rgba(30, 215, 96, 0.8));
     }
-    .top:has(.mosaic__cell:nth-child(1):hover) .mosaic__cap:nth-child(1),
-    .top:has(.mosaic__cell:nth-child(1):focus-visible) .mosaic__cap:nth-child(1),
-    .top:has(.mosaic__cell:nth-child(2):hover) .mosaic__cap:nth-child(2),
-    .top:has(.mosaic__cell:nth-child(2):focus-visible) .mosaic__cap:nth-child(2),
-    .top:has(.mosaic__cell:nth-child(3):hover) .mosaic__cap:nth-child(3),
-    .top:has(.mosaic__cell:nth-child(3):focus-visible) .mosaic__cap:nth-child(3),
-    .top:has(.mosaic__cell:nth-child(4):hover) .mosaic__cap:nth-child(4),
-    .top:has(.mosaic__cell:nth-child(4):focus-visible) .mosaic__cap:nth-child(4),
-    .top:has(.mosaic__cell:nth-child(5):hover) .mosaic__cap:nth-child(5),
-    .top:has(.mosaic__cell:nth-child(5):focus-visible) .mosaic__cap:nth-child(5),
-    .top:has(.mosaic__cell:nth-child(6):hover) .mosaic__cap:nth-child(6),
-    .top:has(.mosaic__cell:nth-child(6):focus-visible) .mosaic__cap:nth-child(6),
-    .top:has(.mosaic__cell:nth-child(7):hover) .mosaic__cap:nth-child(7),
-    .top:has(.mosaic__cell:nth-child(7):focus-visible) .mosaic__cap:nth-child(7),
-    .top:has(.mosaic__cell:nth-child(8):hover) .mosaic__cap:nth-child(8),
-    .top:has(.mosaic__cell:nth-child(8):focus-visible) .mosaic__cap:nth-child(8),
-    .top:has(.mosaic__cell:nth-child(9):hover) .mosaic__cap:nth-child(9),
-    .top:has(.mosaic__cell:nth-child(9):focus-visible) .mosaic__cap:nth-child(9) {
-      opacity: 1;
+  }
+  .np__ago {
+    margin-left: auto;
+    flex: none;
+    color: var(--faint);
+    white-space: nowrap;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .np--live .np__logo {
+      animation: none;
     }
   }
 
diff --git a/src/components/Stats.astro b/src/components/Stats.astro
index 6abd8e8..a159ab2 100644
--- a/src/components/Stats.astro
+++ b/src/components/Stats.astro
@@ -54,7 +54,7 @@ import { Icon } from "astro-icon/components";
         <ul class="stat-list" id="sb-refs"></ul>
       </div>
 
-      <p class="stats-wall__foot">
+      <p class="wall-foot">
         all&#8209;time &middot; via <a
           href="https://umami.is"
           target="_blank"
@@ -174,97 +174,6 @@ import { Icon } from "astro-icon/components";
     max-height: calc(min(82vh, 40rem) - 2.6rem);
   }
 
-  .stat-bigs {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5rem;
-  }
-  .stat-big {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    padding: 0.7rem 0.6rem;
-    border: 1px solid var(--line);
-    border-radius: 6px;
-    background: #151412;
-    text-align: center;
-  }
-  .stat-big__n {
-    font-family: var(--mono);
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--ink);
-    font-variant-numeric: tabular-nums;
-  }
-  .stat-big__k {
-    font-family: var(--mono);
-    font-size: 0.58rem;
-    letter-spacing: 0.12em;
-    color: var(--faint);
-  }
-
-  .stat-block {
-    margin-top: 1.4rem;
-  }
-  .stat-block .label {
-    margin-bottom: 0.6rem;
-  }
-  .stat-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-  }
-  .stat-list li {
-    position: relative;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1ch;
-    padding: 0.34rem 0.5rem;
-    border-radius: 4px;
-    overflow: hidden;
-    font-family: var(--mono);
-    font-size: 0.74rem;
-  }
-  .stat-list li::before {
-    content: "";
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: var(--w, 0%);
-    background: rgba(255, 171, 94, 0.1);
-    border-right: 1px solid rgba(255, 171, 94, 0.25);
-  }
-  .stat-list__k {
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--ink);
-  }
-  .stat-list__v {
-    position: relative;
-    flex: none;
-    color: var(--muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .stats-wall__foot {
-    margin: 1.5rem 0 0;
-    font-family: var(--mono);
-    font-size: 0.66rem;
-    letter-spacing: 0.03em;
-    color: var(--faint);
-  }
-  .stats-wall__foot a {
-    color: var(--faint);
-    text-decoration: none;
-  }
-  .stats-wall__foot a:hover {
-    color: var(--accent);
-  }
 </style>
 
 <script>
diff --git a/src/components/Webrings.astro b/src/components/Webrings.astro
index ad42c7d..046d5a5 100644
--- a/src/components/Webrings.astro
+++ b/src/components/Webrings.astro
@@ -95,7 +95,7 @@ import { Icon } from "astro-icon/components";
     display: block;
     box-sizing: border-box;
     width: fit-content;
-    min-width: 18rem;
+    min-width: min(18rem, 100%);
     max-width: 100%;
     padding: 1rem 1.1rem 0.85rem;
     border: 1px solid var(--line);
diff --git a/src/data/site.ts b/src/data/site.ts
index d3ec98f..aa56d94 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -86,4 +86,5 @@ export const buttons = [
   { label: "increment", iframe: "//incr.easrng.net/badge?key=zachy.cc-2026", bg: "//incr.easrng.net/bg.gif", href: null },
   { label: "ro.er", img: "/badges/ro-er.gif", still: null, href: "https://retrobloxxer.github.io/" },
   { label: "kevadesu", img: "/badges/kevadesu.gif", still: null, href: "https://kevadesu.github.io/" },
+  { label: "burger", img: "/badges/brgr.png", still: null, href: "https://burgeronthe.net/" },
 ];
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 0d214f7..664e034 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -41,7 +41,7 @@ const kaoCount = kaoMs > 0 ? `${Math.floor(kaoMs / 86_400_000)}d` : "in effect";
       path === "/" && (
         <>
           <link rel="preconnect" href="https://assets.hardcover.app" crossorigin />
-          <link rel="preconnect" href="https://i.scdn.co" crossorigin />
+          <link rel="preconnect" href="https://lastfm-img.freetls.fastly.net" crossorigin />
         </>
       )
     }
diff --git a/src/pages/api/lastfm.json.ts b/src/pages/api/lastfm.json.ts
new file mode 100644
index 0000000..e50459a
--- /dev/null
+++ b/src/pages/api/lastfm.json.ts
@@ -0,0 +1,149 @@
+import type { APIRoute } from "astro";
+import { env as cfEnv } from "cloudflare:workers";
+
+export const prerender = false;
+
+
+type Env = Record<string, string | undefined>;
+
+function getEnv(): Env {
+  const nodeEnv = typeof process !== "undefined" ? process.env : {};
+  let workerEnv: Env = {};
+  try {
+    workerEnv = cfEnv as unknown as Env;
+  } catch {
+  }
+  return { ...nodeEnv, ...workerEnv };
+}
+
+const API = "https://ws.audioscrobbler.com/2.0/";
+const NO_ART = "2a96cbd8b46e442fc41c2b86b821562f";
+
+function pickArt(images: any): string | null {
+  if (!Array.isArray(images)) return null;
+  const order = ["extralarge", "large", "medium", "small"];
+  for (const size of order) {
+    const u = images.find((x: any) => x?.size === size)?.["#text"];
+    if (u && !u.includes(NO_ART)) return u;
+  }
+  return null;
+}
+
+const n = (v: any): number => {
+  const x = Number(v);
+  return Number.isFinite(x) ? x : 0;
+};
+
+export const GET: APIRoute = async () => {
+  const e = getEnv();
+  const key = e.LASTFM_API_KEY;
+  const user = e.LASTFM_USER;
+
+  const json = (data: unknown, status = 200) =>
+    new Response(JSON.stringify(data), {
+      status,
+      headers: {
+        "content-type": "application/json",
+        "cache-control": "public, max-age=180, s-maxage=300, stale-while-revalidate=1800",
+      },
+    });
+
+  const empty = {
+    configured: false,
+    nowPlaying: null as unknown,
+    top: [] as unknown[],
+    topArtists: [] as unknown[],
+    history: [] as unknown[],
+    weekPlays: 0,
+    allTimePlays: 0,
+    estMinutes: 0,
+    lib: { artists: 0, albums: 0, tracks: 0 },
+  };
+  if (!key || !user) return json(empty);
+
+  const call = (params: string) =>
+    fetch(`${API}?${params}&api_key=${key}&user=${encodeURIComponent(user)}&format=json`, {
+      headers: { "user-agent": "zachy.cc music widget" },
+    }).then((r) => r.json());
+
+  const from = Math.floor(Date.now() / 1000) - 7 * 86400;
+
+  try {
+    const [recent, top, artists, week, info] = await Promise.all([
+      call("method=user.getrecenttracks&limit=8&extended=1"),
+      call("method=user.gettoptracks&period=7day&limit=8"),
+      call("method=user.gettopartists&period=7day&limit=6"),
+      call(`method=user.getrecenttracks&limit=1&from=${from}`),
+      call("method=user.getinfo"),
+    ]);
+
+    const rtRaw = (recent as any)?.recenttracks?.track;
+    const rtArr: any[] = Array.isArray(rtRaw) ? rtRaw : rtRaw ? [rtRaw] : [];
+    const rt = rtArr[0];
+    const nowPlaying = rt
+      ? {
+          title: rt.name ?? "",
+          artist: rt.artist?.name ?? rt.artist?.["#text"] ?? "",
+          album: rt.album?.["#text"] ?? "",
+          art: pickArt(rt.image),
+          url: rt.url ?? "",
+          isPlaying: rt["@attr"]?.nowplaying === "true",
+          playedAt: rt.date?.uts ? n(rt.date.uts) * 1000 : null,
+        }
+      : null;
+
+    const history = rtArr
+      .filter((t: any) => t["@attr"]?.nowplaying !== "true" && t.date?.uts)
+      .slice(0, 6)
+      .map((t: any) => ({
+        title: t.name ?? "",
+        artist: t.artist?.name ?? t.artist?.["#text"] ?? "",
+        playedAt: n(t.date.uts) * 1000,
+      }))
+      .filter((t: any) => t.title);
+
+    const topTracks = ((top as any)?.toptracks?.track ?? [])
+      .map((t: any) => ({
+        title: t.name ?? "",
+        artist: t.artist?.name ?? "",
+        plays: n(t.playcount),
+        secs: n(t.duration),
+        url: t.url ?? "",
+      }))
+      .filter((t: any) => t.title);
+
+    const topArtists = ((artists as any)?.topartists?.artist ?? [])
+      .map((a: any) => ({
+        name: a.name ?? "",
+        plays: n(a.playcount),
+        url: a.url ?? "",
+      }))
+      .filter((a: any) => a.name);
+
+    const weekPlays = n((week as any)?.recenttracks?.["@attr"]?.total);
+    const u = (info as any)?.user ?? {};
+    const allTimePlays = n(u.playcount);
+    const lib = { artists: n(u.artist_count), albums: n(u.album_count), tracks: n(u.track_count) };
+
+    const durs = topTracks.map((t: any) => t.secs).filter((s: number) => s > 0);
+    const avgSec = durs.length ? durs.reduce((a: number, b: number) => a + b, 0) / durs.length : 210;
+    const estMinutes = Math.round((allTimePlays * avgSec) / 60);
+
+    if (!nowPlaying && !topTracks.length && !weekPlays) {
+      return json({ ...empty, configured: true });
+    }
+    return json({
+      configured: true,
+      nowPlaying,
+      top: topTracks,
+      topArtists,
+      history,
+      weekPlays,
+      allTimePlays,
+      estMinutes,
+      lib,
+    });
+  } catch {
+    return json({ ...empty, configured: true });
+  }
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4614300..94e32ea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,7 +12,7 @@ import { site, elsewhere } from "../data/site";
 <Base>
   <script is:inline>
     window.__mm = {};
-    for (const k of ["spotify", "reading", "stats"]) {
+    for (const k of ["lastfm", "reading", "stats"]) {
       window.__mm[k] = fetch("/api/" + k + ".json", { headers: { accept: "application/json" } })
         .then(function (r) {
           return r.json();
diff --git a/src/scripts/music.ts b/src/scripts/music.ts
index 305fce2..042cb7c 100644
--- a/src/scripts/music.ts
+++ b/src/scripts/music.ts
@@ -3,17 +3,47 @@ interface Track {
   title: string;
   artist: string;
   url: string;
-  art: string | null;
+  plays?: number;
 }
-interface NP extends Track {
+interface ArtistRow {
+  name: string;
+  plays: number;
+  url: string;
+}
+interface HistRow {
+  title: string;
+  artist: string;
+  playedAt: number;
+}
+interface NP {
+  title: string;
+  artist: string;
+  album: string;
+  art: string | null;
+  url: string;
   isPlaying: boolean;
-  progressMs: number | null;
-  durationMs: number | null;
-  playedAt: string | null;
+  playedAt: number | null;
+}
+interface Data {
+  configured: boolean;
+  nowPlaying: NP | null;
+  top: Track[];
+  topArtists: ArtistRow[];
+  history: HistRow[];
+  weekPlays: number;
+  allTimePlays: number;
+  estMinutes: number;
+  lib: { artists: number; albums: number; tracks: number };
 }
 
-function ago(iso: string): string {
-  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+const $ = (id: string) => document.getElementById(id);
+const esc = (s: string): string =>
+  s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
+const fmt = (n: number): string => new Intl.NumberFormat("en-US").format(n);
+const clamp = (s: string, n = 22): string => (s.length > n ? s.slice(0, n - 1).trimEnd() + "…" : s);
+
+function ago(ms: number): string {
+  const s = Math.max(0, (Date.now() - ms) / 1000);
   if (s < 90) return "just now";
   const m = s / 60;
   if (m < 60) return `${Math.round(m)}m ago`;
@@ -22,20 +52,9 @@ function ago(iso: string): string {
   return `${Math.round(h / 24)}d ago`;
 }
 
-const mmss = (ms: number): string => {
-  const t = Math.round(ms / 1000);
-  return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
-};
-
-const $ = (id: string) => document.getElementById(id);
-const esc = (s: string): string =>
-  s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
-const clamp = (s: string, n = 22): string =>
-  s.length > n ? s.slice(0, n - 1).trimEnd() + "…" : s;
-
 function renderNowPlaying(np: NP): void {
-  const section = $("np-section");
-  if (!section) return;
+  const card = $("np-src") as HTMLAnchorElement | null;
+  if (!card) return;
 
   const art = $("np-art") as HTMLImageElement | null;
   if (art) {
@@ -47,99 +66,144 @@ function renderNowPlaying(np: NP): void {
       art.classList.add("np__art--none");
     }
   }
+
   const title = $("np-title");
-  const artist = $("np-artist");
-  if (title) title.textContent = np.title;
-  if (artist) artist.textContent = np.artist;
-
-  const src = $("np-src") as HTMLAnchorElement | null;
-  if (src && np.url) src.href = np.url;
-
-  const dur = $("np-dur");
+  const by = $("np-by");
   const agoEl = $("np-ago");
-  const prog = $("np-prog");
-  const fill = $("np-prog-fill") as HTMLElement | null;
-  const total = np.durationMs;
+  if (title) title.textContent = np.title;
+  if (by) by.textContent = np.album ? `${np.artist} · ${np.album}` : np.artist;
+  if (agoEl) agoEl.textContent = np.isPlaying ? "" : np.playedAt ? ago(np.playedAt) : "";
 
-  if (np.isPlaying && np.progressMs != null && total) {
-    if (dur) dur.textContent = `${mmss(np.progressMs)} / ${mmss(total)}`;
-    if (agoEl) agoEl.textContent = "";
-    if (prog) prog.hidden = false;
-    const paint = (p: number): void => {
-      if (fill) fill.style.width = Math.min(100, (p / total) * 100) + "%";
-    };
-    paint(np.progressMs);
-    let p = np.progressMs;
-    const iv = window.setInterval(() => {
-      p += 1000;
-      if (p >= total) {
-        window.clearInterval(iv);
-        return;
-      }
-      paint(p);
-    }, 1000);
-  } else {
-    if (prog) prog.hidden = true;
-    if (dur) dur.textContent = total ? mmss(total) : "";
-    if (agoEl) agoEl.textContent = np.playedAt ? ago(np.playedAt) : "";
+  card.classList.toggle("np--live", np.isPlaying);
+  card.href = `https://open.spotify.com/search/${encodeURIComponent(`${np.title} ${np.artist}`)}`;
+
+  card.hidden = false;
+}
+
+interface Row {
+  k: string;
+  sub?: string;
+  v: string;
+  w?: number;
+}
+
+function fillList(listId: string, blockId: string, rows: Row[]): void {
+  const list = $(listId);
+  const block = $(blockId);
+  if (!list || !block || !rows.length) return;
+  list.innerHTML = rows
+    .map((r) => {
+      const sub = r.sub ? ` <span class="stat-list__sub">${esc(r.sub)}</span>` : "";
+      return `<li style="--w:${r.w ?? 0}%"><span class="stat-list__k">${esc(
+        r.k,
+      )}${sub}</span><span class="stat-list__v">${r.v}</span></li>`;
+    })
+    .join("");
+  block.hidden = false;
+}
+
+function renderStats(d: Data): void {
+  const week = $("lfm-week");
+  const all = $("lfm-all");
+  const mins = $("lfm-mins");
+  const bigs = $("lfm-bigs");
+  if (week) week.textContent = fmt(d.weekPlays);
+  if (all) all.textContent = fmt(d.allTimePlays);
+  if (mins) mins.textContent = fmt(d.estMinutes);
+  if (bigs && (d.weekPlays || d.allTimePlays)) bigs.hidden = false;
+
+  const lib = $("lfm-lib");
+  if (lib && d.lib && (d.lib.artists || d.lib.tracks)) {
+    lib.textContent = `${fmt(d.lib.artists)} artists · ${fmt(d.lib.albums)} albums · ${fmt(
+      d.lib.tracks,
+    )} tracks in the library`;
+    lib.hidden = false;
   }
 
-  section.hidden = false;
+  const trackMax = d.top.reduce((m, t) => Math.max(m, t.plays ?? 0), 0) || 1;
+  fillList(
+    "lfm-top",
+    "lfm-top-block",
+    d.top.map((t) => ({
+      k: t.title,
+      sub: t.artist,
+      v: `${fmt(t.plays ?? 0)} &times;`,
+      w: Math.round(((t.plays ?? 0) / trackMax) * 100),
+    })),
+  );
+
+  const artMax = d.topArtists.reduce((m, a) => Math.max(m, a.plays), 0) || 1;
+  fillList(
+    "lfm-artists",
+    "lfm-artists-block",
+    d.topArtists.map((a) => ({
+      k: a.name,
+      v: `${fmt(a.plays)} &times;`,
+      w: Math.round((a.plays / artMax) * 100),
+    })),
+  );
+
+  fillList(
+    "lfm-recent",
+    "lfm-recent-block",
+    d.history.map((h) => ({ k: h.title, sub: h.artist, v: ago(h.playedAt) })),
+  );
 }
 
-function renderTop(tracks: Track[]): void {
-  const section = $("top-section");
-  const mosaic = $("mosaic");
-  const caps = $("mosaic-caps");
-  if (!section || !mosaic || !caps || !tracks.length) return;
-
-  mosaic.innerHTML = tracks
-    .map((t, i) => {
-      const cls = i === 0 ? "mosaic__cell mosaic__cell--xl" : "mosaic__cell";
-      const label = esc(`${t.title} — ${t.artist}`);
-      const img = t.art
-        ? `<img src="${esc(t.art)}" alt="${label}" loading="lazy" decoding="async">`
-        : "";
-      return `<a class="${cls}" href="${esc(t.url)}" target="_blank" rel="noopener" title="${label}">${img}</a>`;
-    })
-    .join("");
-
-  caps.innerHTML = tracks
-    .map((t, i) => {
-      const rank = String(i + 1).padStart(2, "0");
-      return `<div class="mosaic__cap"><span class="mosaic__rank">${rank}</span><span class="mosaic__title">${esc(
-        t.title,
-      )}</span><span class="mosaic__artist">${esc(t.artist)}</span></div>`;
-    })
-    .join("");
-
-  section.hidden = false;
-}
-
-function mockData() {
-  const art = (n: number) => `https://picsum.photos/seed/np${n}/200`;
-  const mk = (n: number): Track => ({
-    title: ["After Party", "Gemstone", "Heartless", "Breathe", "ONE CALL", "Alright", "Nights", "Ivy", "Self Control"][n],
-    artist: ["Don Toliver", "Don Toliver", "Kanye West", "Yeat", "Rich Amiri", "Kendrick Lamar", "Frank Ocean", "Frank Ocean", "Frank Ocean"][n],
-    url: "https://open.spotify.com",
-    art: art(n),
+function mockData(): Data {
+  const mk = (title: string, artist: string, plays: number): Track => ({
+    title,
+    artist,
+    url: "https://www.last.fm",
+    plays,
   });
   return {
     configured: true,
-    nowPlaying: { ...mk(0), isPlaying: true, progressMs: 78000, durationMs: 175000, playedAt: null },
-    top: Array.from({ length: 9 }, (_, i) => mk(i)),
+    nowPlaying: {
+      title: "20 Min",
+      artist: "Lil Uzi Vert",
+      album: "Luv Is Rage 2 (Deluxe)",
+      art: "https://picsum.photos/seed/np/200",
+      url: "https://www.last.fm",
+      isPlaying: true,
+      playedAt: null,
+    },
+    top: [
+      mk("After Party", "Don Toliver", 14),
+      mk("NIGHTS LIKE THIS", "Kehlani", 11),
+      mk("20 Min", "Lil Uzi Vert", 9),
+      mk("Gemstones", "Don Toliver", 6),
+      mk("HEARTLESS", "The Weeknd", 4),
+    ],
+    topArtists: [
+      { name: "Don Toliver", plays: 26, url: "" },
+      { name: "Lil Uzi Vert", plays: 18, url: "" },
+      { name: "Kehlani", plays: 12, url: "" },
+      { name: "The Weeknd", plays: 7, url: "" },
+    ],
+    history: [
+      { title: "20 Min", artist: "Lil Uzi Vert", playedAt: Date.now() - 6 * 60_000 },
+      { title: "After Party", artist: "Don Toliver", playedAt: Date.now() - 12 * 60_000 },
+      { title: "Gemstones", artist: "Don Toliver", playedAt: Date.now() - 40 * 60_000 },
+      { title: "NIGHTS LIKE THIS", artist: "Kehlani", playedAt: Date.now() - 3 * 3_600_000 },
+      { title: "HEARTLESS", artist: "The Weeknd", playedAt: Date.now() - 26 * 3_600_000 },
+    ],
+    weekPlays: 128,
+    allTimePlays: 4210,
+    estMinutes: 13892,
+    lib: { artists: 214, albums: 388, tracks: 1102 },
   };
 }
 
 type MusicState = "ready" | "idle" | "off";
 
 async function load(): Promise<MusicState> {
-  let data: any;
+  let data: Data;
   try {
-    const mm = (window as any).__mm?.spotify as Promise<any> | undefined;
+    const mm = (window as any).__mm?.lastfm as Promise<Data> | undefined;
     data = mm
       ? await mm
-      : await fetch("/api/spotify.json", { headers: { accept: "application/json" } }).then((r) =>
+      : await fetch("/api/lastfm.json", { headers: { accept: "application/json" } }).then((r) =>
           r.json(),
         );
   } catch {
@@ -147,43 +211,42 @@ async function load(): Promise<MusicState> {
   }
   if (location.search.includes("mockmusic")) data = mockData();
   if (!data || !data.configured) return "off";
-  if (data.nowPlaying) renderNowPlaying(data.nowPlaying as NP);
-  if (Array.isArray(data.top)) renderTop(data.top as Track[]);
+
+  const np = data.nowPlaying;
+  const top = Array.isArray(data.top) ? data.top : [];
+  data.top = top;
+  data.topArtists = Array.isArray(data.topArtists) ? data.topArtists : [];
+  data.history = Array.isArray(data.history) ? data.history : [];
+  data.lib = data.lib ?? { artists: 0, albums: 0, tracks: 0 };
+  if (np) renderNowPlaying(np);
+  renderStats(data);
 
   const trigger = document.querySelector<HTMLButtonElement>(".music__trigger");
-  if (trigger && (data.nowPlaying || (Array.isArray(data.top) && data.top.length))) {
+  const hasAnything = !!np || top.length > 0 || !!data.weekPlays;
+  if (trigger && hasAnything) {
     trigger.hidden = false;
     const label = $("music-label");
+    const sub = $("music-sub");
     const artEl = $("music-art") as HTMLImageElement | null;
-    const np = data.nowPlaying as NP | null;
-    const cover = np?.art || (data.top as Track[] | undefined)?.[0]?.art || null;
 
-    if (artEl && cover) {
-      artEl.src = cover;
+    if (artEl && np?.art) {
+      artEl.src = np.art;
       artEl.hidden = false;
     }
 
-    const sub = $("music-sub");
-    const bar = $("music-bar");
-    const fill = bar?.firstElementChild as HTMLElement | null;
-
     if (label) {
       if (np?.isPlaying) {
         trigger.classList.add("music__trigger--live");
         label.textContent = clamp(np.title);
         trigger.title = `${np.title} — ${np.artist}`;
         if (sub) sub.textContent = np.artist;
-        if (bar && fill && np.progressMs != null && np.durationMs) {
-          fill.style.setProperty("--p", `${Math.min(100, (np.progressMs / np.durationMs) * 100)}%`);
-          bar.hidden = false;
-        }
-      } else if (np?.playedAt) {
+      } else if (np) {
         label.textContent = "last played";
         trigger.title = `${np.title} — ${np.artist}`;
         if (sub) sub.textContent = `${clamp(np.title, 26)} · ${np.artist}`;
       } else {
-        label.textContent = "top tracks";
-        if (sub) sub.textContent = "last 4 weeks";
+        label.textContent = "music";
+        if (sub) sub.textContent = `${fmt(data.weekPlays)} plays this week`;
       }
     }
     return "ready";
@@ -200,7 +263,7 @@ const apply = (state: MusicState) => {
       trigger.hidden = false;
       trigger.disabled = true;
       const label = document.getElementById("music-label");
-      if (label) label.textContent = "not playing";
+      if (label) label.textContent = "not scrobbling";
     }
   }
 };
diff --git a/src/styles/global.css b/src/styles/global.css
index 11b0ca9..f05984c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -60,7 +60,7 @@ body {
   text-rendering: optimizeLegibility;
   max-width: var(--col);
   margin-inline: auto;
-  padding: clamp(2.5rem, 9vw, 4.5rem) clamp(1.5rem, 6vw, 2rem) clamp(5rem, 12vw, 7rem);
+  padding: clamp(2.5rem, 9vw, 4.5rem) clamp(1.25rem, 5vw, 2rem) clamp(5rem, 12vw, 7rem);
 }
 
 ::selection {
@@ -204,9 +204,10 @@ img {
 .topbar {
   margin: 0 0 clamp(2rem, 5vw, 3rem);
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 0.6rem 1rem;
 }
 .mark {
   font-family: var(--display);
@@ -550,6 +551,116 @@ img {
   color: var(--accent);
 }
 
+.stat-bigs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+.stat-big {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.7rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #151412;
+  text-align: center;
+}
+.stat-big__n {
+  font-family: var(--mono);
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.stat-big__k {
+  font-family: var(--mono);
+  font-size: 0.58rem;
+  letter-spacing: 0.12em;
+  color: var(--faint);
+}
+.stat-block {
+  margin-top: 1.4rem;
+}
+.stat-block .label {
+  margin-bottom: 0.6rem;
+}
+.stat-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.stat-list li {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1ch;
+  padding: 0.34rem 0.5rem;
+  border-radius: 4px;
+  overflow: hidden;
+  font-family: var(--mono);
+  font-size: 0.74rem;
+}
+.stat-list li::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--w, 0%);
+  background: rgba(255, 171, 94, 0.1);
+  border-right: 1px solid rgba(255, 171, 94, 0.25);
+}
+.stat-list__k {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink);
+}
+.stat-list__k .stat-list__sub {
+  color: var(--faint);
+}
+.stat-list__v {
+  position: relative;
+  flex: none;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+.wall-foot {
+  margin: 1.5rem 0 0;
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.03em;
+  color: var(--faint);
+}
+.wall-foot a {
+  color: var(--faint);
+  text-decoration: none;
+}
+.wall-foot a:hover {
+  color: var(--accent);
+}
+
+@media (max-width: 25rem) {
+  .ribbon__sub {
+    display: none;
+  }
+  .ribbon__link {
+    padding: 0.5rem 0.35rem 0.5rem 0.6rem;
+  }
+  .ribbon__x {
+    padding: 0 0.55rem;
+  }
+}
+@media (max-width: 20rem) {
+  .mm-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.001ms !important;