diff --git a/.gitignore b/.gitignore
index 629f70c..8038817 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,9 +4,6 @@ docs/superpowers/
 # claude code per-project state
 .claude/
 
-# design handoff bundle from claude design — local reference only
-.design-prototype/
-
 # generated configs and secrets
 config/*.env
 !config/*.env.example
diff --git a/config/frontend.env.example b/config/frontend.env.example
deleted file mode 100644
index fb71aa0..0000000
--- a/config/frontend.env.example
+++ /dev/null
@@ -1,5 +0,0 @@
-NODE_ENV=production
-HOST=0.0.0.0
-PORT=3000
-LIBRARY_ROOT=/library
-DATA_ROOT=/now-playing
diff --git a/config/liquidsoap.liq b/config/liquidsoap.liq
index 52e7d88..fab96fa 100644
--- a/config/liquidsoap.liq
+++ b/config/liquidsoap.liq
@@ -9,24 +9,13 @@ source_pw = environment.get(default="", "SOURCE_PW")
 def emit_now_playing(station, m) =
   filename = m["filename"]
   if filename != "" then
-    # decoder-reported metadata may be empty; fall back to request.duration which
-    # reads it directly from the file. -1.0 means unknown.
-    meta_dur = m["duration"]
-    dur_str =
-      if meta_dur != "" then
-        meta_dur
-      else
-        # request.duration returns float? in liquidsoap 2.3 — unwrap with default -1.
-        d = null.get(default=-1., request.duration(filename))
-        if d > 0. then string(int_of_float(d)) else "" end
-      end
     payload = json()
     payload.add("station", station)
     payload.add("artist", m["artist"])
     payload.add("title", m["title"])
     payload.add("album", m["album"])
     payload.add("filename", filename)
-    payload.add("duration", dur_str)
+    payload.add("duration", m["duration"])
     payload.add("started_at", string(int_of_float(time())))
     file.write(data=payload.stringify(), atomic=true, temp_dir="/now-playing", "/now-playing/#{station}.json")
   end
diff --git a/docker-compose.yml b/docker-compose.yml
index 55cf2b2..1bbd3a7 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -45,26 +45,3 @@ services:
       timeout: 5s
       retries: 3
       start_period: 30s
-
-  frontend:
-    build: ./frontend
-    image: denpa-radio-frontend:latest
-    restart: always
-    env_file: config/frontend.env
-    ports:
-      - '172.17.0.1:12001:3000'
-    volumes:
-      - type: bind
-        source: /mnt/trashbox/denpa-radio/library
-        target: /library
-        read_only: true
-      - type: bind
-        source: ./data/now-playing
-        target: /now-playing
-        read_only: true
-    healthcheck:
-      test: ['CMD', 'wget', '-q', '-O', '-', 'http://127.0.0.1:3000/api/stations.json']
-      interval: 30s
-      timeout: 5s
-      retries: 3
-      start_period: 15s
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
deleted file mode 100644
index de131f2..0000000
--- a/frontend/Dockerfile
+++ /dev/null
@@ -1,20 +0,0 @@
-FROM node:22-alpine AS deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm ci
-
-FROM node:22-alpine AS build
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-RUN npm run build
-
-FROM node:22-alpine AS runtime
-WORKDIR /app
-ENV NODE_ENV=production HOST=0.0.0.0 PORT=3000
-COPY --from=build /app/dist ./dist
-COPY --from=build /app/node_modules ./node_modules
-COPY --from=build /app/package.json ./
-USER node
-EXPOSE 3000
-CMD ["node", "./dist/server/entry.mjs"]
diff --git a/frontend/src/components/FooterStrip.astro b/frontend/src/components/FooterStrip.astro
deleted file mode 100644
index dc851fe..0000000
--- a/frontend/src/components/FooterStrip.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
----
-<footer class="footer">
-  <div class="footer-bot">
-    <span>denpa.fm — a tiny independent radio · est. 2026</span>
-    <span><a href="https://denpa.femboy.page/status-json.xsl">icecast status</a></span>
-  </div>
-</footer>
diff --git a/frontend/src/components/HeroPlayer.tsx b/frontend/src/components/HeroPlayer.tsx
deleted file mode 100644
index 3fc68cb..0000000
--- a/frontend/src/components/HeroPlayer.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import type { Station, NowPlaying, IcecastStatusJson } from '@lib/types';
-import { Tape } from './Tape';
-import { Spectrum } from './Spectrum';
-import { playerStore } from '@lib/store';
-import { fmtMs, fmtJpDate, fmtJpTime } from '@lib/format';
-
-const PUBLIC_ORIGIN = 'https://denpa.femboy.page';
-const POLL_NOW_MS = 5_000;
-const POLL_LISTENERS_MS = 30_000;
-
-interface Props {
-  initialStations: Station[];
-}
-
-type Format = 'mp3' | 'opus';
-
-const lsGet = (k: string): string | null => {
-  try { return localStorage.getItem(k); } catch { return null; }
-};
-const lsSet = (k: string, v: string) => {
-  try { localStorage.setItem(k, v); } catch { /* ignore */ }
-};
-
-export function HeroPlayer({ initialStations }: Props) {
-  // ssr-safe defaults; localStorage + Date reads happen post-mount to avoid
-  // hydration mismatches (#418, #423, #425).
-  const [stations, setStations] = useState<Station[]>(initialStations);
-  const [selectedId, setSelectedId] = useState<string>(initialStations[0]?.id ?? '');
-  const [format, setFormat] = useState<Format>('mp3');
-  const [vol, setVol] = useState<number>(0.72);
-  const [muted, setMuted] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [now, setNow] = useState<NowPlaying | null>(null);
-  const [listeners, setListeners] = useState<number | null>(null);
-  const [elapsed, setElapsed] = useState(0);
-  const [copyState, setCopyState] = useState<'idle' | 'ok'>('idle');
-  const [clockText, setClockText] = useState<{ date: string; time: string }>({ date: '', time: '' });
-
-  // restore persisted UI state once on the client
-  useEffect(() => {
-    const savedStation = lsGet('denpa:station');
-    if (savedStation && initialStations.some((s) => s.id === savedStation)) {
-      setSelectedId(savedStation);
-    }
-    if (lsGet('denpa:format') === 'opus') setFormat('opus');
-    const savedVol = parseFloat(lsGet('denpa:vol') ?? '');
-    if (!isNaN(savedVol)) setVol(Math.max(0, Math.min(1, savedVol)));
-  }, [initialStations]);
-
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const station = stations.find((s) => s.id === selectedId);
-  const streamUrl = station ? `${PUBLIC_ORIGIN}${station.mounts[format]}` : '';
-
-  // refresh stations periodically (cheap; backend caches)
-  useEffect(() => {
-    let aborted = false;
-    const refresh = async () => {
-      try {
-        const r = await fetch('/api/stations.json');
-        if (!r.ok) return;
-        const ss = await r.json() as Station[];
-        if (!aborted && ss.length) {
-          setStations(ss);
-          if (!ss.some((s) => s.id === selectedId)) {
-            const first = ss[0];
-            if (first) setSelectedId(first.id);
-          }
-        }
-      } catch { /* ignore */ }
-    };
-    const id = setInterval(refresh, 60_000);
-    return () => { aborted = true; clearInterval(id); };
-  }, [selectedId]);
-
-  // share audio element with Spectrum
-  useEffect(() => {
-    playerStore.setAudio(audioRef.current);
-    return () => playerStore.setAudio(null);
-  }, []);
-
-  // wire <audio> events
-  useEffect(() => {
-    const a = audioRef.current;
-    if (!a) return;
-    const onPlay = () => setPlaying(true);
-    const onPause = () => setPlaying(false);
-    const onError = () => setPlaying(false);
-    a.addEventListener('play', onPlay);
-    a.addEventListener('pause', onPause);
-    a.addEventListener('error', onError);
-    return () => {
-      a.removeEventListener('play', onPlay);
-      a.removeEventListener('pause', onPause);
-      a.removeEventListener('error', onError);
-    };
-  }, []);
-
-  // volume sync
-  useEffect(() => {
-    const a = audioRef.current;
-    if (a) a.volume = muted ? 0 : vol;
-    lsSet('denpa:vol', String(vol));
-  }, [vol, muted]);
-
-  // persist selections
-  useEffect(() => { lsSet('denpa:station', selectedId); }, [selectedId]);
-  useEffect(() => { lsSet('denpa:format', format); }, [format]);
-
-  // poll now-playing
-  useEffect(() => {
-    if (!selectedId) return;
-    const ctrl = new AbortController();
-    let timer: ReturnType<typeof setInterval> | null = null;
-    const fetchNow = async () => {
-      try {
-        const r = await fetch(`/now-playing/${selectedId}.json`, { signal: ctrl.signal });
-        if (!r.ok) { setNow(null); return; }
-        const np = await r.json() as NowPlaying;
-        setNow(np);
-      } catch (err) {
-        if ((err as Error).name !== 'AbortError') setNow(null);
-      }
-    };
-    void fetchNow();
-    timer = setInterval(fetchNow, POLL_NOW_MS);
-    return () => { ctrl.abort(); if (timer) clearInterval(timer); };
-  }, [selectedId]);
-
-  // poll listeners
-  useEffect(() => {
-    if (!selectedId) return;
-    const ctrl = new AbortController();
-    let timer: ReturnType<typeof setInterval> | null = null;
-    const fetchListeners = async () => {
-      try {
-        const r = await fetch('/status-json.xsl', { signal: ctrl.signal });
-        if (!r.ok) return;
-        const j = await r.json() as IcecastStatusJson;
-        const sources = j?.icestats?.source;
-        const arr = Array.isArray(sources) ? sources : sources ? [sources] : [];
-        const want = `/${selectedId}.${format}`;
-        const m = arr.find((s) => s.listenurl?.endsWith(want));
-        if (m && typeof m.listeners === 'number') setListeners(m.listeners);
-      } catch (err) {
-        if ((err as Error).name !== 'AbortError') setListeners(null);
-      }
-    };
-    void fetchListeners();
-    timer = setInterval(fetchListeners, POLL_LISTENERS_MS);
-    return () => { ctrl.abort(); if (timer) clearInterval(timer); };
-  }, [selectedId, format]);
-
-  // elapsed ticker
-  useEffect(() => {
-    if (!now?.started_at) { setElapsed(0); return; }
-    const start = parseInt(now.started_at, 10) * 1000;
-    const update = () => setElapsed(Math.max(0, Math.floor((Date.now() - start) / 1000)));
-    update();
-    const id = setInterval(update, 1000);
-    return () => clearInterval(id);
-  }, [now?.started_at]);
-
-  // wall clock for header — only ticks after mount so ssr/hydrate match (empty strings)
-  useEffect(() => {
-    const tick = () => {
-      const d = new Date();
-      setClockText({ date: fmtJpDate(d), time: fmtJpTime(d) });
-    };
-    tick();
-    const id = setInterval(tick, 1000);
-    return () => clearInterval(id);
-  }, []);
-
-  // keyboard shortcuts
-  const togglePlay = useCallback(() => {
-    const a = audioRef.current;
-    if (!a) return;
-    if (a.paused) a.play().catch(() => { /* ignore — autoplay etc. */ });
-    else a.pause();
-  }, []);
-  const cycleStation = useCallback((dir: 1 | -1) => {
-    if (!stations.length) return;
-    const i = stations.findIndex((s) => s.id === selectedId);
-    const next = stations[(i + dir + stations.length) % stations.length];
-    if (next) setSelectedId(next.id);
-  }, [stations, selectedId]);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      const tgt = e.target as HTMLElement | null;
-      if (tgt && /^(INPUT|TEXTAREA|SELECT)$/.test(tgt.tagName)) return;
-      switch (e.key) {
-        case ' ': e.preventDefault(); togglePlay(); break;
-        case 'ArrowUp': e.preventDefault(); setVol((v) => Math.min(1, v + 0.05)); break;
-        case 'ArrowDown': e.preventDefault(); setVol((v) => Math.max(0, v - 0.05)); break;
-        case 'ArrowLeft': e.preventDefault(); cycleStation(-1); break;
-        case 'ArrowRight': e.preventDefault(); cycleStation(1); break;
-        case 'm': case 'M': e.preventDefault(); setMuted((m) => !m); break;
-      }
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [togglePlay, cycleStation]);
-
-  // copy URL
-  const copyUrl = async () => {
-    try {
-      await navigator.clipboard.writeText(streamUrl);
-      setCopyState('ok');
-    } catch {
-      const ta = document.createElement('textarea');
-      ta.value = streamUrl;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand('copy');
-      document.body.removeChild(ta);
-      setCopyState('ok');
-    }
-    setTimeout(() => setCopyState('idle'), 1500);
-  };
-
-  // when station/format changes, reload + maybe play
-  useEffect(() => {
-    const a = audioRef.current;
-    if (!a || !station) return;
-    const wasPlaying = !a.paused;
-    a.src = `${station.mounts[format]}`;
-    a.load();
-    if (wasPlaying) a.play().catch(() => { /* ignore */ });
-  }, [selectedId, format]);
-
-  if (!station) {
-    return <section className="hero"><p>no stations available — add a station folder under <code>library/</code> on the storage box.</p></section>;
-  }
-
-  const dur = parseInt(now?.duration ?? '', 10);
-  const hasDur = !isNaN(dur) && dur > 0;
-  const pct = hasDur ? Math.min(100, (elapsed / dur) * 100) : 0;
-
-  return (
-    <section className="hero">
-      <div className="hero-header">
-        <div className="hero-wordmark">
-          <div className="eyebrow">電波 TRANSMISSION</div>
-          <div className="big">denpa.fm</div>
-        </div>
-        <div className="hero-tagline">
-          tune in.<br/>tune out.<br/>melt yr brain {'<3'}
-        </div>
-        <div className="hero-status">
-          <div>{clockText.date || ' '}</div>
-          <div>{clockText.time || ' '}</div>
-          <div className="live">[<span className="blink">{playing ? 'REC' : 'OFF'}</span>] {playing ? 'LIVE' : 'PAUSED'} · {listeners ?? '—'} listening</div>
-        </div>
-      </div>
-
-      <div className="hero-body">
-        <aside className="hero-stations">
-          <div className="hero-stations-label">&gt;&gt; 局 / STATIONS</div>
-          {stations.map((s, i) => (
-            <Tape
-              key={s.id}
-              station={s}
-              index={i}
-              active={s.id === selectedId}
-              onSelect={setSelectedId}
-              listeners={s.id === selectedId ? listeners : null}
-            />
-          ))}
-        </aside>
-
-        <div className="hero-deck-wrap">
-          <audio ref={audioRef} crossOrigin="anonymous" preload="none" />
-          <div className="hero-deck">
-            <div className="deck-screen">
-              <div className="deck-screen-row">
-                <span>&gt;&gt; NOW PLAYING</span>
-                <span>{format === 'mp3' ? '192k MP3' : '96k OPUS'}</span>
-              </div>
-              <div className="deck-now">{now?.title || '—'}</div>
-              <div className="deck-artist">{now?.artist || '—'}</div>
-              <div className="deck-screen-row">
-                <span>album · {now?.album || '—'}</span>
-                <span>{station.tags.join(' · ')}</span>
-              </div>
-              <div className="deck-progress-row">
-                <span className="deck-time">{fmtMs(elapsed)}</span>
-                <div className="deck-progress">
-                  {hasDur ? <div className="deck-progress-fill" style={{ width: pct + '%' }} /> : null}
-                </div>
-                <span className="deck-time">{hasDur ? fmtMs(dur) : '—'}</span>
-              </div>
-            </div>
-
-            <div className="deck-reels">
-              <div className={`reel ${playing ? 'spinning' : ''}`} />
-              <div className="reel-strip" />
-              <div className={`reel ${playing ? 'spinning' : ''}`} />
-            </div>
-
-            <Spectrum />
-
-            <div className="deck-controls">
-              <button className="deck-btn play" onClick={togglePlay} type="button">
-                {playing ? '|| PAUSE' : '>> PLAY'}
-              </button>
-              <button className="deck-btn format" data-active={format === 'mp3'} onClick={() => setFormat('mp3')} type="button">MP3</button>
-              <button className="deck-btn format" data-active={format === 'opus'} onClick={() => setFormat('opus')} type="button">OPUS</button>
-              <div className="deck-vol">
-                <label>VOL</label>
-                <input
-                  type="range" min={0} max={1} step={0.01} value={muted ? 0 : vol}
-                  onChange={(e) => { setVol(parseFloat(e.target.value)); setMuted(false); }}
-                />
-                <span className="deck-vol-pct">{Math.round((muted ? 0 : vol) * 100)}%</span>
-              </div>
-            </div>
-          </div>
-
-          <div className="hero-footer">
-            <button className="share-btn" onClick={copyUrl} type="button">
-              {copyState === 'ok' ? '[ok] copied!' : '[ ] copy stream URL'}
-            </button>
-            <div className="ticker">
-              <div className="ticker-inner">
-                ※ no ads · no algorithms · just signal ※ adding a station = mkdir on storage box ※ space=play ←→=switch ↑↓=vol m=mute ※
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/src/components/HistoryCard.astro b/frontend/src/components/HistoryCard.astro
deleted file mode 100644
index 1432658..0000000
--- a/frontend/src/components/HistoryCard.astro
+++ /dev/null
@@ -1,12 +0,0 @@
----
-import { HistoryList } from './HistoryList';
-interface Props { station: string; }
-const { station } = Astro.props;
----
-<div class="card history">
-  <div class="full-secthead">
-    <div class="full-secthead-jp">再生履歴</div>
-    <div class="full-secthead-en">// recently played</div>
-  </div>
-  <HistoryList station={station} client:visible />
-</div>
diff --git a/frontend/src/components/HistoryList.tsx b/frontend/src/components/HistoryList.tsx
deleted file mode 100644
index 0b84a65..0000000
--- a/frontend/src/components/HistoryList.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { HistoryEntry } from '@lib/types';
-import { fmtRelative } from '@lib/format';
-
-interface Props {
-  station: string;
-}
-
-export function HistoryList({ station }: Props) {
-  const [entries, setEntries] = useState<HistoryEntry[] | null>(null);
-  const [now, setNow] = useState(() => new Date());
-
-  useEffect(() => {
-    const ctrl = new AbortController();
-    const load = async () => {
-      try {
-        const r = await fetch(`/now-playing/${station}.history.json`, { signal: ctrl.signal });
-        if (!r.ok) { setEntries([]); return; }
-        const arr = await r.json() as HistoryEntry[];
-        setEntries(Array.isArray(arr) ? arr : []);
-      } catch (err) {
-        if ((err as Error).name !== 'AbortError') setEntries([]);
-      }
-    };
-    void load();
-    const id = setInterval(load, 15_000);
-    const tick = setInterval(() => setNow(new Date()), 30_000);
-    return () => { ctrl.abort(); clearInterval(id); clearInterval(tick); };
-  }, [station]);
-
-  if (entries === null) return <div className="history-empty">loading…</div>;
-  if (!entries.length) return <div className="history-empty">no recent tracks</div>;
-
-  return (
-    <div className="history-list">
-      {entries.slice(0, 10).map((e, i) => {
-        const start = new Date(parseInt(e.started_at, 10) * 1000);
-        return (
-          <div key={`${e.started_at}-${i}`} className="history-row">
-            <span className="t">{fmtRelative(start, now)}</span>
-            <span className="title">{e.title || '—'}</span>
-            <span className="artist">{e.artist || '—'}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/frontend/src/components/ListenWaysCard.astro b/frontend/src/components/ListenWaysCard.astro
deleted file mode 100644
index a98ad74..0000000
--- a/frontend/src/components/ListenWaysCard.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-const ORIGIN = 'https://denpa.femboy.page';
-interface Props { stationId: string; }
-const { stationId } = Astro.props;
----
-<div class="card listen-ways">
-  <div class="full-secthead">
-    <div class="full-secthead-jp">他の聴き方</div>
-    <div class="full-secthead-en">// other ways to listen</div>
-  </div>
-  <div class="listen-ways-list">
-    <div class="listen-way">
-      <div class="lw-label">DIRECT STREAM (MP3)</div>
-      <code class="lw-url">{ORIGIN}/{stationId}.mp3</code>
-      <div class="lw-hint">drop into VLC, mpv, foobar, etc.</div>
-    </div>
-    <div class="listen-way">
-      <div class="lw-label">DIRECT STREAM (OPUS)</div>
-      <code class="lw-url">{ORIGIN}/{stationId}.opus</code>
-      <div class="lw-hint">smaller, better quality. modern players only.</div>
-    </div>
-    <div class="listen-way">
-      <div class="lw-label">METADATA JSON</div>
-      <code class="lw-url">{ORIGIN}/now-playing/{stationId}.json</code>
-      <div class="lw-hint">build your own scrobbler.</div>
-    </div>
-  </div>
-</div>
diff --git a/frontend/src/components/Spectrum.tsx b/frontend/src/components/Spectrum.tsx
deleted file mode 100644
index 27d9c6e..0000000
--- a/frontend/src/components/Spectrum.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { playerStore } from '@lib/store';
-
-const BARS = 36;
-
-export function Spectrum() {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const barRefs = useRef<HTMLDivElement[]>([]);
-
-  useEffect(() => {
-    let raf = 0;
-    let ctx: AudioContext | null = null;
-    let analyser: AnalyserNode | null = null;
-    let buf: Uint8Array<ArrayBuffer> | null = null;
-    let connected = false;
-
-    const tryConnect = () => {
-      if (connected) return;
-      const audio = playerStore.getAudio();
-      if (!audio) return;
-      try {
-        if (!ctx) {
-          const Ctor = window.AudioContext
-            ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
-          if (!Ctor) throw new Error('no AudioContext');
-          ctx = new Ctor();
-        }
-        const src = ctx.createMediaElementSource(audio);
-        analyser = ctx.createAnalyser();
-        analyser.fftSize = 128;
-        src.connect(analyser);
-        analyser.connect(ctx.destination);
-        buf = new Uint8Array(analyser.frequencyBinCount) as Uint8Array<ArrayBuffer>;
-        connected = true;
-      } catch (err) {
-        console.warn('[spectrum] webaudio unavailable, using fake', err);
-      }
-    };
-
-    const fakeFrame = (t: number) => {
-      for (let i = 0; i < BARS; i++) {
-        const a = Math.sin(t * 0.0021 + i * 0.7) * 0.5 + 0.5;
-        const f = i / BARS;
-        const env = 0.4 + 0.6 * Math.exp(-f * 2.2);
-        const v = a * env * 0.3;
-        const el = barRefs.current[i];
-        if (el) el.style.height = `${Math.max(4, v * 100)}%`;
-      }
-    };
-
-    const realFrame = () => {
-      if (!analyser || !buf) return;
-      analyser.getByteFrequencyData(buf);
-      for (let i = 0; i < BARS; i++) {
-        const v = (buf[i] ?? 0) / 255;
-        const el = barRefs.current[i];
-        if (el) el.style.height = `${Math.max(4, v * 100)}%`;
-      }
-    };
-
-    const tick = (t: number) => {
-      tryConnect();
-      const audio = playerStore.getAudio();
-      if (connected && audio && !audio.paused) {
-        if (ctx?.state === 'suspended') {
-          void ctx.resume();
-        }
-        realFrame();
-      } else {
-        fakeFrame(t);
-      }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-
-    const unsub = playerStore.subscribe(() => {
-      tryConnect();
-    });
-
-    return () => {
-      cancelAnimationFrame(raf);
-      unsub();
-      try {
-        void ctx?.close();
-      } catch {
-        // ignore
-      }
-    };
-  }, []);
-
-  return (
-    <div className="deck-spectrum" ref={containerRef}>
-      {Array.from({ length: BARS }).map((_, i) => (
-        <div
-          key={i}
-          className="spec-bar"
-          ref={(el) => {
-            if (el) barRefs.current[i] = el;
-          }}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/src/components/Tape.tsx b/frontend/src/components/Tape.tsx
deleted file mode 100644
index c154e6c..0000000
--- a/frontend/src/components/Tape.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Station } from '@lib/types';
-
-interface Props {
-  station: Station;
-  index: number;
-  active: boolean;
-  onSelect: (id: string) => void;
-  listeners?: number | null;
-}
-
-export function Tape({ station, index, active, onSelect, listeners }: Props) {
-  return (
-    <button
-      className={`tape ${active ? 'active' : ''}`}
-      onClick={() => onSelect(station.id)}
-      type="button"
-    >
-      <div className="tape-num">CH.{String(index + 1).padStart(2, '0')}</div>
-      <div className="tape-name">{station.name}</div>
-      {station.tags.length > 0 ? (
-        <div className="tape-jp">{station.tags.slice(0, 2).join(' · ')}</div>
-      ) : null}
-      <div className="tape-holes"><span /><span /></div>
-      <div className="tape-meta">
-        <span>{station.mounts.mp3.replace(/^\//, '')}</span>
-        <span>{listeners == null ? '— ppl' : `${listeners} ppl`}</span>
-      </div>
-    </button>
-  );
-}
diff --git a/frontend/src/components/TopNav.astro b/frontend/src/components/TopNav.astro
deleted file mode 100644
index 3e76fb5..0000000
--- a/frontend/src/components/TopNav.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
----
-<nav class="topnav">
-  <span class="topnav-brand">電波 / denpa.fm</span>
-  <div class="topnav-links">
-    <a href="#listen">listen</a>
-    <a href="#about">about</a>
-  </div>
-</nav>
diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts
deleted file mode 100644
index 09b6ff2..0000000
--- a/frontend/src/lib/store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-let audioRef: HTMLAudioElement | null = null;
-const subs = new Set<() => void>();
-
-export const playerStore = {
-  setAudio(el: HTMLAudioElement | null) {
-    audioRef = el;
-    subs.forEach((fn) => fn());
-  },
-  getAudio(): HTMLAudioElement | null {
-    return audioRef;
-  },
-  subscribe(fn: () => void): () => void {
-    subs.add(fn);
-    return () => {
-      subs.delete(fn);
-    };
-  },
-};
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
deleted file mode 100644
index 02ca49e..0000000
--- a/frontend/src/pages/index.astro
+++ /dev/null
@@ -1,44 +0,0 @@
----
-import '@styles/tokens.css';
-import '@styles/global.css';
-import '@styles/components/hero.css';
-import '@styles/components/deck.css';
-import '@styles/components/spectrum.css';
-import '@styles/components/tape.css';
-import '@styles/components/history-card.css';
-import '@styles/components/listen-ways-card.css';
-import '@styles/components/footer.css';
-
-import TopNav from '@components/TopNav.astro';
-import HistoryCard from '@components/HistoryCard.astro';
-import ListenWaysCard from '@components/ListenWaysCard.astro';
-import FooterStrip from '@components/FooterStrip.astro';
-import { HeroPlayer } from '@components/HeroPlayer';
-import { listStations } from '@lib/stations';
-
-export const prerender = false;
-
-const root = process.env.LIBRARY_ROOT ?? '/library';
-const initialStations = await listStations(root);
-const firstStation = initialStations[0]?.id ?? '';
----
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>denpa.fm // 電波</title>
-    <meta name="description" content="denpa.fm — a tiny independent radio." />
-  </head>
-  <body>
-    <div class="page">
-      <TopNav />
-      <HeroPlayer initialStations={initialStations} client:load />
-      <div id="listen" class="row-grid two">
-        {firstStation ? <HistoryCard station={firstStation} /> : <div />}
-        {firstStation ? <ListenWaysCard stationId={firstStation} /> : <div />}
-      </div>
-      <FooterStrip />
-    </div>
-  </body>
-</html>
diff --git a/frontend/src/styles/components/deck.css b/frontend/src/styles/components/deck.css
deleted file mode 100644
index 79e74df..0000000
--- a/frontend/src/styles/components/deck.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.hero-deck {
-  background: linear-gradient(180deg, var(--cream) 0%, #f5e0c4 100%);
-  color: var(--ink);
-  padding: 24px;
-  border: 3px solid var(--ink);
-  box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--cyan);
-  position: relative;
-}
-.hero-deck::before {
-  content: ""; position: absolute; inset: 5px;
-  border: 1px dashed #0a041044; pointer-events: none;
-}
-
-.deck-screen {
-  background: var(--ink); color: var(--green);
-  font-family: var(--f-mono); font-size: 14px;
-  padding: 14px 18px;
-  border: 2px inset var(--ink);
-  position: relative; overflow: hidden;
-}
-.deck-screen::after {
-  content: ""; position: absolute; inset: 0; pointer-events: none;
-  background: repeating-linear-gradient(0deg, rgba(94,255,155,0.08) 0 1px, transparent 1px 3px);
-}
-.deck-screen-row { display: flex; justify-content: space-between; opacity: 0.75; font-size: 12px; }
-.deck-now {
-  font-family: var(--f-pixel); font-size: 28px; color: var(--cream);
-  line-height: 1.1; margin: 6px 0 2px;
-  text-shadow: 0 0 10px #5eff9b80;
-}
-.deck-artist { font-size: 16px; color: var(--cyan); margin-bottom: 8px; }
-.deck-progress-row {
-  display: flex; align-items: center; gap: 10px;
-  margin-top: 12px;
-}
-.deck-time { font-size: 12px; color: var(--cyan); min-width: 36px; }
-.deck-progress { flex: 1; height: 4px; background: #5eff9b22; border: 1px solid #5eff9b55; }
-.deck-progress-fill { height: 100%; background: var(--green); transition: width 200ms linear; }
-
-.deck-reels {
-  display: flex; align-items: center; justify-content: space-around;
-  gap: 14px; margin-top: 18px;
-  padding: 14px; background: var(--ink); border: 2px solid var(--ink);
-}
-.reel {
-  width: 110px; height: 110px; border-radius: 50%;
-  background:
-    radial-gradient(circle, var(--cream) 0 16px, transparent 16px),
-    conic-gradient(from 0deg, var(--plum-2) 0 25%, var(--plum) 25% 50%, var(--plum-2) 50% 75%, var(--plum) 75%);
-  border: 2px solid var(--cream);
-  position: relative;
-}
-.reel::before {
-  content: ""; position: absolute; inset: 7px; border-radius: 50%;
-  border: 1px dashed #fff4e833;
-}
-.reel.spinning { animation: spin 1.6s linear infinite; }
-@keyframes spin { to { transform: rotate(360deg); } }
-.reel-strip {
-  flex: 1; height: 7px;
-  background: linear-gradient(90deg, var(--cream) 0%, #d4a578 50%, var(--cream) 100%);
-  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
-}
-
-.deck-controls {
-  display: flex; align-items: center; gap: 10px; margin-top: 18px;
-  flex-wrap: wrap;
-}
-.deck-btn {
-  font-family: var(--f-pixel); font-size: 16px;
-  background: var(--pink); color: var(--cream);
-  border: 2px solid var(--ink); padding: 10px 14px;
-  cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
-  letter-spacing: 1px;
-  transition: transform 100ms, box-shadow 100ms;
-}
-.deck-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
-.deck-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
-.deck-btn.play { font-size: 20px; padding: 16px 24px; background: var(--cyan); color: var(--ink); }
-.deck-btn.format { background: var(--cream); color: var(--ink); }
-.deck-btn.format[data-active=true] { background: var(--lemon); }
-
-.deck-vol {
-  flex: 1; min-width: 200px;
-  display: flex; align-items: center; gap: 10px;
-  background: var(--ink); padding: 10px 14px; border: 2px solid var(--ink);
-}
-.deck-vol label { font-family: var(--f-pixel); font-size: 13px; color: var(--lemon); letter-spacing: 1.5px; }
-.deck-vol input { flex: 1; accent-color: var(--pink); }
-.deck-vol-pct { font-family: var(--f-mono); font-size: 13px; color: var(--cyan); min-width: 38px; text-align: right; }
-
-@media (max-width: 640px) {
-  .reel { width: 80px; height: 80px; }
-  .deck-vol { min-width: 100%; }
-}
diff --git a/frontend/src/styles/components/footer.css b/frontend/src/styles/components/footer.css
deleted file mode 100644
index 7579d5e..0000000
--- a/frontend/src/styles/components/footer.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.footer {
-  margin-top: 12px; padding: 30px 0 24px;
-  border-top: 2px dashed #ff3ea566;
-}
-.footer-bot {
-  display: flex; justify-content: space-between; gap: 14px;
-  font-family: var(--f-mono); font-size: 12px; color: #fff4e8aa;
-  flex-wrap: wrap;
-}
diff --git a/frontend/src/styles/components/hero.css b/frontend/src/styles/components/hero.css
deleted file mode 100644
index f0502e6..0000000
--- a/frontend/src/styles/components/hero.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.topnav {
-  display: flex; justify-content: space-between; align-items: center;
-  font-family: var(--f-pixel); font-size: 13px; letter-spacing: 2px;
-  padding: 6px 0 18px; border-bottom: 1px dashed #ff3ea533;
-  margin-bottom: 24px;
-  flex-wrap: wrap; gap: 10px;
-}
-.topnav-brand { color: var(--pink); }
-.topnav-links { display: flex; gap: 18px; }
-.topnav-links a { color: var(--cream); }
-.topnav-links a:hover { color: var(--lemon); }
-
-.hero {
-  position: relative;
-  padding: 30px 32px 36px;
-  background:
-    radial-gradient(ellipse at 30% 0%, #ff3ea522 0%, transparent 55%),
-    radial-gradient(ellipse at 80% 100%, #5ef7ff1a 0%, transparent 55%),
-    var(--plum);
-  border: 2px solid var(--ink);
-  margin-bottom: 36px;
-  overflow: hidden;
-}
-.hero-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: end;
-  gap: 24px; margin-bottom: 22px;
-}
-.hero-wordmark .eyebrow {
-  font-family: var(--f-pixel); font-size: 16px; letter-spacing: 4px; color: var(--pink);
-}
-.hero-wordmark .big {
-  font-family: var(--f-pixel);
-  font-size: clamp(48px, 7vw, 88px);
-  line-height: 0.9; letter-spacing: 0; margin-top: 6px;
-  display: inline-block;
-  padding-right: 0.12em;
-  color: transparent;
-  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 50%, var(--pink) 50%, var(--pink) 100%);
-  -webkit-background-clip: text; background-clip: text;
-  filter: drop-shadow(0 0 8px #ff3ea580);
-}
-.hero-tagline {
-  font-family: var(--f-hand); font-size: 26px;
-  color: var(--cream); transform: rotate(-2deg); line-height: 1.05;
-  text-align: center;
-}
-.hero-status {
-  font-family: var(--f-mono); font-size: 13px;
-  color: var(--cyan); text-align: right; line-height: 1.55;
-}
-.hero-status .live { color: var(--pink); }
-.hero-status .blink { animation: blink 1s steps(2) infinite; }
-@keyframes blink { 50% { opacity: 0.15; } }
-
-.hero-body {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 24px;
-  position: relative;
-}
-.hero-stations { display: flex; flex-direction: column; gap: 10px; }
-.hero-stations-label {
-  font-family: var(--f-pixel); color: var(--lemon);
-  font-size: 14px; letter-spacing: 2px;
-  padding: 5px 10px;
-  background: var(--ink); border: 2px solid var(--lemon);
-  align-self: flex-start; transform: rotate(-2deg);
-  margin-bottom: 4px;
-}
-
-.hero-deck-wrap { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
-.hero-footer { display: flex; gap: 12px; align-items: stretch; }
-.share-btn {
-  font-family: var(--f-mono); font-size: 13px;
-  background: var(--ink); color: var(--cyan);
-  padding: 10px 14px; border: 1.5px dashed #5ef7ff66;
-  cursor: pointer; white-space: nowrap;
-}
-.share-btn:hover { border-style: solid; border-color: var(--cyan); }
-.ticker {
-  flex: 1; overflow: hidden; white-space: nowrap;
-  background: var(--ink); padding: 10px 0;
-  border-top: 1px dashed #ff3ea566; border-bottom: 1px dashed #ff3ea566;
-  display: flex; align-items: center;
-}
-.ticker-inner {
-  display: inline-block; padding-left: 100%;
-  animation: marq 30s linear infinite;
-  color: var(--pink); font-family: var(--f-mono); font-size: 13px; letter-spacing: 1px;
-}
-@keyframes marq { to { transform: translateX(-100%); } }
-
-@media (max-width: 1000px) {
-  .hero-body { grid-template-columns: 1fr; }
-  .hero-stations { display: grid; grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 640px) {
-  .page { padding: 14px; }
-  .hero { padding: 20px 16px 24px; }
-  .hero-header { grid-template-columns: 1fr; gap: 14px; }
-  .hero-tagline { text-align: left; }
-  .hero-status { text-align: left; }
-  .hero-stations { grid-template-columns: 1fr; }
-}
diff --git a/frontend/src/styles/components/history-card.css b/frontend/src/styles/components/history-card.css
deleted file mode 100644
index 999115d..0000000
--- a/frontend/src/styles/components/history-card.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.full-secthead { margin-bottom: 14px; }
-.full-secthead-jp { font-family: var(--f-pixel); font-size: 18px; color: var(--lemon); letter-spacing: 4px; }
-.full-secthead-en { font-family: var(--f-pixel); font-size: 22px; color: var(--cream); letter-spacing: 1px; margin-top: 2px; }
-
-.card {
-  background: var(--plum);
-  border: 2px solid var(--ink);
-  padding: 22px 24px;
-  position: relative;
-}
-.card::before {
-  content: ""; position: absolute; inset: 4px; border: 1px dashed #ff3ea522; pointer-events: none;
-}
-
-.history-list { display: flex; flex-direction: column; }
-.history-row {
-  display: grid; grid-template-columns: 50px 1fr auto;
-  gap: 12px; padding: 8px 4px;
-  border-bottom: 1px dashed #ff3ea522;
-  font-size: 13px;
-}
-.history-row:last-child { border-bottom: none; }
-.history-row .t { font-family: var(--f-mono); color: var(--cyan); }
-.history-row .title { font-family: var(--f-pixel); font-size: 14px; color: var(--cream); }
-.history-row .artist { font-family: var(--f-mono); color: #fff4e8aa; font-size: 12px; }
-.history-empty {
-  font-family: var(--f-mono); font-size: 13px; color: #fff4e8aa; padding: 8px 4px;
-}
diff --git a/frontend/src/styles/components/listen-ways-card.css b/frontend/src/styles/components/listen-ways-card.css
deleted file mode 100644
index 2e0a7ac..0000000
--- a/frontend/src/styles/components/listen-ways-card.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.listen-ways-list { display: flex; flex-direction: column; gap: 14px; }
-.listen-way {
-  border: 1.5px dashed #5ef7ff44;
-  padding: 12px;
-  background: #0a04108c;
-}
-.lw-label { font-family: var(--f-pixel); font-size: 12px; color: var(--lemon); letter-spacing: 2px; margin-bottom: 4px; }
-.lw-url {
-  display: block; font-family: var(--f-mono); font-size: 13px;
-  color: var(--cyan); background: var(--ink);
-  padding: 6px 8px; word-break: break-all;
-}
-.lw-hint { font-family: var(--f-mono); font-size: 11px; color: #fff4e866; margin-top: 6px; }
-
-.row-grid { display: grid; gap: 24px; margin-bottom: 36px; }
-.row-grid.two { grid-template-columns: 1.2fr 1fr; }
-
-@media (max-width: 1000px) {
-  .row-grid.two { grid-template-columns: 1fr; }
-}
diff --git a/frontend/src/styles/components/spectrum.css b/frontend/src/styles/components/spectrum.css
deleted file mode 100644
index d9d8f24..0000000
--- a/frontend/src/styles/components/spectrum.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.deck-spectrum {
-  display: flex; align-items: flex-end; gap: 2px;
-  height: 80px; margin-top: 18px;
-  padding: 10px; background: var(--ink); border: 2px solid var(--ink);
-}
-.spec-bar {
-  flex: 1; min-height: 3px;
-  background: linear-gradient(180deg, var(--pink) 0%, var(--lemon) 50%, var(--green) 100%);
-  transition: height 80ms linear;
-}
diff --git a/frontend/src/styles/components/tape.css b/frontend/src/styles/components/tape.css
deleted file mode 100644
index db5cdcb..0000000
--- a/frontend/src/styles/components/tape.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.tape {
-  font-family: var(--f-mono);
-  background: var(--cream); color: var(--ink);
-  padding: 10px 12px 12px;
-  border: 2px solid var(--ink);
-  box-shadow: 3px 3px 0 var(--ink);
-  cursor: pointer; text-align: left;
-  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
-  width: 100%;
-}
-.tape:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
-.tape.active {
-  background: var(--pink); color: var(--cream);
-  transform: translate(-3px,-3px) rotate(-1deg);
-  box-shadow: 6px 6px 0 var(--lemon);
-}
-.tape-num { font-family: var(--f-mono); font-size: 10px; opacity: 0.65; letter-spacing: 1.5px; }
-.tape-name { font-family: var(--f-pixel); font-size: 16px; line-height: 1.1; margin-top: 2px; }
-.tape-jp { font-family: var(--f-pixel); font-size: 11px; opacity: 0.85; letter-spacing: 1.5px; margin-top: 2px; }
-.tape-meta { font-family: var(--f-mono); font-size: 10px; margin-top: 6px; display: flex; justify-content: space-between; opacity: 0.75; }
-.tape-holes { display: flex; gap: 4px; margin-top: 6px; }
-.tape-holes span { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--cream); }
-.tape.active .tape-holes span { box-shadow: inset 0 0 0 3px var(--pink); }