diff --git a/basic/scenes/Default_Stream_HUD.json b/basic/scenes/Default_Stream_HUD.json
index 0232785..285e7b9 100644
--- a/basic/scenes/Default_Stream_HUD.json
+++ b/basic/scenes/Default_Stream_HUD.json
@@ -507,7 +507,7 @@
             "mixers": 255,
             "sync": 0,
             "flags": 0,
-            "volume": 0.34666880965232849,
+            "volume": 0.0,
             "balance": 0.5,
             "enabled": true,
             "muted": false,
@@ -538,7 +538,7 @@
             "mixers": 255,
             "sync": 0,
             "flags": 0,
-            "volume": 0.012610126286745071,
+            "volume": 0.0053968820720911026,
             "balance": 0.5,
             "enabled": true,
             "muted": false,
@@ -557,6 +557,121 @@
             "monitoring_type": 0,
             "private_settings": {}
         },
+        {
+            "prev_ver": 536936450,
+            "name": "Desktop HUD",
+            "uuid": "8acfb832-cfb4-4310-8ebb-b58fad2b3509",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/desktop/index.html",
+                "width": 2560,
+                "height": 1336,
+                "fps": 15,
+                "fps_custom": true,
+                "shutdown": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box HUD",
+            "uuid": "1b9f5436-864d-4f24-9f92-f45702a23953",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/music-box/index.html",
+                "width": 2560,
+                "height": 1336,
+                "fps": 30,
+                "fps_custom": true,
+                "shutdown": true,
+                "restart_when_active": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box Widget",
+            "uuid": "f662d513-6fe6-49fd-99f6-ea7f44e8de18",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/music-box/widget.html",
+                "width": 549,
+                "height": 880,
+                "fps": 15,
+                "fps_custom": true,
+                "shutdown": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
         {
             "prev_ver": 536936450,
             "name": "Desktop",
@@ -565,7 +680,7 @@
             "versioned_id": "scene",
             "settings": {
                 "custom_size": false,
-                "id_counter": 15,
+                "id_counter": 17,
                 "items": [
                     {
                         "name": "Screen Capture (PipeWire)",
@@ -678,8 +793,8 @@
                         "private_settings": {}
                     },
                     {
-                        "name": "HUD",
-                        "source_uuid": "f409a999-358f-488d-98db-c5c6a01d01b9",
+                        "name": "Desktop HUD",
+                        "source_uuid": "8acfb832-cfb4-4310-8ebb-b58fad2b3509",
                         "visible": true,
                         "locked": false,
                         "rot": 0.0,
@@ -688,7 +803,7 @@
                             "y": 1336.0
                         },
                         "align": 5,
-                        "bounds_type": 0,
+                        "bounds_type": 1,
                         "bounds_align": 0,
                         "bounds_crop": false,
                         "crop_left": 0,
@@ -713,6 +828,116 @@
                             "x": 1.0,
                             "y": 1.0
                         },
+                        "bounds": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "bounds_rel": {
+                            "x": 3.8323352336883545,
+                            "y": 2.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Camera",
+                        "source_uuid": "a8b362a1-91a6-491b-8751-26e2dad55ccd",
+                        "visible": false,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 1920.0,
+                            "y": 1080.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 16,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 1990.0,
+                            "y": 49.0
+                        },
+                        "pos_rel": {
+                            "x": 1.0628741979598999,
+                            "y": -0.92664670944213867
+                        },
+                        "scale": {
+                            "x": 0.28593748807907104,
+                            "y": 0.28611111640930176
+                        },
+                        "scale_rel": {
+                            "x": 0.23114706575870514,
+                            "y": 0.23128743469715118
+                        },
+                        "bounds": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "bounds_rel": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 0
+                        },
+                        "hide_transition": {
+                            "duration": 0
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Music Box Widget",
+                        "source_uuid": "f662d513-6fe6-49fd-99f6-ea7f44e8de18",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 549.0,
+                            "y": 880.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 17,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 1984.0,
+                            "y": 392.0
+                        },
+                        "pos_rel": {
+                            "x": 1.0538922548294067,
+                            "y": -0.41317367553710938
+                        },
+                        "scale": {
+                            "x": 1.0364298820495605,
+                            "y": 1.0363636016845703
+                        },
+                        "scale_rel": {
+                            "x": 0.68267840147018433,
+                            "y": 0.68263471126556396
+                        },
                         "bounds": {
                             "x": 0.0,
                             "y": 0.0
@@ -757,7 +982,11 @@
                 "libobs.show_scene_item.14": [],
                 "libobs.hide_scene_item.14": [],
                 "libobs.show_scene_item.15": [],
-                "libobs.hide_scene_item.15": []
+                "libobs.hide_scene_item.15": [],
+                "libobs.show_scene_item.16": [],
+                "libobs.hide_scene_item.16": [],
+                "libobs.show_scene_item.17": [],
+                "libobs.hide_scene_item.17": []
             },
             "deinterlace_mode": 0,
             "deinterlace_field_order": 0,
@@ -1990,6 +2219,157 @@
             "monitoring_type": 0,
             "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
             "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box",
+            "uuid": "747b2411-45a9-471a-b0dc-dfe39b0d6385",
+            "id": "scene",
+            "versioned_id": "scene",
+            "settings": {
+                "id_counter": 2,
+                "custom_size": false,
+                "items": [
+                    {
+                        "name": "MPD",
+                        "source_uuid": "25440930-0606-46d9-ba2c-be786ff4a3ae",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 1,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "pos_rel": {
+                            "x": -1.9161676168441772,
+                            "y": -1.0
+                        },
+                        "scale": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "scale_rel": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "bounds": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "bounds_rel": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Music Box HUD",
+                        "source_uuid": "1b9f5436-864d-4f24-9f92-f45702a23953",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "align": 5,
+                        "bounds_type": 1,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 2,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "pos_rel": {
+                            "x": -1.9161676168441772,
+                            "y": -1.0
+                        },
+                        "scale": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "scale_rel": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "bounds": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "bounds_rel": {
+                            "x": 3.8323352336883545,
+                            "y": 2.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    }
+                ]
+            },
+            "mixers": 0,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "OBSBasic.SelectScene": [
+                    {
+                        "control": true,
+                        "key": "OBS_KEY_M"
+                    }
+                ],
+                "libobs.show_scene_item.1": [],
+                "libobs.hide_scene_item.1": [],
+                "libobs.show_scene_item.2": [],
+                "libobs.hide_scene_item.2": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
+            "private_settings": {}
         }
     ],
     "groups": [
@@ -2215,6 +2595,9 @@
         {
             "name": "Desktop"
         },
+        {
+            "name": "Music Box"
+        },
         {
             "name": "Good Bye"
         }
diff --git a/desktop/index.html b/desktop/index.html
new file mode 100644
index 0000000..d8667be
--- /dev/null
+++ b/desktop/index.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>OPHI-118 / DESKTOP</title>
+<style>
+  :root {
+    --ink:        #e8e8e0;
+    --ink-dim:    rgba(232, 232, 224, 0.62);
+    --hud:        #4fd2ff;
+    --hud-dim:    #2a7fa6;
+    --hud-edge:   rgba(79, 210, 255, 0.85);
+    --hud-glow:   rgba(79, 210, 255, 0.40);
+    --accent:     #e63a2e;
+    --warn:       #ffd000;
+    --term-fg:    #5fdc62;
+    --term-fg-dim:#2c8d2f;
+    --mono:       'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+    --display:    'DejaVu Sans', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
+    --pad-y:      40px;
+    --pad-x:      72px;
+    /* Camera frame transform — auto-synced from the Desktop scene's Camera
+       item via OBS WS. These defaults are first-paint fallback. */
+    --cam-x:      1937px;
+    --cam-y:      98px;
+    --cam-w:      549px;
+    --cam-h:      309px;
+    --cam-pad:    10px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%;
+    background: transparent;
+    color: var(--ink);
+    font-family: var(--display);
+    overflow: hidden;
+    user-select: none;
+  }
+
+  /* ───────── Top HUD ───────── */
+  .hud {
+    position: absolute;
+    top: var(--pad-y);
+    left: var(--pad-x);
+    right: var(--pad-x);
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    font-family: var(--mono);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--hud);
+    letter-spacing: 0.08em;
+    text-shadow: 0 0 8px rgba(7, 8, 13, 0.9), 0 0 4px rgba(7, 8, 13, 0.9);
+  }
+  .hud .group { display: flex; gap: 24px; align-items: center; }
+  .hud > .group:nth-child(1) { justify-self: start;  }
+  .hud > .group:nth-child(2) { justify-self: center; }
+  .hud > .group:nth-child(3) { justify-self: end;    }
+  .hud .dim { color: var(--hud-dim); }
+  .hud .group > span { display: inline-flex; align-items: center; gap: 10px; }
+  .hud .led {
+    display: inline-block;
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+    margin-top: -0.08em;
+    animation: rec-blink 1.6s ease-in-out infinite;
+  }
+  #signal {
+    display: inline-block;
+    transform: translateY(-0.10em);
+  }
+  @keyframes rec-blink {
+    0%, 55% { opacity: 1; }
+    65%, 100% { opacity: 0.2; }
+  }
+
+  /* ───────── Camera frame (shared logic with game/index.html) ───────── */
+  .camera-frame {
+    position: absolute;
+    top:    calc(var(--cam-y) - var(--cam-pad));
+    left:   calc(var(--cam-x) - var(--cam-pad));
+    width:  calc(var(--cam-w) + var(--cam-pad) * 2);
+    height: calc(var(--cam-h) + var(--cam-pad) * 2);
+    pointer-events: none;
+    background: rgba(6, 10, 18, 0.85);
+    border: 1.5px solid rgba(79, 210, 255, 0.55);
+    box-shadow:
+      0 0 28px rgba(79, 210, 255, 0.20),
+      inset 0 0 60px rgba(0, 0, 0, 0.55);
+  }
+  .camera-frame .tick {
+    position: absolute;
+    width: 24px; height: 24px;
+    border: 3px solid var(--hud-edge);
+    box-shadow: 0 0 8px var(--hud-glow);
+  }
+  .camera-frame .tick.tl { top: -2px; left:  -2px; border-right: none; border-bottom: none; }
+  .camera-frame .tick.tr { top: -2px; right: -2px; border-left:  none; border-bottom: none; }
+  .camera-frame .tick.bl { bottom: -2px; left:  -2px; border-right: none; border-top: none; }
+  .camera-frame .tick.br { bottom: -2px; right: -2px; border-left:  none; border-top: none; }
+  .camera-frame .label {
+    position: absolute;
+    top: 10px; left: 14px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--hud);
+    letter-spacing: 0.32em;
+    text-shadow: 0 0 4px rgba(7, 8, 13, 0.9);
+  }
+  .camera-frame .placeholder {
+    position: absolute; inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 14px;
+    font-family: var(--mono);
+    color: var(--hud);
+    pointer-events: none;
+  }
+  .camera-frame .placeholder svg { opacity: 0.6; }
+  .camera-frame .placeholder .ph-text {
+    font-size: 13px;
+    letter-spacing: 0.45em;
+    color: rgba(79, 210, 255, 0.7);
+  }
+  .camera-frame .placeholder .ph-coords {
+    font-size: 11px;
+    letter-spacing: 0.20em;
+    color: var(--hud-dim);
+  }
+  .camera-frame.off { display: none; }
+
+  /* ───────── Bottom status bar ───────── */
+  .status-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0; right: 0;
+    padding: 22px var(--pad-x) 26px;
+    background:
+      linear-gradient(
+        to top,
+        rgba(7, 8, 13, 0.96) 0%,
+        rgba(7, 8, 13, 0.96) 65%,
+        rgba(7, 8, 13, 0.50) 90%,
+        rgba(7, 8, 13, 0)    100%
+      );
+    border-top: 1px solid rgba(79, 210, 255, 0.28);
+    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5);
+    font-family: var(--mono);
+    letter-spacing: 0.08em;
+  }
+  .status-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
+  .status-line + .status-line { margin-top: 8px; }
+  .status-line .sep { color: var(--hud-dim); }
+
+  .live-block {
+    display: flex; align-items: center; gap: 10px;
+    color: var(--accent);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    font-size: 18px;
+  }
+  .live-dot {
+    width: 11px; height: 11px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+    animation: rec-blink 1.6s ease-in-out infinite;
+  }
+  /* The "DESKTOP" label fills the slot the Game HUD uses for game name. */
+  .scene-name {
+    color: var(--ink);
+    font-weight: 700;
+    font-size: 22px;
+    letter-spacing: 0.10em;
+  }
+  .meta-line {
+    color: var(--ink-dim);
+    font-size: 16px;
+  }
+  .meta-line .icon { color: var(--hud); }
+</style>
+</head>
+<body>
+
+  <header class="hud">
+    <div class="group">
+      <span><span class="led"></span>TRANSMISSION</span>
+      <span>OPHI-118 // DESKTOP</span>
+    </div>
+    <div class="group">
+      <span class="dim">SIGNAL</span>
+      <span id="signal">▮▮▮▯▯</span>
+    </div>
+    <div class="group">
+      <span class="dim">UTC</span>
+      <span id="clock">--:--:--</span>
+    </div>
+  </header>
+
+  <div class="camera-frame" id="cam">
+    <span class="tick tl"></span>
+    <span class="tick tr"></span>
+    <span class="tick bl"></span>
+    <span class="tick br"></span>
+    <span class="label">CAM 01</span>
+    <div class="placeholder">
+      <svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" fill="none">
+        <rect x="2" y="8" width="44" height="32" rx="2" stroke="#4fd2ff" stroke-width="2"/>
+        <path d="M46 18 L60 10 L60 38 L46 30 Z" stroke="#4fd2ff" stroke-width="2" stroke-linejoin="round"/>
+        <circle cx="14" cy="14" r="2" fill="#e63a2e"/>
+      </svg>
+      <span class="ph-text">— WAITING FOR CAMERA —</span>
+      <span class="ph-coords">auto-syncs from OBS scene transform</span>
+    </div>
+  </div>
+
+  <footer class="status-bar">
+    <div class="status-line">
+      <div class="live-block">
+        <span class="live-dot"></span>
+        <span>LIVE</span>
+      </div>
+      <span class="sep">·</span>
+      <span class="scene-name">DESKTOP</span>
+    </div>
+    <div class="status-line meta-line">
+      <span class="icon">◷</span>
+      <span class="elapsed" id="elapsed">00:00:00</span>
+      <span class="sep">·</span>
+      <span class="icon" title="microphone">🎙</span>
+      <span style="color: var(--term-fg);">ON</span>
+    </div>
+  </footer>
+
+  <script src="../vendor/obs-config.js"></script>
+  <script src="../vendor/obs-ws-mini.js"></script>
+
+<script>
+  'use strict';
+  const pad = n => String(n).padStart(2, '0');
+
+  // ── UTC clock ──
+  const clockEl = document.getElementById('clock');
+  function tickClock() {
+    const d = new Date();
+    clockEl.textContent =
+      `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+  }
+  tickClock(); setInterval(tickClock, 1000);
+
+  // ── Signal bar fluctuation (steady, like Game) ──
+  const sigEl = document.getElementById('signal');
+  setInterval(() => {
+    const r = Math.random();
+    const n = r < 0.06 ? 2 : r < 0.70 ? 3 : r < 0.95 ? 4 : 5;
+    sigEl.textContent = '▮'.repeat(n) + '▯'.repeat(5 - n);
+  }, 1500);
+
+  // ── Stream elapsed time (since page load / scene activation) ──
+  const streamStart = Date.now();
+  function tickElapsed() {
+    const s = Math.floor((Date.now() - streamStart) / 1000);
+    const h = Math.floor(s / 3600);
+    const mm = Math.floor((s / 60) % 60);
+    const ss = s % 60;
+    document.getElementById('elapsed').textContent = `${pad(h)}:${pad(mm)}:${pad(ss)}`;
+  }
+  tickElapsed(); setInterval(tickElapsed, 1000);
+
+  // ── OBS WS: live camera frame sync ──
+  // URL params let you rename the camera source / scene without editing JS:
+  //   ?camera=Webcam&scene=Desktop
+  const params       = new URLSearchParams(location.search);
+  const CAM_SOURCE   = params.get('camera') || 'Camera';
+  const CAM_SCENE    = params.get('scene')  || 'Desktop';
+
+  const camEl   = document.getElementById('cam');
+  const rootStyle = document.documentElement.style;
+  function setCameraVisible(visible) { camEl.classList.toggle('off', !visible); }
+  // Map an OBS sceneItemTransform into the four CSS vars driving the frame.
+  // Assumes alignment 5 (top-left) — OBS's default for newly added items.
+  function setCameraTransform(t) {
+    if (!t) return;
+    const w = (t.sourceWidth  ?? 0) * (t.scaleX ?? 1);
+    const h = (t.sourceHeight ?? 0) * (t.scaleY ?? 1);
+    if (!(w > 0 && h > 0)) return;
+    rootStyle.setProperty('--cam-x', `${t.positionX}px`);
+    rootStyle.setProperty('--cam-y', `${t.positionY}px`);
+    rootStyle.setProperty('--cam-w', `${w}px`);
+    rootStyle.setProperty('--cam-h', `${h}px`);
+  }
+
+  async function syncCamera(obs) {
+    let camItemId = null;
+    try {
+      const r = await obs.call('GetSceneItemId',
+        { sceneName: CAM_SCENE, sourceName: CAM_SOURCE });
+      camItemId = r.sceneItemId;
+      const e = await obs.call('GetSceneItemEnabled',
+        { sceneName: CAM_SCENE, sceneItemId: camItemId });
+      setCameraVisible(e.sceneItemEnabled);
+      const t = await obs.call('GetSceneItemTransform',
+        { sceneName: CAM_SCENE, sceneItemId: camItemId });
+      setCameraTransform(t.sceneItemTransform);
+    } catch (err) {
+      console.warn(`[desktop] camera sync init failed (${CAM_SCENE}/${CAM_SOURCE}):`, err.message);
+      return;
+    }
+    obs.addEventListener('event', (ev) => {
+      const d = ev.detail || {};
+      if (d.eventData?.sceneName !== CAM_SCENE
+          || d.eventData?.sceneItemId !== camItemId) return;
+      if (d.eventType === 'SceneItemEnableStateChanged') {
+        setCameraVisible(d.eventData.sceneItemEnabled);
+      } else if (d.eventType === 'SceneItemTransformChanged') {
+        setCameraTransform(d.eventData.sceneItemTransform);
+      }
+    });
+  }
+
+  async function connectOBS() {
+    if (!window.__OBSWS || !window.OBSWSMini) return;
+    try {
+      const obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        setTimeout(connectOBS, 2500);
+      });
+      await syncCamera(obs);
+    } catch (e) {
+      // OBS WS optional — silently retry; defaults stand meanwhile.
+      setTimeout(connectOBS, 2500);
+    }
+  }
+  connectOBS();
+</script>
+</body>
+</html>
diff --git a/music-box/index.html b/music-box/index.html
new file mode 100644
index 0000000..aeefaa0
--- /dev/null
+++ b/music-box/index.html
@@ -0,0 +1,538 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>OPHI-118 / MUSIC BOX</title>
+<style>
+:root {
+  --bg:               #07080d;
+  --ink:              #e8e8e0;
+  --hud:              #4fd2ff;
+  --hud-dim:          #2a7fa6;
+  --accent:           #e63a2e;
+  --warn:             #ffd000;
+  --onair:            #5fdc62;
+
+  --term-bg:          #04120a;
+  --term-fg:          #5fdc62;
+  --term-fg-bright:   #97f99a;
+  --term-fg-dim:      #2c8d2f;
+  --term-glow:        rgba(80, 220, 100, 0.55);
+  --term-edge:        rgba(80, 220, 100, 0.45);
+
+  --mono:             'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+  --display:          'DejaVu Sans', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--display);
+  overflow: hidden;
+  user-select: none;
+}
+
+body {
+  position: relative;
+  display: grid;
+  /* HUD | terminal | status-strip | banner | footer */
+  grid-template-rows: auto 1fr auto auto auto;
+  padding: 40px 72px;
+  gap: 22px;
+}
+
+/* ───────── HUD top strip ───────── */
+.hud {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--hud);
+  letter-spacing: 0.08em;
+}
+.hud .group { display: flex; gap: 28px; align-items: center; }
+.hud > .group:nth-child(1) { justify-self: start;  }
+.hud > .group:nth-child(2) { justify-self: center; }
+.hud > .group:nth-child(3) { justify-self: end;    }
+.hud .dim { color: var(--hud-dim); }
+.hud .group > span { display: inline-flex; align-items: center; gap: 12px; }
+.hud .led {
+  display: inline-block;
+  width: 11px; height: 11px;
+  border-radius: 50%;
+  background: var(--onair);
+  box-shadow: 0 0 10px var(--onair);
+  margin-top: -0.08em;
+  animation: rec-blink 1.6s ease-in-out infinite;
+}
+#signal { display: inline-block; transform: translateY(-0.10em); }
+@keyframes rec-blink {
+  0%, 55% { opacity: 1; }
+  65%, 100% { opacity: 0.20; }
+}
+
+/* ───────── Terminal stage ───────── */
+.stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terminal {
+  width: 64vw;
+  max-width: 1480px;
+  height: 60vh;
+  max-height: 760px;
+  min-height: 420px;
+  position: relative;
+  overflow: hidden;
+  background: var(--term-bg);
+  border: 2px solid var(--term-edge);
+  border-radius: 6px;
+  padding: 28px 36px;
+  font-family: var(--mono);
+  font-size: 24px;
+  line-height: 1.55;
+  color: var(--term-fg);
+  text-shadow: 0 0 6px var(--term-glow);
+  box-shadow:
+    0 0 60px rgba(80, 220, 100, 0.10),
+    inset 0 0 90px rgba(0, 30, 0, 0.65);
+  display: flex;
+  flex-direction: column;
+}
+#termOutput {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.terminal::after {
+  content: '';
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.28) 3px,
+    rgba(0,0,0,0.28) 4px
+  );
+  opacity: 0.55;
+  mix-blend-mode: multiply;
+}
+.term-line { word-break: break-word; }
+.term-prompt { color: var(--term-fg-bright); }
+.term-out    { color: var(--term-fg); }
+.term-dim    { color: var(--term-fg-dim); }
+.term-warn   { color: var(--warn); }
+
+.pin-spacer { height: 14px; }
+
+.np-line .np-arrow {
+  color: var(--term-fg-bright);
+  margin-right: 12px;
+  display: inline-block;
+  animation: np-pulse 1.05s ease-in-out infinite alternate;
+}
+.np-line .np-title { color: var(--term-fg-bright); }
+.np-line .np-time  { color: var(--term-fg-dim); margin-left: 14px; }
+@keyframes np-pulse {
+  0%   { opacity: 0.45; }
+  100% { opacity: 1.00; }
+}
+.next-line .next-arrow { color: var(--term-fg-dim); margin-right: 10px; }
+.next-line .next-label { color: var(--term-fg-dim); margin-right: 6px; }
+.next-line .next-title { color: var(--term-fg); }
+.next-line .next-title.empty { color: var(--term-fg-dim); }
+
+/* ───────── Status strip (chat commands — always visible, not in scroll) ─────────
+   Sits between the terminal and the banner. Mirrors the "always-visible
+   bottom bar" pattern from terminal apps: scrolling history above, fixed
+   row of available commands here. */
+.status-strip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  font-family: var(--mono);
+  font-size: 18px;
+  letter-spacing: 0.18em;
+  color: var(--hud-dim);
+  padding: 10px 24px;
+  border-top: 1px solid rgba(79, 210, 255, 0.22);
+  border-bottom: 1px solid rgba(79, 210, 255, 0.22);
+  background: rgba(7, 8, 13, 0.55);
+}
+.status-strip .label { color: var(--hud); letter-spacing: 0.32em; }
+.status-strip .cmd-group { display: inline-flex; gap: 18px; }
+.status-strip .cmd {
+  color: var(--term-fg-bright);
+  text-shadow: 0 0 6px var(--term-glow);
+}
+.status-strip .desc { color: var(--hud-dim); margin-left: 6px; font-size: 16px; letter-spacing: 0.10em; }
+
+/* ───────── Big MUSIC BOX banner ───────── */
+.banner { text-align: center; }
+.banner .label {
+  font-family: var(--mono);
+  font-size: 22px;
+  letter-spacing: 0.45em;
+  text-indent: 0.45em;
+  color: var(--hud-dim);
+  margin-bottom: 12px;
+}
+.banner .title {
+  font-family: var(--mono);
+  font-size: 88px;
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  text-indent: 0.18em;
+  line-height: 1;
+  color: var(--ink);
+  text-shadow:
+    0 0 22px rgba(95, 220, 98, 0.18),
+    0 0 48px rgba(80, 200, 100, 0.10);
+  animation: sign-pulse 3.6s ease-in-out infinite;
+}
+.banner .sub {
+  margin-top: 14px;
+  font-family: var(--mono);
+  font-size: 22px;
+  letter-spacing: 0.45em;
+  text-indent: 0.45em;
+  color: var(--hud-dim);
+}
+@keyframes sign-pulse {
+  0%, 100% { opacity: 0.88; }
+  50%      { opacity: 1.00; }
+}
+
+/* ───────── Footer ───────── */
+.foot {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 19px;
+  color: var(--hud-dim);
+  letter-spacing: 0.12em;
+}
+.foot > *:nth-child(1) { justify-self: start;  }
+.foot > *:nth-child(2) { justify-self: center; }
+.foot > *:nth-child(3) { justify-self: end;    }
+.foot .onair { color: var(--onair); }
+
+/* ───────── Body overlays ───────── */
+#static {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+  opacity: 0.045;
+  mix-blend-mode: screen;
+  image-rendering: pixelated;
+}
+.scanlines {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.20) 3px,
+    rgba(0,0,0,0.20) 4px
+  );
+  opacity: 0.5;
+  mix-blend-mode: multiply;
+}
+.vignette {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0,0,0,0)    45%,
+    rgba(0,0,0,0.60) 100%
+  );
+}
+.flicker {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: rgba(0,0,0,0);
+  animation: flicker 11s ease-in-out infinite;
+}
+@keyframes flicker {
+  0%,   100%  { background: rgba(0,0,0,0); }
+  18%         { background: rgba(0,0,0,0); }
+  18.3%       { background: rgba(0,0,0,0.06); }
+  18.5%       { background: rgba(0,0,0,0); }
+  47%         { background: rgba(0,0,0,0); }
+  47.3%       { background: rgba(0,0,0,0.08); }
+  47.5%       { background: rgba(0,0,0,0); }
+  78%         { background: rgba(0,0,0,0); }
+  78.4%       { background: rgba(0,0,0,0.05); }
+  78.7%       { background: rgba(0,0,0,0); }
+}
+</style>
+</head>
+<body>
+
+  <header class="hud">
+    <div class="group">
+      <span><span class="led"></span>ON AIR</span>
+      <span>OPHI-118 // MUSIC</span>
+    </div>
+    <div class="group">
+      <span class="dim">SIGNAL</span>
+      <span id="signal">▮▮▮▮▯</span>
+    </div>
+    <div class="group">
+      <span class="dim">UTC</span>
+      <span id="clock">--:--:--</span>
+    </div>
+  </header>
+
+  <main class="stage">
+    <div class="terminal">
+      <!-- Pinned block is static HTML — JS only updates text content.
+           If JS errors, the structure is still visible. New log lines
+           are inserted before #pinnedBlock by the JS. -->
+      <div id="termOutput">
+        <div id="pinnedBlock">
+          <div class="pin-spacer"></div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">next:</span><span class="next-title empty" data-slot="0">— end of queue —</span>
+          </div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="1">—</span>
+          </div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="2">—</span>
+          </div>
+          <div class="pin-spacer"></div>
+          <div class="term-line np-line">
+            <span class="np-arrow">▶</span><span class="np-title">connecting to daemon…</span><span class="np-time">[--:-- / --:--]</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <section class="status-strip">
+    <span class="label">CHAT</span>
+    <span class="cmd-group">
+      <span><span class="cmd">!skip</span><span class="desc">next track</span></span>
+      <span><span class="cmd">!queue</span><span class="desc">peek next 3</span></span>
+      <span><span class="cmd">!info</span><span class="desc">full metadata</span></span>
+    </span>
+  </section>
+
+  <section class="banner">
+    <div class="label">— TRANSMISSION OPEN —</div>
+    <div class="title">MUSIC&nbsp;BOX</div>
+    <div class="sub">— STAY TUNED —</div>
+  </section>
+
+  <footer class="foot">
+    <span>CH 118.0 MHz</span>
+    <span id="rig">— LOADING PLAYLIST —</span>
+    <span class="onair">■ ON AIR</span>
+  </footer>
+
+  <canvas id="static"></canvas>
+  <div class="scanlines"></div>
+  <div class="vignette"></div>
+  <div class="flicker"></div>
+
+<script src="../loading/playlist.js"></script>
+<script src="../vendor/obs-config.js"></script>
+<script src="../vendor/obs-ws-mini.js"></script>
+
+<script>
+  'use strict';
+  const pad   = n => String(n).padStart(2, '0');
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+  // ── UTC clock ──
+  const clockEl = document.getElementById('clock');
+  const tickClock = () => {
+    const d = new Date();
+    clockEl.textContent =
+      `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+  };
+  tickClock(); setInterval(tickClock, 1000);
+
+  // ── Signal ──
+  const sigEl = document.getElementById('signal');
+  setInterval(() => {
+    const r = Math.random();
+    const n = r < 0.15 ? 3 : r < 0.65 ? 4 : 5;
+    sigEl.textContent = '▮'.repeat(n) + '▯'.repeat(5 - n);
+  }, 1500);
+
+  // ── Static (CRT noise) ──
+  const cv = document.getElementById('static'), ctx = cv.getContext('2d');
+  const W = 320, H = 180;
+  cv.width = W; cv.height = H;
+  const img = ctx.createImageData(W, H);
+  const drawNoise = () => {
+    const d = img.data;
+    for (let i = 0; i < d.length; i += 4) {
+      const v = (Math.random() * 255) | 0;
+      d[i] = d[i+1] = d[i+2] = v;
+      d[i+3] = 255;
+    }
+    ctx.putImageData(img, 0, 0);
+  };
+  drawNoise();
+  setInterval(drawNoise, 1000 / 8);
+
+  // ── Footer track count from playlist manifest ──
+  const playlistData = window.__PLAYLIST || { tracks: [] };
+  const trackCount = (playlistData.tracks || []).length;
+  document.getElementById('rig').textContent =
+    trackCount > 0 ? `LIBRARY :: ${trackCount} TRACKS` : '— EMPTY LIBRARY —';
+
+  // ── Terminal ──
+  const term         = document.getElementById('termOutput');
+  const pinnedBlock  = document.getElementById('pinnedBlock');
+  const npTitle      = pinnedBlock.querySelector('.np-title');
+  const npTime       = pinnedBlock.querySelector('.np-time');
+  const nextSlots    = [0, 1, 2].map(i => pinnedBlock.querySelector(`[data-slot="${i}"]`));
+  const PROMPT       = 'OPHI-118://> ';
+  const MAX_TERM_LINES = 200;
+
+  function pruneTerminal() {
+    while (term.children.length > MAX_TERM_LINES) {
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+    while (term.children.length > 1) {
+      let total = 0;
+      for (const c of term.children) total += c.getBoundingClientRect().height;
+      if (total <= term.clientHeight) break;
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+  }
+
+  function logBeforePins(text, cls = 'term-out', prompt = '> ') {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    if (prompt) {
+      const p = document.createElement('span');
+      p.className = 'term-prompt';
+      p.textContent = prompt;
+      div.appendChild(p);
+    }
+    const t = document.createElement('span');
+    if (cls) t.className = cls;
+    t.textContent = text;
+    div.appendChild(t);
+    term.insertBefore(div, pinnedBlock);
+    pruneTerminal();
+  }
+
+  async function typeCommand(text) {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    const p = document.createElement('span');
+    p.className = 'term-prompt';
+    p.textContent = PROMPT;
+    div.appendChild(p);
+    const body = document.createElement('span');
+    body.className = 'term-out';
+    div.appendChild(body);
+    term.insertBefore(div, pinnedBlock);
+    for (const c of text) {
+      body.textContent += c;
+      await sleep(38);
+    }
+    await sleep(280);
+  }
+
+  function fmtClock(s) {
+    if (!isFinite(s) || s < 0) return '--:--';
+    return `${pad(Math.floor(s / 60))}:${pad(Math.floor(s % 60))}`;
+  }
+
+  // ── State application ──
+  let lastTrackIndex = null;
+  function applyState(s) {
+    if (lastTrackIndex !== null && s.index !== lastTrackIndex && s.title) {
+      logBeforePins(`[audio] now: ${s.title}`);
+    }
+    lastTrackIndex = s.index;
+
+    npTitle.textContent = s.title || '—';
+    npTime.textContent  = `[${fmtClock(s.currentTime)} / ${fmtClock(s.duration)}]`;
+
+    const titles = Array.isArray(s.nextTitles) ? s.nextTitles : [];
+    nextSlots.forEach((slot, i) => {
+      const v = titles[i];
+      if (v) {
+        slot.textContent = v;
+        slot.classList.remove('empty');
+      } else {
+        slot.textContent = i === 0 ? '— end of queue —' : '—';
+        slot.classList.add('empty');
+      }
+    });
+    pruneTerminal();
+  }
+
+  function setOffline(msg) {
+    npTitle.textContent = msg;
+    npTime.textContent  = '[--:-- / --:--]';
+  }
+
+  let obs = null;
+  async function connectMusic() {
+    if (!window.__OBSWS) {
+      logBeforePins('[audio] vendor/obs-config.js missing — run scripts/setup.sh', 'term-dim');
+      return;
+    }
+    try {
+      obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        logBeforePins('[audio] daemon connection lost — retrying', 'term-dim');
+        setOffline('daemon disconnected');
+        setTimeout(connectMusic, 2000);
+      });
+      obs.onCustom('mpd:state', applyState);
+    } catch (e) {
+      logBeforePins(`[audio] daemon unreachable (${e.message}) — retrying`, 'term-dim');
+      setTimeout(connectMusic, 2500);
+    }
+  }
+
+  // Boot sequence
+  (async () => {
+    await sleep(450);
+    await typeCommand('music --boot --shuffle');
+    logBeforePins('[audio] subscribing to mpd:state events', 'term-out');
+    await sleep(220);
+    if (trackCount > 0) {
+      logBeforePins(`[audio] library: ${trackCount} tracks`, 'term-out');
+    } else {
+      logBeforePins('[audio] library manifest empty', 'term-dim');
+    }
+    await sleep(180);
+    logBeforePins('[audio] queue: shuffle on', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] standby for transmission ✓', 'term-out');
+    await sleep(280);
+    connectMusic();
+  })();
+</script>
+</body>
+</html>
diff --git a/music-box/widget.html b/music-box/widget.html
new file mode 100644
index 0000000..d56805f
--- /dev/null
+++ b/music-box/widget.html
@@ -0,0 +1,314 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Music Box widget</title>
+<style>
+:root {
+  --bg:               #04120a;
+  --hud:              #4fd2ff;
+  --hud-dim:          #2a7fa6;
+  --term-fg:          #5fdc62;
+  --term-fg-bright:   #97f99a;
+  --term-fg-dim:      #2c8d2f;
+  --term-glow:        rgba(80, 220, 100, 0.45);
+  --frame:            rgba(79, 210, 255, 0.85);
+  --frame-glow:       rgba(79, 210, 255, 0.30);
+  --mono:             'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  color: var(--term-fg);
+  font-family: var(--mono);
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Body == widget panel == terminal. Authored at native 549×880; the OBS
+   browser_source must match (bounds_type 0, no stretch). */
+body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 1.5px solid var(--frame);
+  box-shadow:
+    0 0 18px var(--frame-glow),
+    inset 0 0 50px rgba(0, 30, 0, 0.55);
+  text-shadow: 0 0 4px var(--term-glow);
+}
+
+.corner {
+  position: absolute;
+  width: 14px; height: 14px;
+  border-color: var(--frame);
+  border-style: solid;
+  border-width: 0;
+}
+.corner.tl { top: 4px;    left: 4px;   border-top-width: 2px;    border-left-width: 2px;  }
+.corner.tr { top: 4px;    right: 4px;  border-top-width: 2px;    border-right-width: 2px; }
+.corner.bl { bottom: 4px; left: 4px;   border-bottom-width: 2px; border-left-width: 2px;  }
+.corner.br { bottom: 4px; right: 4px;  border-bottom-width: 2px; border-right-width: 2px; }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 22px 10px;
+  font-size: 13px;
+  letter-spacing: 0.22em;
+  color: var(--hud);
+  border-bottom: 1px solid rgba(79, 210, 255, 0.22);
+  flex: 0 0 auto;
+}
+.header .left { display: inline-flex; gap: 10px; align-items: center; }
+.header .right { color: var(--hud-dim); font-size: 13px; letter-spacing: 0.12em; }
+
+.terminal {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 22px 16px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--term-fg);
+}
+#termOutput {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.term-line { word-break: break-word; }
+.term-prompt { color: var(--term-fg-bright); }
+.term-out    { color: var(--term-fg); }
+.term-dim    { color: var(--term-fg-dim); }
+
+.scanlines {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.18) 3px,
+    rgba(0,0,0,0.18) 4px
+  );
+  opacity: 0.45;
+  mix-blend-mode: multiply;
+}
+
+/* ───────── pinned bottom block ───────── */
+.pin-spacer { height: 10px; }
+.np-line {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+.np-line .np-arrow {
+  color: var(--term-fg-bright);
+  flex: 0 0 auto;
+  animation: np-pulse 1.05s ease-in-out infinite alternate;
+}
+.np-line .np-title {
+  color: var(--term-fg-bright);
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.np-line .np-time {
+  color: var(--term-fg-dim);
+  flex: 0 0 auto;
+  font-size: 14px;
+}
+@keyframes np-pulse {
+  0%   { opacity: 0.45; }
+  100% { opacity: 1.00; }
+}
+.next-line {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 14px;
+}
+.next-line .next-arrow { color: var(--term-fg-dim); flex: 0 0 auto; }
+.next-line .next-label { color: var(--term-fg-dim); flex: 0 0 auto; }
+.next-line .next-title {
+  color: var(--term-fg);
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.next-line .next-title.empty { color: var(--term-fg-dim); }
+.chat-line {
+  font-size: 13px;
+  color: var(--term-fg-dim);
+  letter-spacing: 0.06em;
+  border-top: 1px solid rgba(95, 220, 98, 0.18);
+  padding-top: 8px;
+  margin-top: 6px;
+}
+.chat-line .cmd { color: var(--term-fg-bright); }
+</style>
+</head>
+<body>
+  <span class="corner tl"></span>
+  <span class="corner tr"></span>
+  <span class="corner bl"></span>
+  <span class="corner br"></span>
+
+  <div class="header">
+    <span class="left">NOW PLAYING</span>
+    <span class="right">CH 118.0 // MUSIC</span>
+  </div>
+
+  <div class="terminal">
+    <!-- Static pinned block — JS only updates text content. If JS fails,
+         the structure is still visible (better than an empty panel). -->
+    <div id="termOutput">
+      <div id="pinnedBlock">
+        <div class="pin-spacer"></div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">next:</span><span class="next-title empty" data-slot="0">— end of queue —</span>
+        </div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="1">—</span>
+        </div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="2">—</span>
+        </div>
+        <div class="pin-spacer"></div>
+        <div class="term-line np-line">
+          <span class="np-arrow">▶</span><span class="np-title">connecting…</span><span class="np-time">[--:-- / --:--]</span>
+        </div>
+        <div class="term-line chat-line">
+          chat: <span class="cmd">!skip</span> · <span class="cmd">!queue</span> · <span class="cmd">!info</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="scanlines"></div>
+
+<script src="../vendor/obs-config.js"></script>
+<script src="../vendor/obs-ws-mini.js"></script>
+<script>
+  'use strict';
+  const pad = n => String(n).padStart(2, '0');
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+  const fmtClock = s => (!isFinite(s) || s < 0)
+    ? '--:--' : `${pad(Math.floor(s / 60))}:${pad(Math.floor(s % 60))}`;
+
+  const term         = document.getElementById('termOutput');
+  const pinnedBlock  = document.getElementById('pinnedBlock');
+  const npTitle      = pinnedBlock.querySelector('.np-title');
+  const npTime       = pinnedBlock.querySelector('.np-time');
+  const nextSlots    = [0, 1, 2].map(i => pinnedBlock.querySelector(`[data-slot="${i}"]`));
+
+  const MAX_TERM_LINES = 60;
+  function pruneTerminal() {
+    while (term.children.length > MAX_TERM_LINES) {
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+    while (term.children.length > 1) {
+      let total = 0;
+      for (const c of term.children) total += c.getBoundingClientRect().height;
+      if (total <= term.clientHeight) break;
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+  }
+
+  function logBeforePins(text, cls = 'term-out', prompt = '> ') {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    if (prompt) {
+      const p = document.createElement('span');
+      p.className = 'term-prompt';
+      p.textContent = prompt;
+      div.appendChild(p);
+    }
+    const t = document.createElement('span');
+    if (cls) t.className = cls;
+    t.textContent = text;
+    div.appendChild(t);
+    term.insertBefore(div, pinnedBlock);
+    pruneTerminal();
+  }
+
+  let lastTrackIndex = null;
+  function applyState(s) {
+    if (lastTrackIndex !== null && s.index !== lastTrackIndex && s.title) {
+      logBeforePins(`[audio] now: ${s.title}`);
+    }
+    lastTrackIndex = s.index;
+
+    npTitle.textContent = s.title || '—';
+    npTime.textContent  = `[${fmtClock(s.currentTime)} / ${fmtClock(s.duration)}]`;
+
+    const titles = Array.isArray(s.nextTitles) ? s.nextTitles : [];
+    nextSlots.forEach((slot, i) => {
+      const v = titles[i];
+      if (v) {
+        slot.textContent = v;
+        slot.classList.remove('empty');
+      } else {
+        slot.textContent = i === 0 ? '— end of queue —' : '—';
+        slot.classList.add('empty');
+      }
+    });
+    pruneTerminal();
+  }
+
+  function setOffline(msg) {
+    npTitle.textContent = msg;
+    npTime.textContent  = '[--:-- / --:--]';
+  }
+
+  let obs = null;
+  async function connectMusic() {
+    if (!window.__OBSWS) {
+      logBeforePins('config missing', 'term-dim');
+      return;
+    }
+    try {
+      obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        logBeforePins('daemon disconnected', 'term-dim');
+        setOffline('disconnected');
+        setTimeout(connectMusic, 2000);
+      });
+      obs.onCustom('mpd:state', applyState);
+    } catch (e) {
+      logBeforePins('daemon unreachable', 'term-dim');
+      setTimeout(connectMusic, 2500);
+    }
+  }
+
+  (async () => {
+    await sleep(200);
+    logBeforePins('[audio] subscribing to mpd:state', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] queue: shuffle on', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] standby ✓', 'term-out');
+    await sleep(220);
+    connectMusic();
+  })();
+</script>
+</body>
+</html>