From c8cb2a25f43e969bec3825d737e6ba845d852f62 Mon Sep 17 00:00:00 2001
From: hoelee <me@hoelee.com>
Date: Tue, 20 Oct 2026 22:16:34 +0800
Subject: [PATCH] fix(subs): literal arrow in the .srt button, flex header
 instead of float
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ::before used CSS escapes written through a Python string, which ate them
(octal escape) and shipped control bytes — the button read as mojibake.

- use a literal UTF-8 arrow instead of \2193\0020
- figcaption is now flex, so a long title wraps under the button rather than
  being crowded by a float; verified at 360px and 680px
- round the shown duration down so it matches the player's clock (197 s = 3:17)
---
 ...-subtitles-for-songs-without-timestamps.md | 45 ++++++++++---------
 ...-subtitles-for-songs-without-timestamps.md | 45 ++++++++++---------
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/content/posts/generating-subtitles-for-songs-without-timestamps.md b/src/content/posts/generating-subtitles-for-songs-without-timestamps.md
index ebfe7b0..1c57566 100644
--- a/src/content/posts/generating-subtitles-for-songs-without-timestamps.md
+++ b/src/content/posts/generating-subtitles-for-songs-without-timestamps.md
@@ -210,11 +210,12 @@ or open them in VLC.
 
 <style>
 .subs-track{margin:2.4rem 0}
-.subs-track figcaption{font-weight:600;margin-bottom:.35rem}
-.subs-meta{font-weight:400;opacity:.6;font-size:.9em}
-.subs-dl{float:right;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent}
+.subs-track figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
+.subs-title{flex:1 1 auto;min-width:0}
+.subs-meta{font-weight:400;opacity:.6;font-size:.9em;white-space:nowrap}
+.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap}
 .subs-dl:hover{background:rgba(34,197,94,.14)}
-.subs-dl::before{content:"930"}
+.subs-dl::before{content:"↓ "}
 .subs-track audio{width:100%;max-width:560px}
 .subs-box{position:relative;max-height:250px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
 .subs-box p{margin:.18rem 0;opacity:.55}
@@ -222,7 +223,7 @@ or open them in VLC.
 </style>
 
 <figure class="subs-track">
-  <figcaption>Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
   <pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
 [ar:Mr Hoelee]
@@ -250,7 +251,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 194 s</span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
   <pre id="subs-2" hidden>[ti:Mist Over Skellig]
 [ar:Mr Hoelee]
@@ -275,7 +276,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 198 s</span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
   <pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
 [ar:Mr Hoelee]
@@ -301,7 +302,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 161 s</span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
   <pre id="subs-4" hidden>[ti:Clockwork Starlight]
 [ar:Mr Hoelee]
@@ -329,7 +330,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 180 s</span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
   <pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
 [ar:Mr Hoelee]
@@ -354,7 +355,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 165 s</span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
   <pre id="subs-6" hidden>[ti:Whale in the Milky Way]
 [ar:Mr Hoelee]
@@ -381,7 +382,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 106 s</span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
   <pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
 [ar:Mr Hoelee]
@@ -409,7 +410,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 101 s</span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
   <pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
 [ar:Mr Hoelee]
@@ -435,7 +436,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
   <pre id="subs-9" hidden>[ti:Captain Marshmallow]
 [ar:Mr Hoelee]
@@ -464,7 +465,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 132 s</span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
   <pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
 [ar:Mr Hoelee]
@@ -490,7 +491,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 214 s</span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
   <pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
 [ar:Mr Hoelee]
@@ -516,7 +517,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 222 s</span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
   <pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
 [ar:Mr Hoelee]
@@ -542,7 +543,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 129 s</span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
   <pre id="subs-13" hidden>[ti:Paper Airplane in September]
 [ar:Mr Hoelee]
@@ -567,7 +568,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
   <pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
 [ar:Mr Hoelee]
@@ -591,7 +592,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 109 s</span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
   <pre id="subs-15" hidden>[ti:Green Train to the Sea]
 [ar:Mr Hoelee]
@@ -615,7 +616,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 183 s</span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
   <pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
 [ar:Mr Hoelee]
@@ -641,7 +642,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
   <pre id="subs-17" hidden>[ti:Look Upon Your Path]
 [ar:Mr Hoelee]
@@ -665,7 +666,7 @@ or open them in VLC.
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 178 s</span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
   <pre id="subs-18" hidden>[ti:Bells of the Winter Star]
 [ar:Mr Hoelee]
diff --git a/src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md b/src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md
index dc2e97e..31f10d2 100644
--- a/src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md
+++ b/src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md
@@ -151,11 +151,12 @@ a.dispatchEvent(new Event('timeupdate'));
 
 <style>
 .subs-track{margin:2.4rem 0}
-.subs-track figcaption{font-weight:600;margin-bottom:.35rem}
-.subs-meta{font-weight:400;opacity:.6;font-size:.9em}
-.subs-dl{float:right;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent}
+.subs-track figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
+.subs-title{flex:1 1 auto;min-width:0}
+.subs-meta{font-weight:400;opacity:.6;font-size:.9em;white-space:nowrap}
+.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap}
 .subs-dl:hover{background:rgba(34,197,94,.14)}
