website: Rename mockup usernames to ChillCat and HappyDog across HTML, JS, and all 15 locales

This commit is contained in:
KoalaDev
2026-07-03 11:07:03 +02:00
parent 537c8f3c60
commit 82b90d86a9
17 changed files with 32 additions and 32 deletions
+2 -2
View File
@@ -525,7 +525,7 @@ document.addEventListener('DOMContentLoaded', () => {
});
};
const NAMES = { a: 'CoolUsername', b: 'KoalaPC' };
const NAMES = { a: '🐱 ChillCat', b: '🐶 HappyDog' };
const chipEvent = chip.querySelector('.demo-chip-event');
let eventTimer = null;
@@ -602,7 +602,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Manual controls (the automated walkthrough drives these same handlers)
launcher.addEventListener('click', () => setPopupOpen(!scene.classList.contains('popup-open')));
// The popup remote control acts as CoolUsername (tab A's user)
// The popup remote control acts as 🐱 ChillCat (tab A's user)
playBtn.addEventListener('click', () => {
if (tabs.a.playing && tabs.b.playing) { pulse(); return; }
broadcast('a', true);
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Zu anderen springen",
"MOCK_15": "Letzte Aktivität",
"MOCK_16": "Warten auf 1 Partner (KoalaPC)...",
"MOCK_16": "Warten auf 1 Partner (🐶 HappyDog)...",
"MOCK_17": "Überspringen & abspielen",
"MOCK_18": "Dein Benutzername",
"MOCK_19": "Noise-Filterung",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Jump to Others",
"MOCK_15": "Last Activity Status",
"MOCK_16": "Waiting for 1 peer (KoalaPC)...",
"MOCK_16": "Waiting for 1 peer (🐶 HappyDog)...",
"MOCK_17": "Skip & Play anyway",
"MOCK_18": "Your Username",
"MOCK_19": "Hide Clutter Tabs",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SINCRO",
"MOCK_14": "Ir a la posición de otros",
"MOCK_15": "Estado de la última actividad",
"MOCK_16": "Esperando a 1 participante (KoalaPC)...",
"MOCK_16": "Esperando a 1 participante (🐶 HappyDog)...",
"MOCK_17": "Omitir y reproducir ya",
"MOCK_18": "Tu nombre de usuario",
"MOCK_19": "Ocultar pestañas sin video",
+1 -1
View File
@@ -164,7 +164,7 @@
"MOCK_12": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg> Pause",
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Dernière activité",
"MOCK_15": "En attente de 1 participant (KoalaPC)...",
"MOCK_15": "En attente de 1 participant (🐶 HappyDog)...",
"MOCK_16": "Passer & lire",
"MOCK_17": "Votre pseudo",
"MOCK_18": "Masquer les onglets inutiles",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Vai dagli altri",
"MOCK_15": "Ultima attività",
"MOCK_16": "In attesa di un amico (KoalaPC)...",
"MOCK_16": "In attesa di un amico (🐶 HappyDog)...",
"MOCK_17": "Salta l'attesa",
"MOCK_18": "Tuo Nome",
"MOCK_19": "Nascondi schede",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "他の人に合わせる",
"MOCK_15": "最新のアクティビティ状況",
"MOCK_16": "1人のメンバー (KoalaPC) を待機中...",
"MOCK_16": "1人のメンバー (🐶 HappyDog) を待機中...",
"MOCK_17": "スキップして再生",
"MOCK_18": "ユーザー名",
"MOCK_19": "不要なタブを非表示",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "다른 사람에게 이동",
"MOCK_15": "최근 활동 상태",
"MOCK_16": "참여자 1명 (KoalaPC) 대기 중...",
"MOCK_16": "참여자 1명 (🐶 HappyDog) 대기 중...",
"MOCK_17": "건너뛰고 재생",
"MOCK_18": "사용자 이름",
"MOCK_19": "복잡한 탭 숨기기",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Spring naar anderen",
"MOCK_15": "Laatste activiteitsstatus",
"MOCK_16": "Wachten op 1 deelnemer (KoalaPC)...",
"MOCK_16": "Wachten op 1 deelnemer (🐶 HappyDog)...",
"MOCK_17": "Overslaan & toch afspelen",
"MOCK_18": "Uw gebruikersnaam",
"MOCK_19": "Overbodige tabbladen verbergen",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Skocz do innych",
"MOCK_15": "Status ostatniej aktywności",
"MOCK_16": "Oczekiwanie na 1 uczestnika (KoalaPC)...",
"MOCK_16": "Oczekiwanie na 1 uczestnika (🐶 HappyDog)...",
"MOCK_17": "Pomiń i odtwórz mimo to",
"MOCK_18": "Twoja nazwa użytkownika",
"MOCK_19": "Ukryj zbędne karty",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SINCRO",
"MOCK_14": "Ir para a posição dos outros",
"MOCK_15": "Última Atividade",
"MOCK_16": "Aguardando 1 amigo (KoalaPC)...",
"MOCK_16": "Aguardando 1 amigo (🐶 HappyDog)...",
"MOCK_17": "Pular e reproduzir agora",
"MOCK_18": "Seu Nome",
"MOCK_19": "Ocultar abas sem vídeo",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SINCRO",
"MOCK_14": "Ir para a posição dos outros",
"MOCK_15": "Última Atividade",
"MOCK_16": "À espera de 1 amigo (KoalaPC)...",
"MOCK_16": "À espera de 1 amigo (🐶 HappyDog)...",
"MOCK_17": "Ignorar e reproduzir agora",
"MOCK_18": "O seu Nome",
"MOCK_19": "Ocultar separadores sem vídeo",
+1 -1
View File
@@ -164,7 +164,7 @@
"MOCK_12": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg> Пауза",
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Последняя активность",
"MOCK_15": "Ожидание 1 участника (KoalaPC)...",
"MOCK_15": "Ожидание 1 участника (🐶 HappyDog)...",
"MOCK_16": "Пропустить и играть",
"MOCK_17": "Ваше имя",
"MOCK_18": "Скрыть лишние вкладки",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
"MOCK_14": "Diğerlerine Atla",
"MOCK_15": "Son Etkinlik Durumu",
"MOCK_16": "1 bağlantı bekleniyor (KoalaPC)...",
"MOCK_16": "1 bağlantı bekleniyor (🐶 HappyDog)...",
"MOCK_17": "Atla ve Yine de Oynat",
"MOCK_18": "Kullanıcı Adınız",
"MOCK_19": "Gereksiz Sekmeleri Gizle",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> СИНХ",
"MOCK_14": "Перейти до інших",
"MOCK_15": "Статус останньої дії",
"MOCK_16": "Очікування 1 партнера (KoalaPC)...",
"MOCK_16": "Очікування 1 партнера (🐶 HappyDog)...",
"MOCK_17": "Все одно пропустіть і грайте",
"MOCK_18": "Ваше ім'я користувача",
"MOCK_19": "Приховати безладні вкладки",
+1 -1
View File
@@ -165,7 +165,7 @@
"MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> 同步",
"MOCK_14": "跳转到其他",
"MOCK_15": "上次活动状态",
"MOCK_16": "正在等待 1 个同伴 (KoalaPC)...",
"MOCK_16": "正在等待 1 个同伴 (🐶 HappyDog)...",
"MOCK_17": "仍然跳过并播放",
"MOCK_18": "您的用户名",
"MOCK_19": "隐藏杂乱标签",
+15 -15
View File
@@ -310,11 +310,11 @@
<span class="demo-chip-event"></span>
</button>
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as CoolUsername — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> Stranger Things - S4E1</span>
<span class="demo-tab-user demo-user-a">CoolUsername</span>
<span class="demo-tab-user demo-user-a">🐱 ChillCat</span>
<button class="demo-ext-launcher" id="demo-launcher" type="button" aria-expanded="true" title="Open or close the KoalaSync popup">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="16" height="16" loading="eager" decoding="async">
</button>
@@ -367,11 +367,11 @@
</div>
</div>
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as KoalaPC — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> Stranger Things - S4E1</span>
<span class="demo-tab-user demo-user-b">KoalaPC</span>
<span class="demo-tab-user demo-user-b">🐶 HappyDog</span>
</div>
<div class="demo-video">
<div class="demo-video-art" aria-hidden="true"></div>
@@ -465,7 +465,7 @@
<div class="mock-peer-list">
<div class="mock-peer-item">
<div class="mock-peer-header">
<span class="mock-peer-name">CoolUsername</span>
<span class="mock-peer-name">🐱 ChillCat</span>
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
@@ -473,7 +473,7 @@
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
<span class="mock-peer-name">KoalaPC</span>
<span class="mock-peer-name">🐶 HappyDog</span>
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
@@ -529,12 +529,12 @@
<div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
<span style="font-size: 9px; color: var(--text-muted);">CoolUsername @ 12:44:32</span>
<span style="font-size: 9px; color: var(--text-muted);">🐱 ChillCat @ 12:44:32</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; margin-bottom: 1px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="10" height="10" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
<span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐨 KoalaPC</span>
<span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐶 HappyDog</span>
</div>
</div>
</div>
@@ -563,7 +563,7 @@
<div class="mock-peer-list">
<div class="mock-peer-item">
<div class="mock-peer-header">
<span class="mock-peer-name">CoolUsername</span>
<span class="mock-peer-name">🐱 ChillCat</span>
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
@@ -571,7 +571,7 @@
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
<span class="mock-peer-name">KoalaPC</span>
<span class="mock-peer-name">🐶 HappyDog</span>
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
@@ -587,7 +587,7 @@
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
{{MOCK_18}}
</label>
<input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
<input type="text" class="mock-input" value="🐱 ChillCat" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
@@ -673,11 +673,11 @@
</label>
<div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
<span>CoolUsername: PAUSE</span>
<span>🐱 ChillCat: PAUSE</span>
<span style="opacity: 0.5;">0:55</span>
</div>
<div style="display: flex; justify-content: space-between; padding-top: 2px;">
<span>KoalaPC: PLAY</span>
<span>🐶 HappyDog: PLAY</span>
<span style="opacity: 0.5;">0:00</span>
</div>
</div>
@@ -1150,10 +1150,10 @@
<!-- Custom Step 3 Illustration -->
<div class="step-illustration-3" data-reveal>
<div class="illus-sync-theater">
<!-- Player A (KoalaPC) -->
<!-- Player A (🐶 HappyDog) -->
<div class="illus-player-card player-a">
<div class="player-header">
<span class="player-user">🐨 KoalaPC</span>
<span class="player-user">🐶 HappyDog</span>
<span class="player-badge active">PLAYING</span>
</div>
<div class="player-video-canvas">