給旅居海外、聽得懂中文的台灣孩子學注音的網站，所有畫面與遊戲共用的
視覺基調與設計 token。低彩度奶油底、柔和點綴、圓潤大留白、超大符號與觸控區，
動效一律尊重 prefers-reduced-motion。此頁是 styles/tokens.css 的視覺預覽。
低飽和奶油底搭配柔和點綴；深色模式為墨綠夜，不用純黑。
聲調是注音關鍵，且丹麥文沒有聲調，需特別用顏色輔助聽辨。
保育物種、低彩度可愛風；完整角色設定見 docs/00-foundation.md §8。
純 inline SVG＋CSS，圓潤低彩度可愛風，各帶招牌辨識特徵。待機動效＝輕柔漂浮＋眨眼，開啟「減少動態」時靜止。歡呼態與示範態見下方各區。
孩子答對時播放：開心彈跳（壓縮拉伸）＋瞇眼笑＋金色／櫻花星星迸發。沿用待機態同一隻動物與 token 配色，開啟「減少動態」時靜止、星星定格。
介紹新符號時播放：動物溫柔點頭傾身、張口「發音」，並冒出一顆注音泡泡輕輕脈動，示意「跟我念一次」。沿用待機態同一隻動物與 token 配色，眼神專注張開不眨，開啟「減少動態」時靜止。
「看」能力元件：每個母音用同一隻聲音小精靈示範嘴型，把「已知的聲音」連到「符號的長相」——ㄚ 是嘴巴張大大、ㄧ 是嘴巴扁扁笑咪咪（ㄧ 的一橫就是那條扁嘴）。旁邊的注音符號輕輕脈動提醒「看這個」；開啟「減少動態」時靜止。先從單韻母 ㄚ 與介音 ㄧ 走通流程，與下方「寫」的同兩個符號相互呼應。
「聽」能力元件：聲音小精靈念出符號的聲音，聲波一圈圈從嘴巴往符號擴散（三圈先後脈動＝聲音往外傳），孩子點「聽我說」播放鈕就能反覆聆聽（依基礎文件，發音用預錄音檔、不做自動評分）。與上方「看」、下方「寫」刻意用同兩個符號 ㄚ／ㄧ，讓單一學習單元的看＋聽＋寫三能力完整串起來；開啟「減少動態」時聲波靜止為裝飾線、播放鈕停止脈動。
「寫」能力元件（台灣野山羊主責）：在淡色描寫槽內依編號順序逐筆描出，每筆有起筆編號點與方向箭頭，先描紅、再仿寫。動效＝依序描寫；開啟「減少動態」時直接顯示已描完的靜態完整字形與編號，仍可當靜態筆順表。先從最易的單韻母 ㄚ 與介音 ㄧ 走通流程。
「說」能力元件（台灣獼猴主責，活潑開心果）：補齊單一學習單元的看＋聽＋寫＋說四能力。獼猴先示範念一次，再邀請孩子按麥克風跟著念，錄下來、聽聽看，最後請家長按個讚。依基礎文件 §5：幼兒語音辨識準確率低，初期不做自動評分，改採「錄音→回放→家長按讚」的低壓力模式（沿用「聽」單元同一個符號 ㄚ）。下面三張卡示範跟讀流程的三個狀態；開啟「減少動態」時麥克風漣漪／錄音點／愛心脈動皆靜止仍清楚。
路線圖步驟 5 的「聽辨」最小遊戲核心互動（石虎聽偵探主責）：先點「聽我說」播放鈕聽一次聲音，再從 3 個符號中點出正確的那一個（先聽再認、音韻覺識先於符號）。依基礎文件「答錯不懲罰」：答對時正解綠圈打勾＋輕彈、其餘溫柔淡出；答錯時被點的符號只是輕輕晃一下，並柔和指向正解邀請再試一次。下面三張卡示範同一題的三個互動狀態；開啟「減少動態」時彈跳／晃動／脈動全部靜止，綠圈與指向箭頭仍清楚可見。
路線圖步驟 5 的「讀選」最小遊戲核心互動，是「聽辨」的反向：上方先讀出一個注音符號（題目），再從下方 3 個「嘴型」中點出它的聲音——沿用「看」單元的聲音小精靈嘴型詞彙：張大嘴＝ㄚ、扁扁笑嘴＝ㄧ、閉緊雙唇＝ㄇ（符號→已知的嘴型聲音）。互動回饋與聽辨一致、依基礎文件「答錯不懲罰」：答對時正解嘴型綠圈打勾＋輕彈、其餘溫柔淡出；答錯時被點的嘴型只輕輕晃一下，並柔和指向正解邀請再試一次。下面三張卡示範同一題（讀 ㄚ）的三個互動狀態；開啟「減少動態」時彈跳／晃動／脈動全部靜止，綠圈與指向箭頭仍清楚可見。
路線圖步驟 6 的時間預算機制視覺：把當日 30 分鐘畫成藤上一排能量果實（每顆約 5 分鐘），隨學習逐顆被吃掉＝時間用掉，正在吃的那一顆輕柔脈動，讓孩子對「快結束了」有心理準備（基礎文件 §7）。吃完即「今天玩夠囉，明天再一起玩！」——以月亮休息收尾，溫柔結束、非懲罰、不做倒數壓力（基礎文件 §6）。畫面文字給家長看（含剩餘分鐘）；資料先存本機、後接 Firestore。下面四張卡示範一天的進程；開啟「減少動態」時脈動靜止、仍清楚標示目前在哪一顆。
路線圖步驟 7 的入口畫面：家長登入後選一位孩子檔案來玩，進度才能記在那個孩子身上（基礎文件 §10 — 一個家長帳號可帶多個孩子）。介面文字給家長看、頭像與大按鈕給孩子點（觸控區夠大、容忍誤觸）。下面三張卡示範入口的三個畫面——家長登入歡迎、還沒有孩子的可愛空狀態（虛線加號邀請新增第一個小朋友，不是冷冰冰的空白）、以及已有孩子時的選擇檔案（頭像泡泡＋名字＋學習星星）。資料先存本機、後接 Firebase Auth／Firestore；開啟「減少動態」時揮手／漂浮／脈動全部靜止。
注音的終極目標：把學過的聲母＋韻母＋聲調拼成一個字音。櫻花鉤吻鮭逆流而上，兩塊聲韻磚滑進來拼合、戴上聲調帽，拼出 ㄅ＋ㄚ＋ˇ＝ㄅㄚˇ（把）。以四張卡示範拼讀進程；介面文字給家長看。bopomofo
遊戲化外殼的第一塊：每關完成依完成度給 1–3 顆星（看完成度、不看速度，也沒有計時壓力），已得的星星由左至右依序亮起、輕彈，主夥伴台灣黑熊歡呼。落實基礎文件 §6「點數用來肯定努力，不製造焦慮或競爭」。三張卡示範一顆／兩顆／三顆星三種結果；星數下方文字給家長看。bopomofo
遊戲化外殼的第二塊：完成學習里程碑可「解鎖」其他台灣動物加入隊伍，提供溫和的收集動機（基礎文件 §6，刻意不用排行榜或抽卡）。三張卡示範一段解鎖流程：①還沒解鎖（神秘剪影＋虛線框脈動邀請、星星進度）②解鎖瞬間（光芒迸發、新夥伴躍出歡呼）③加入隊伍（緞帶歡迎、主夥伴台灣黑熊同框迎接）。以石虎為解鎖範例。bopomofo
遊戲化外殼的第三塊：把學習成就畫成一頁頁可收集的圓形徽章貼紙（符號達人、初次完成、連續學習、動物好朋友、拼讀高手…），提供溫和的收集動機與回顧成長（基礎文件 §6，刻意不用排行榜或抽卡）。已得的貼紙滿色、輕彈；還沒得到的是虛線空槽＋問號，邀請繼續努力。前兩張卡示範同一本貼紙簿從「才剛開始」到「收集中」的進程，第三張示範剛得到一枚新貼紙的慶祝瞬間。bopomofo
遊戲化外殼的第四塊：把連續學習天數（streak）畫成「動物的家越來越熱鬧」而非冷冰冰的數字（基礎文件 §6，強調堅持而非競爭，刻意不做孩子間排行榜）。三張卡示範同一個家隨連續天數成長：①第 1 天才剛搬進來（主夥伴黑熊獨自在家、小樹苗剛冒芽）②連續 3 天（石虎來作客、樹長大、掛起小燈籠與花）③連續 7 天（獼猴也加入、彩旗氣球滿屋、花開、陽光普照、星火慶祝）。底部小葉子路徑溫柔標示走過的天數。bopomofo
給家長看的文字以「太棒了，你們已經一起學了 N 天」這種肯定堅持的口吻呈現，而非和別的孩子比較；中斷 streak 也不懲罰，只溫柔邀請「明天再回家看看大家」。
路線圖步驟 10：給家長的「家長模式」三張卡。研究（AAP 2024）顯示幼兒學習的關鍵不是時長而是內容品質與家長共學，因此每天 30 分鐘以溫柔結束＋家長共學收尾，而非硬性中斷（基礎文件 §6–§7）。三張卡：①今日共學回顧（以肯定口吻告訴家長孩子今天玩了什麼、提醒今天到這裡就好）②今晚一起玩的小建議（生活中可一起做的共學活動）③進度總覽（已學會／學習中／還沒開始，並強調和昨天的自己比、不和別人比，刻意不做孩子間排行榜）。全程文字導向給家長看，開啟「減少動態」時學習中符號的脈動靜止。bopomofo
家長模式是給大人看的後台：每天孩子玩完後，家長能看見今天學了什麼、拿到幾個可在生活中延伸的共學點子，並看到整體進度——全部以「肯定堅持、和昨天的自己比」為基調，呼應基礎文件 §6–§7「30 分鐘溫柔結束＋家長共學、不製造時長與競爭壓力」。後續可接 Firestore 把每個孩子的真實學習紀錄帶進這三張卡。
把前面各自獨立的元件串成一個 app 畫面：頂端是孩子頭像（步驟 7）＋能量果實時間預算（步驟 6），其下是看／聽／說／寫／玩五步進度路徑（步驟 4–5），中央是當前活動，完成時給星星評價（步驟 9）。三張卡示範同一個符號 ㄚ 的完整旅程——①今天玩這個（單元開始）②進行中（正在「看」這一步）③學會了（三顆星＋黑熊歡呼，並溫柔提示今天到這裡就好）。全程沿用 lg 頭像、ef 果實、look 聲音小精靈嘴型、rw 星星與黑熊歡呼，零新增繪製；開啟「減少動態」時當前步驟與符號的脈動皆靜止。bopomofo
這是把路線圖步驟 4–9 的元件組進同一個畫面的 capstone：孩子看到的是一致的 app 外殼（頭像、能量果實、五步路徑），中間替換成當前活動（這裡示範「看」，其餘聽／說／寫／玩同理替換），完成後以星星與黑熊歡呼肯定努力、並溫柔提示今天到這裡就好（§6–§7）。後續整合：用 Firebase Auth 帶出真實孩子檔案、用 Firestore 記錄每個符號的完成度與當日已用時間，驅動果實消耗、步驟點亮與星數。
把整段學習畫成一條蜿蜒上山的步道，每個站就是一個注音符號。已學會的站綠色亮起並顯示符號、目前所在的站橙色脈動並停著孩子的頭像（你在這裡）、還沒走到的站虛線淡色＋小鎖（但淡淡預告下一個符號是什麼）。這是 capstone（單一符號的旅程）之上的 macro 地圖，讓孩子看到自己走了多遠而不是和別人比名次（基礎文件 §6 強調堅持非競爭）。三張卡示範旅程推進——①出發囉（站在第 1 站 ㄅ）②走到第 4 站（前 3 站已學會、ㄈ 進行中）③登上第一座山頂（六站全亮、黑熊在山頂歡呼）。步道、頭像、星星與黑熊歡呼皆重用既有詞彙、零新增繪製；開啟「減少動態」時目前站停止脈動仍清楚。bopomofo
冒險地圖是遊戲化外殼的 macro 視圖：孩子在地圖上看到自己走過的站（已學會的符號）、目前站（正在學的符號）、與前方還鎖著的站，點目前站就進入 capstone 的單一符號旅程。把進度畫成蜿蜒上山的步道而非進度條，配合山頂達成的階段慶祝，落實基礎文件 §6 「強調堅持而非競爭」——沒有名次、沒有和別人比，只有「我走了多遠」。後續整合：用 Firestore 每個符號的完成度驅動站的點亮、目前站位置與已走步道長度。
基礎文件 §4 特別指出：對聽得懂中文卻講丹麥文的海外孩子來說，最難的不是符號，而是聲調聽辨（丹麥文沒有聲調）。這組元件把四個聲調畫成台灣野山羊走的山坡——一聲走平頂（高而平）、二聲往上爬（由低升高）、三聲先下谷再爬上來（先降後升）、四聲一路下坡（由高滑低），用山羊「往哪邊走」把抽象的音高曲線變成看得見、會動的畫面。範例用同一個音 ㄅㄚ 的四聲（八 ㄅㄚ／拔 ㄅㄚˊ／把 ㄅㄚˇ／爸 ㄅㄚˋ，其中「把」與拼讀卡一致），都是孩子熟悉的字。三張卡示範①認識四聲調（四道山坡並排）②聽聲調·答對（聽一個聲音→點對應的山坡，正解綠圈打勾＋山羊登頂歡呼）③答錯·溫柔提示（點錯只輕輕晃、不懲罰，柔和指向正解邀請再聽一次）。聲波、播放鈕、彈跳、晃動、指向與星火全部重用既有動效，零新增動畫。bopomofo
這組元件補上前面遊戲一直缺的聲調維度：先前的聽辨／讀選練的是「哪個符號」，而對雙語孩子真正的難點是聲調。把四聲畫成野山羊走的山坡（一聲平頂、二聲上坡、三聲下谷再上、四聲下坡）讓孩子用「往哪邊走」記住音高走向，比抽象的調號更直覺，也讓五隻動物裡擅長爬山的野山羊首次在遊戲中當主角。答錯沿用既有「只輕晃、不懲罰、柔和指向正解」範式（基礎文件 §4）。後續整合：用真實音檔播放題目聲音、Firestore 記錄各聲調的聽辨正確率，並可擴充到更多音節（如 ㄇㄚ 媽麻馬罵）。
符號超大、文字其次；介面文字給家長看，互動給孩子用。
圓潤手繪感；互動元件最小觸控區 64px，容忍幼兒誤觸。
輕柔漂浮、彈跳、搖擺、脈動；開啟系統「減少動態」時全部自動靜止。