-.subs-dl::before{content:"930"}
+.subs-dl::before{content:"↓ "}
 .subs-track audio{width:100%;max-width:560px}
 .subs-box{position:relative;max-height:250px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
 .subs-box p{margin:.18rem 0;opacity:.55}
@@ -163,7 +164,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </style>
 
 <figure class="subs-track">
-  <figcaption>Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
   <pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
 [ar:Mr Hoelee]
@@ -191,7 +192,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 194 s</span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
   <pre id="subs-2" hidden>[ti:Mist Over Skellig]
 [ar:Mr Hoelee]
@@ -216,7 +217,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 198 s</span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
   <pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
 [ar:Mr Hoelee]
@@ -242,7 +243,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 161 s</span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
   <pre id="subs-4" hidden>[ti:Clockwork Starlight]
 [ar:Mr Hoelee]
@@ -270,7 +271,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 180 s</span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
   <pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
 [ar:Mr Hoelee]
@@ -295,7 +296,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 165 s</span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
   <pre id="subs-6" hidden>[ti:Whale in the Milky Way]
 [ar:Mr Hoelee]
@@ -322,7 +323,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 106 s</span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
   <pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
 [ar:Mr Hoelee]
@@ -350,7 +351,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 101 s</span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
   <pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
 [ar:Mr Hoelee]
@@ -376,7 +377,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
   <pre id="subs-9" hidden>[ti:Captain Marshmallow]
 [ar:Mr Hoelee]
@@ -405,7 +406,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 132 s</span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
   <pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
 [ar:Mr Hoelee]
@@ -431,7 +432,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 214 s</span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
   <pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
 [ar:Mr Hoelee]
@@ -457,7 +458,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 222 s</span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
   <pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
 [ar:Mr Hoelee]
@@ -483,7 +484,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 129 s</span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
   <pre id="subs-13" hidden>[ti:Paper Airplane in September]
 [ar:Mr Hoelee]
@@ -508,7 +509,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
   <pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
 [ar:Mr Hoelee]
@@ -532,7 +533,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 109 s</span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
   <pre id="subs-15" hidden>[ti:Green Train to the Sea]
 [ar:Mr Hoelee]
@@ -556,7 +557,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 183 s</span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
   <pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
 [ar:Mr Hoelee]
@@ -582,7 +583,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
   <pre id="subs-17" hidden>[ti:Look Upon Your Path]
 [ar:Mr Hoelee]
@@ -606,7 +607,7 @@ a.dispatchEvent(new Event('timeupdate'));
 </figure>
 
 <figure class="subs-track">
-  <figcaption>Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 178 s</span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
+  <figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
   <audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
   <pre id="subs-18" hidden>[ti:Bells of the Winter Star]
 [ar:Mr Hoelee]