Rework Outer Limits plug as narrative continuation

Replace disconnected bottom link with the show's closing narration
subverted: "We now return control of your television set to
oscilloscopemusic.com" — fades in after typewriter finishes with
a dramatic 1.2s delay. Also add oscilloscopemusic.com to the
always-visible attribution bar for N-Spheres tracks.

docs/src/components/OscilloscopeDisplay.astro

@@ -38,9 +38,11 @@
       <!-- Outer Limits easter egg overlay -->
       <div class="scope-outer-limits" id="scope-outer-limits" aria-hidden="true">
         <p class="scope-ol-text" id="scope-ol-text"></p>
-        <a class="scope-ol-plug" id="scope-ol-plug"
+        <p class="scope-ol-closing" id="scope-ol-closing" data-visible="false">
-           href="https://oscilloscopemusic.com" target="_blank" rel="noopener"
+          We now return control of your television set to
-           >tell 'em warehack.ing sent 'cha</a>
+          <a href="https://oscilloscopemusic.com" target="_blank" rel="noopener"
+             class="scope-ol-link" id="scope-ol-link">oscilloscopemusic.com</a>
+        </p>
       </div>
     </div>
   </div>
@@ -263,12 +265,13 @@
     const el = document.getElementById('scope-attribution');
     if (!el) return;
 
+    const audioSite = '<a href="https://oscilloscopemusic.com" target="_blank" rel="noopener">oscilloscopemusic.com</a>';
     const visualCredit = '· Visual: <a href="https://codepen.io/2Mogs" target="_blank" rel="noopener">Nick Watton</a> · <a href="https://gist.github.com/rsp2k/ac68b1bb290b8124e162987ed1df8d53" target="_blank" rel="noopener">rsp2k</a>';
 
     if ('license' in signal && signal.license) {
       el.innerHTML = `&ldquo;<a href="${signal.link}" target="_blank" rel="noopener">${signal.name}</a>&rdquo; by ${signal.artist} (<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener license">CC BY-NC-SA</a>) ${visualCredit}`;
     } else {
-      el.innerHTML = `&ldquo;${signal.name}&rdquo; from <em>${('album' in signal) ? signal.album : ''}</em> by ${signal.artist} ${visualCredit}`;
+      el.innerHTML = `&ldquo;${signal.name}&rdquo; from <em>${('album' in signal) ? signal.album : ''}</em> by ${signal.artist} · ${audioSite} ${visualCredit}`;
     }
   }
 
@@ -443,7 +446,8 @@
     const knobs = document.querySelectorAll('.scope-easter-knob');
     const overlay = document.getElementById('scope-outer-limits');
     const textEl = document.getElementById('scope-ol-text');
-    const plugEl = document.getElementById('scope-ol-plug');
+    const closingEl = document.getElementById('scope-ol-closing');
+    const linkEl = document.getElementById('scope-ol-link');
     if (!knobs.length || !overlay || !textEl) return;
 
     // Guard against double-init
@@ -459,7 +463,7 @@
       overlay!.dataset.active = 'true';
       overlay!.setAttribute('aria-hidden', 'false');
       textEl!.textContent = '';
-      if (plugEl) plugEl.dataset.visible = 'false';
+      if (closingEl) closingEl.dataset.visible = 'false';
       typeText(quote, 0);
       speak(quote);
     }
@@ -475,8 +479,8 @@
 
     function typeText(text: string, i: number) {
       if (i >= text.length) {
-        // Quote done — fade in the plug after a beat
+        // Quote done — fade in the closing narration after a dramatic beat
-        if (plugEl) setTimeout(() => { plugEl.dataset.visible = 'true'; }, 800);
+        if (closingEl) setTimeout(() => { closingEl.dataset.visible = 'true'; }, 1200);
         return;
       }
       textEl!.textContent += text[i];
@@ -529,8 +533,8 @@
       });
     });
 
-    // Let the plug link open without dismissing the overlay
+    // Let the closing link open without dismissing the overlay
-    if (plugEl) plugEl.addEventListener('click', (e: Event) => e.stopPropagation());
+    if (linkEl) linkEl.addEventListener('click', (e: Event) => e.stopPropagation());
 
     // Dismiss on overlay click or Escape
     overlay.addEventListener('click', dismiss);

docs/src/styles/oscilloscope.css

@@ -366,9 +366,10 @@
   background: rgba(10, 10, 10, 0.92);
   z-index: 10;
   display: none;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 12%;
+  padding: 10% 12%;
   cursor: pointer;
 }
 
@@ -386,32 +387,39 @@
   margin: 0;
 }
 
-/* Cheeky plug — fades in after typewriter finishes */
+/* Closing narration + plug — fades in after typewriter finishes */
-.scope-ol-plug {
+.scope-ol-closing {
-  position: absolute;
+  font-family: 'Georgia', 'Times New Roman', serif;
-  bottom: 10%;
+  font-size: 0.55rem;
-  left: 0;
+  line-height: 1.5;
-  right: 0;
-  text-align: center;
-  font-family: var(--sl-font-mono, ui-monospace, monospace);
-  font-size: 0.45rem;
-  letter-spacing: 0.06em;
   color: var(--scope-teal);
-  text-decoration: none;
+  text-align: center;
+  text-shadow: 0 0 8px var(--scope-teal-glow);
+  margin: 1em 0 0;
   opacity: 0;
-  transition: opacity 1.2s ease-in;
+  transform: translateY(6px);
+  transition: opacity 1.5s ease-in, transform 1.5s ease-out;
   pointer-events: none;
-  text-shadow: 0 0 6px var(--scope-teal-glow);
 }
 
-.scope-ol-plug[data-visible="true"] {
+.scope-ol-closing[data-visible="true"] {
-  opacity: 0.7;
+  opacity: 0.85;
+  transform: translateY(0);
   pointer-events: auto;
 }
 
-.scope-ol-plug:hover {
+.scope-ol-link {
-  opacity: 1;
+  color: var(--scope-teal);
+  text-decoration: none;
+  font-style: italic;
+  font-size: 0.65rem;
+  text-shadow: 0 0 12px var(--scope-teal-glow), 0 0 4px var(--scope-teal-glow);
+  transition: text-shadow 0.2s;
+}
+
+.scope-ol-link:hover {
   text-decoration: underline;
+  text-shadow: 0 0 16px var(--scope-teal), 0 0 6px var(--scope-teal-glow);
 }
 
 /* ── Easter egg knobs (Vertical / Horizontal) ────────────── */