Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="color-scheme" content="light" />
    <title>Funclet</title>
  </head>
  <body>
    <div id="app">
      <section class="minimum" aria-label="Compact player"><p>Give the radio a little room.</p><span>Resize to 280 × 260 to browse stations.</span><button id="mini-play" type="button" hidden>Pause</button></section>
      <main class="radio">
        <section class="studio" aria-label="3D radio receiver">
          <header class="studio-heading"><div><span class="eyebrow">WAVEFUNC / POCKET BROADCAST SYSTEM</span><h2>STAY TUNED<span>_</span></h2></div><span class="edition">[WF]<small>VOL. 01</small></span></header>
          <div class="stage-wrap">
            <div id="receiver-stage" class="receiver-stage" aria-label="3D receiver. Press the red key to play or pause; drag the volume dial.">
              <div class="scene-fallback"><span>[WF]</span><strong>YOUR SIGNAL.<br>ANYWHERE.</strong><p>3D view unavailable. The radio controls below still work.</p></div>
            </div>
            <div class="stage-caption"><span class="stage-note">PRESS THE KEY. TURN IT UP.</span><button id="detail-toggle" type="button" aria-expanded="false" aria-controls="station-detail">Station info ↗</button></div>
            <aside id="station-detail" class="station-detail" aria-label="Selected station" hidden></aside>
          </div>
          <footer class="receiver" aria-label="Radio player">
            <div class="receiver-track"><span id="playback-label" class="receiver-label">OFF AIR</span><strong id="player-title">A world of radio.</strong><span id="player-subtitle">Choose a station to start listening.</span></div>
            <div class="transport"><button id="play-toggle" class="play-toggle" type="button" aria-label="Play" disabled></button><label class="volume"><span>VOLUME <output id="volume-level">75</output></span><input id="volume" type="range" min="0" max="100" value="75" aria-label="Volume" disabled /></label></div>
            <p id="player-error" class="player-error" role="status" hidden></p>
          </footer>
          <div class="studio-foot"><span>INDEPENDENT RADIO. IN EVERY DIMENSION.</span><span>↗ LIVE SIGNAL</span></div>
        </section>
        <section class="directory" aria-label="Radio directory">
          <div class="toolbar"><div class="tabs" aria-label="Browse mode"><button id="explore-tab" class="tab active" aria-pressed="true">↗ Explore</button><button id="favourites-tab" class="tab" aria-pressed="false">☆ Favourites</button></div><button id="settings" class="icon-button" aria-label="Radio settings" title="Radio settings" hidden>⚙</button></div>
          <div id="search-form" class="search-form" role="search">
            <label class="search-field"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg><input id="search" type="search" placeholder="SEARCH_FREQUENCIES…" aria-label="Search stations or music" maxlength="200" autocomplete="off" /></label>
            <button id="search-submit" type="button" class="search-button" aria-label="Search">↗</button>
            <label class="search-mode"><span class="sr-only">Search for</span><select id="search-mode"><option value="stations">Stations</option><option value="recordings">Tracks</option><option value="artists">Artists</option><option value="releases">Albums</option></select></label>
          </div>
          <div id="favourite-controls" class="favourite-controls" hidden><label for="favourite-list">Your Wavefunc lists</label><div><select id="favourite-list" aria-label="Favourite list"></select><button id="refresh-favourites" class="icon-button" aria-label="Refresh favourite lists">↻</button></div><span>Read-only · managed in Wavefunc</span></div>
          <div class="directory-caption"><h1 id="results-title">On the dial</h1><span id="result-count">RADIO / WORLDWIDE</span></div>
          <div id="results" class="results" aria-live="polite" aria-busy="false"></div>
          <div class="directory-foot"><span class="signal-dot"></span><span id="connection-status">Stations from Wavefunc</span><button id="retry" hidden>Try again</button></div>
        </section>
      </main>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>