ROBOT LOBBY UI · FOUNDATIONS v4.3
VYIN AI · ROBOT LOBBY UI · FOUNDATIONS & COMPONENTS

Vyin AI 機器人互動介面 · 設計系統

Campaign《歡迎光臨魔法秘境》· Center 1280×800 · Side 1080×1920（面板 1920×1080 直立）· Kebbi 1024×600 · 深色模式 · 閱讀距離 1.5–3 m。這一頁是 token 與元件的規格來源；完整畫面在 screens.html，互動原型在 prototype.html。所有 kiosk 元件都以實際像素書寫、縮小展示。

圖例：DERIVED README 沒寫、從參考稿取比例對齊尺標而來 · PROPOSAL 提案，定案前可調 · RAW 不在色階內的原始值 · TBD 待硬體或工程確認。

tokens.css components.css README（嵌入說明）
00Chrome levels · 介面層級

畫面上「不是內容」的東西（logo、收音狀態、日期時間、對話框）叫 chrome。每個狀態只會落在三個層級之一， 由狀態決定、不由畫面決定。層級切換用 200ms 淡入淡出，一個任務裡只切一次進、一次出。

層級留什麼拿掉什麼用在版型
FULL · 完整logo、收音狀態、日期時間、AI 區、safe area、對話框—所有可以自由對話的狀態：對話畫面、Stop Idle、Review、Touch Panel、全部例外狀態--dialog · --cover
AMBIENT · 氛圍logo、收音狀態、AI 字幕（若有）日期時間、對話框內容主導、介面退到最少：Moving、Welcome / Exit Standby、Trailer 播放--standby · --cover-strong · --media
FOCUS · 專注AI 的一句指示、任務內容、campaign 外框、指令膠囊（辨識到指令時）、重要指令的提示一行logo、收音狀態、日期時間、電影 logo、對話框拍照 Position / Countdown / Capture / Success--media --camera
進入 FOCUS 的判準 · 四條都要成立

1. 使用者正在做一件有明確結束事件的單一任務（不綁時間長短）。
2. 使用者的注意力必須在畫面以外的實體上：鏡頭、自己的站位。
3. 收音是 COMMAND 或 OFF，不是開放對話，「可以跟我說話」此時沒有意義。
4. 任務結束後一定回到 FULL。拍照 Success 結束進 Review 就把頂列拿回來。
Trailer（A06）不符合第 1、3 條，所以是 AMBIENT 不是 FOCUS。

觸控規則 · 位置就是身份

AI 在上、使用者在下（README）。推到觸控：可以按的東西一律住在底部對話框那一格（x 212 · 856×96 · bottom 44）。 語音時它是 .kv-pill，觸控時它是 .kv-actions。safe area 只放資訊，卡片永遠不可按，所以使用者不用猜哪張能按， 工程端也只有一個觸控槽位要管。主要選項在最右、Grow 外框、一屏一個。按下回饋：填色升一階 + 縮 97%、120ms。

FOCUS 的配套規則

收音狀態由 Kebbi 臉下的光條承接。光條不可用時的 fallback：右上角只放 18px 收音光點、不帶文字（.kv-mic--dot，見 T2c）。
可說的指令只標「重要且常用」的那一句，用 .kv-hint 放在底部；不重要的不標。辨識到指令時由指令膠囊取代提示。
例外狀態（網路、太吵、逾時）一律打斷任務、回到 FULL，因為 FOCUS 沒有 AI 區可以放狀態說明。
品牌：FOCUS 畫面不放任何品牌，Vyin 與電影 logo 都不放，避免只剩其中一方。

01Color · 深色模式

錨定 Tailwind neutral，只有深色模式。同一時間只有一方是「亮」的：誰在說話，誰的文字就是 Neutral 50；另一方退為灰階。錯誤狀態不用紅色，公開螢幕上用 Warning。

SURFACE · BORDER
surface / base螢幕背景 · 對話開始後整屏此色
#0A0A0A · --kiosk-surface-base
surface / raised卡片、對話框、海報欄
#171717 · --kiosk-surface-raised
border / default2px 內框、進度軌、CTA 底、被打斷的未說字
#262626 · --kiosk-border
whiteQR 白底板
#FFFFFF · --kiosk-white
TEXT
text / primary主文字、AI 已說出的字
#FAFAFA · --kiosk-text-primary
text / muted-light媒體上的次要字、QR 卡標題
#D4D4D4 · --kiosk-text-muted-light
text / secondary卡片標籤、使用者上一句、meta
#A3A3A3 · --kiosk-text-secondary
text / tertiary對話框 placeholder、提示
#737373 · --kiosk-text-tertiary
text / disabled · AI unspokenAI 未說出的字、OFF 光點、灰階波形
#525252 · --kiosk-text-disabled
SYSTEM · ACCENT
success✓ 指令確認、成功燈
#10B981 · --kiosk-success
warningCOMMAND 收音狀態、網路狀態
#F59E0B · --kiosk-warning
danger保留，公開螢幕不使用
#EF4444 · --kiosk-danger
accent violet / amber / cyan保留給 campaign 以外的產品場景，此 Mode 不使用
#8B5CF6 / #FB923C / #22D3EE
CAMPAIGN LAYER · 每部片可換
--kiosk-camp小字 eyebrow，例如「現正熱映」
oklch(0.84 0.12 68)
--kiosk-camp-bg素材後方底色
oklch(0.37 0.07 292)

Campaign 色只碰 eyebrow 與素材底，永遠不碰 CTA 與 AI 狀態。換片時只換這兩個變數。目前值量自《歡迎光臨魔法秘境》正式海報：底色 = 漂浮系列海報平均色（深紫），eyebrow = 片名發光的色相、亮度拉到可讀。

RAW · 不在色階內 RAW
--kiosk-raw-touch-border觸控卡、指令提示、Toast 的 inset 內框
#333333
--kiosk-raw-camera-bg相機預覽佔位底色
#2A2A2A

參考稿用到但不在 neutral 色階裡。原樣保留，待決定是否收斂到 #262626 / #171717。

OVERLAYS
--kiosk-overlay-mediargba(23,23,23,.8) · 媒體上的狀態 chip 底
--kiosk-overlay-pillrgba(23,23,23,.92) · 指令提示、Toast 底
--kiosk-dimrgba(10,10,10,.62) · 聆聽時壓在底圖上
--kiosk-scrim-top / -bottom180deg / 0deg，.9 → 0，高 300（tall 360）
--kiosk-scrim-cover90deg，#0A0A0A 34% → .7 52% → 0 78% · P01、A03 海報滿版時用
02Gradient · Grow（唯一的漸層）

Grow 只做外框、光點、細線、波形、Kebbi 眼睛。不整面填色、不放在正文後面、不做按鈕填色， 一屏最多 2 處，不放在海報區內。

--kiosk-grow
#1F6FE0 · 0%
#19E27C · 28%
#F4FBD0 · 52%
#FFB05A · 74%
#FF6A2B · 100% 
--kiosk-grow: linear-gradient(55deg, #1F6FE0 0%, #19E27C 28%, #F4FBD0 52%, #FFB05A 74%, #FF6A2B 100%);

/* 外框技法：雙背景 padding-box / border-box */
border: 4px solid transparent;
background: linear-gradient(#171717, #171717) padding-box, var(--kiosk-grow) border-box;
CTA 外框開始拍照
聆聽框 / 相框
AI 光點
Vyin 正在思考
進度 / 細線
波形
收音光點
可以跟我說話
G允許的 Grow 用途外框寬度：CTA / 對話框 / 卡片 4px · 照片 6px · 相機環 10px。
03Glow · 三級光暈

藍色外光的層級跟資訊層級一致：CTA 最亮（一屏只有一個）、聆聽框次之（暫時態）、卡片最弱（內容層）。 README 只列了前兩級，第三級 DERIVED 自參考稿 8 處相同數值。

--kiosk-glow-cta · 0 0 40px / .5掃描購票
--kiosk-glow-listen · 0 0 56px / .4
--kiosk-glow-card · 0 0 40px / .35（QR 卡）
--kiosk-halo-full / -command · 0 0 0 6px
--kiosk-orb-shadow · 8px 環 + 24px 暖光
GL光暈階全部只用 #1F6FE0 藍做外光；光點的環用 #19E27C 綠、#F59E0B 琥珀。
04Typography

Display / 數字：Unbounded 600 / 800（暫代，正式 wordmark 字體 TBD）。UI / 中文：Noto Sans TC 400 / 500 / 700 / 900。標註：IBM Plex Mono，只用在佔位圖與格線標籤，不是產品 UI。螢幕上最小字級 24px（1.5–3 m 閱讀距離）。下方以 1920 尺度實際渲染、縮小 50% 展示。

--kiosk-type-logoUnbounded 800 · 34px
Vyin AI
--kiosk-type-clockUnbounded 600 · 30px
20:16
--kiosk-type-dateNoto Sans TC 500 · 28px · secondary
9月29日 週二
--kiosk-type-mic500 · 24px · secondary · 最小字級
可以跟我說話
--kiosk-type-transcript700 · 72px / 1.5 · 108px 一行 · 最多 2 行
今天晚上還有兩場：19:10 IMAX，和 21:30 的中文版。
--kiosk-type-caption700 · 56px / 1.5 · 媒體上加 text-shadow
站進框框裡。
--kiosk-type-user-live500 · 56px · 聆聽中的即時逐字稿
今天有什麼場次
--kiosk-type-user-pill500 · 44px · tertiary · 對話框 placeholder
直接說話就可以
--kiosk-type-card-label500 · 30px · secondary
IMAX
--kiosk-type-card-value700 · 72px / 1.3
繼續聊
--kiosk-type-card-value-md700 · 56px / 1.3 · 建議卡 / 確認卡
是，就是這個
--kiosk-type-card-numUnbounded 800 · 128px / 1
19:10
--kiosk-type-touch-value700 · 80px / 1.2 · 觸控卡
洗手間
--kiosk-type-chip500 · 40px
可以看預告嗎？
--kiosk-type-cta / -cta-lg700 · 34px / 56px
開始拍照 開始拍照
--kiosk-type-status500 · 30px · secondary · 思考 / 重新連線
Vyin 正在思考
--kiosk-type-cmd / -tag700 · 44px ／ 500 · 24px
等一下 指令
--kiosk-type-toast / -cmd-hint500 · 36px
移動中，到下一站就能跟我聊
--kiosk-type-countdownUnbounded 800 · 400px / 1
3
--kiosk-type-hero-xl900 · 180px / 1.1 · Exit 道別PROPOSAL
謝謝觀賞
--kiosk-type-hero-lg900 · 150px / 1.1 · Welcome 片名PROPOSAL
歡迎光臨魔法秘境
--kiosk-type-hero-sub / -meta500 · 48px / 1.4 ／ 500 · 40pxPROPOSAL
魔法秘境的冒險，還沒結束。
19:10 場次 · 中文版
--kiosk-type-side-title / -meta700 · 88 / 1.2 ／ 400 · 34PROPOSAL · Side 劇照牆標題（S-W）
歡迎光臨魔法秘境
跟著中間螢幕的角色一起動！
TType roles橘色底線的是 README 字級表沒列、由參考稿收斂的提案。定案前可調，定案後移入正式表。
05Radius · Spacing
RADIUS
pill · 999
card · 48
plate · 24
plate-lg · 28
tag · 8
camera · 56
tile · 40 D
--kiosk-radius-pill999px對話框、CTA、chip、指令膠囊、Toast、倒數膠囊
--kiosk-radius-card48px卡片、QR 卡、照片、取景框
--kiosk-radius-plate / -lg24 / 28pxQR 白底板（400 卡 / 照片頁）
--kiosk-radius-tag8px小標籤
--kiosk-radius-camera56px相機 campaign 外環
--kiosk-radius-screen32px裝置外框，只用在參考圖
SPACING · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
4
8
12
16
24
32
48
64
96
--kiosk-margin96px螢幕左右安全邊
--kiosk-card-gap24pxsafe area 內卡片間距
--kiosk-card-pad-y / -x48 / 52px卡片內距
--kiosk-pill-pad-x64px對話框左右內距
--kiosk-space-1 … -94 → 96其餘間距一律取尺標上的值
06Layout · Center 1280×800 格線

所有對話畫面都照這套格線排版，規則只有一條（2026-10-14）：內容區 = 800 − 頂列 − AI 區（行數 × 72 + 32）− 底部格（依內容：對話框 84 / chips 排 68 / 無 0，底距 44，間距 32）。 AI 1 / 2 / 3 行 × 有底部格 → 388 / 316 / 244，無 → 504 / 432 / 360；觸控模式（chips 排）2 行 360、3 行 288。三行 + 對話框放不下 268 的卡片，所以三行只用在觸控模式或純文字回答。頂列的「Show grid」可以在下方所有畫面疊上這些線。

TOP BAR · y 44–76
AI 逐字稿 · y 120 · 1152×144 · 2 行
SAFE AREA · y 296 · 1152×316
USER · x 212 · 856×84/96 · bottom 44
可以跟我說話
9月29日 週二20:16
今天晚上還有兩場：19:10 IMAX，和 21:30 的中文版。
還想知道什麼，直接問我
L1標準對話畫面AI 2 行 · Safe Area 1152×316 · 對話框顯示。
COORDINATES · 1280×800
區塊xyw × h
頂列64441152 × 32
頂列（有倒數膠囊）D64361152 × 48
AI 逐字稿641201152 × 144
AI 逐字稿（封面）64120732 × 144
思考 / 重新連線列 D64288— × 48
Safe Area642961152 × 316
Safe Area · AI 1 行642241152 × 388
Safe Area · 對話框隱藏642961152 × 432
Safe Area · 1 行 + 隱藏642241152 × 504
AI 逐字稿 · 3 行 D641201152 × 216
Safe Area · 觸控模式（2 行 + chips 排）D642961152 × 360
Safe Area · 觸控模式 3 行 D643681152 × 288
Chips 排（觸控模式的底部格）D212bottom 44856 × 68
User 對話框212bottom 44856 × 84 / 96
User 對話框 · Photo idle（海報滿版）64bottom 44— × 84
底部動作列（觸控）212bottom 44856 × 96
指令膠囊400bottom 44480 × 76
Toast Dcenterbottom 48auto
媒體字幕641041152 × 56

全螢幕媒體（預告、相機）：媒體填滿 1280×800，上下各一層 300px 遮罩；AI 以 56px 字幕出現在上方遮罩，3 秒後淡出。

06bTemplates · 四種畫面骨架

34 張 Center 畫面只有四種骨架。.kv-screen--dialog / --media / --cover / --standby 會把直接子元件依 class 自動落到格線，不必再寫 kv-at-*；遮罩與光暈由版型的 ::before / ::after 產生。--dialog 的底（2026-10-14）：放一個 .kv-art，圖是首頁輪播進對話那一刻的那張（JS：進對話就凍住，回首頁才繼續），自動壓暗 + 模糊 + 遮罩。狀態修飾：--one-line（AI 1 行）、--countdown（頂列倒數、對話框隱藏）、 --no-pill（對話框隱藏）、--camera（FOCUS 層級：無頂列、字幕上移）、--cover-strong（Moving 的深遮罩）、--scrim-tall（預告上遮罩 360）、--bg-light（亮色底圖：日期時間切深色）。 2026-10-14 新增：--three-line（AI 3 行）、--touch（純觸控模式：對話框拿掉、chips 橫排住底部格、卡片與 QR 撐滿）、--notice（A09 倒數疊在任何畫面：只換頂列右側）。

AI
SAFE AREA
USER
可以跟我說話
9月29日 週二20:16
今天晚上還有兩場：19:10 IMAX，和 21:30 的中文版。
IMAX · 英文版19:10
中文版21:30
掃描購票
還想知道什麼，直接問我
T1--dialog頂列 + AI + safe area + 對話框。子元件：.kv-topbar .kv-transcript .kv-status .kv-safe / .kv-chips .kv-pill / .kv-actions .kv-cmd .kv-toast .kv-progress
ACTIONS · 同對話框那格
10 秒後結束對話
還在嗎？
沒有的話，我就先回到首頁囉。
結束對話
繼續聊
T1b--dialog --countdown頂列上移 y 52、對話框隱藏；有 .kv-actions 時動作列住進同一格，safe area 不延伸。決策型主要按鈕用 CTA 樣式。
TRAILER · FULL-BLEED
可以跟我說話
這是《歡迎光臨魔法秘境》的預告，想知道場次隨時問我。
T2--media滿版 .kv-art + 上下 300px 遮罩（::before / ::after）+ 56px 字幕（--fade：停 3s 後淡出，捲到會重播）+ 媒體版頂列（logo 陰影、mic 膠囊自動套用）。
暫停收音
9月29日 週二20:16
最近的是 19:10 IMAX 這場，21:30 是英文版。
還想問什麼，點下面的。
歡迎光臨魔法秘境最近場次
16:40中文版
19:10IMAX · 英文版
21:30英文版
活動好康
今天有什麼場次？有什麼活動？幫我拍一張
T2b--dialog --touch --three-line純觸控模式：對話框拿掉、chips 橫排住進底部那格、AI 可到三行、卡片與 QR 撐滿 288 的內容區（2 行時 360）。觸控模式（TP01b 起）的畫面都用這個；A08 / A02t 自 v4.3 退場。
可以跟我說話
9月29日 週二20:16
2:40 後去影廳迎賓
兩個好康給你：預購送海報、合照換斗篷毯，詳情都在 QR 裡！
預購禮 · 11/12 起預購票送海報
同框禮 · 11/26 起合照換斗篷毯
活動好康
還想知道什麼，直接問我
T2c--dialog --noticeA09 預告收單：頂列右側日期時間換成倒數膠囊，其他都不動，可疊在任何畫面；歸零時對話還在 → E08。
LIVE CAMERA PREVIEW
看鏡頭！
3
✓等一下指令
T2b--media --camera · FOCUS頂列隱藏、字幕上移到 y 64 DERIVED；相機環、取景框、倒數數字、指令膠囊直接放進來。辨識到「等一下」時指令膠囊取代提示行。
LIVE CAMERA PREVIEW
看鏡頭！
3
說「等一下」可以暫停
只聽指令
T2cFOCUS · 提示行 + 光條 fallback.kv-hint 底部置中一句重要指令 DERIVED；Kebbi 光條不可用時右上角放 .kv-mic--dot（只有光點）。
CAMPAIGN KEY ART · FULL-BLEED
可以跟我說話
9月29日 週二20:16
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
今天有什麼場次？可以看預告嗎？有優惠嗎？
直接說話就可以
T3--coverStop Idle。滿版 key art + 左側 cover 遮罩（::before）+ AI 字自動收成 1100 寬 + chips。
暫停收音
歡迎進場 歡迎光臨魔法秘境 19:10 場次 · 中文版
T4--standbyP09 / A07 謝謝卡（原 Welcome）。去字 key art 底（.kv-art：焦點、縮放、壓暗、暗角四個值在 --kiosk-keyart-*）+ 置中 .kv-hero。觸發時 eyebrow 換 --active 整句亮起、.kv-line--wide 960 加綠光。
07Components

每個元件用 kv- class 定義長相，用 kv-at- class 定義在格線上的位置。這裡只展示長相， 所以元件並排放在 1920 寬的深色舞台上；放進 .kv-screen 時加上對應的 kv-at-* 就會落到正確位置。 Kebbi 表情組本階段不做。

.kv-grow-ring · --kv-ring-w 4 / 6 / 10 · --kv-ring-fill
.kv-dot · --full / --command / --off / --orb / --side
.kv-eyebrow · campaign 色，唯一允許（目前無畫面使用，保留給無字 key art）現正熱映
.kv-line / --wide
.kv-route · Moving 站點
移動中 · 前往 B 點
.kv-hero · 置中 ｜ --left（縮小示意）
歡迎光臨！祝你有個魔法般的夜晚歡迎光臨魔法秘境19:10 場次 · 中文版
C00Primitives被多個元件共用的最小單位。Grow 外框有 7 個元件共用同一段 CSS；光點 5 種都是同一個 .kv-dot。
.kv-topbar · 標準：logo + 收音狀態 ｜ 日期 + 時間
可以跟我說話
9月29日 週二20:16
.kv-topbar--countdown · 系統倒數取代日期時間，底部對話框隱藏
暫停收音
8 秒後回到首頁
壓在媒體上：logo 加陰影、收音狀態包膠囊，右側不放日期時間
只聽指令
C01Top bar.kv-topbar .kv-logo .kv-date .kv-clock · 位置 .kv-at-topbar（有倒數時 --countdown）
--full
可以跟我說話
--command
只聽指令
--off
暫停收音
--on-media
可以跟我說話
C02Mic status chip.kv-mic · Layer 1 常駐；三態互斥；Kebbi 光條同步。
思考 · 延遲 > 0.8s 才顯示
Vyin 正在思考
重新連線 · 同一樣式
重新連線中
.kv-progress · 拆句進度 3 段
C03Thinking · Progress.kv-status .kv-orb .kv-progress · 位置 .kv-at-status / .kv-at-progress
Karaoke · 已說 primary、未說 disabled · 隨 TTS 點亮
今天晚上還有兩場：19:10 IMAX，和 21:30 的中文版。要幫你出訂票 QR 嗎？
使用者打斷 · 未說的字 300ms 內褪到 border 色
今天晚上還有兩場：19:10 IMAX，和 21:30 的中文版。要幫你出訂票 QR 嗎？
第二行是提示 · secondary
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
C04AI transcript.kv-transcript · 沒有標籤、沒有頭像，位置就是身份 · 最多 2 行，超過由 AI 拆句 · 位置 .kv-at-ai（封面 --cover 1100 寬）
Idle · 1280×128 · placeholder
直接說話就可以
--listening · 1280×144 · Grow 外框 + 光暈 · 即時逐字稿 + 游標 + 波形
今天有什麼場次
--sent · 已送出（v4.1）· 同聆聽的環與光暈 · 顯示剛剛那句或點的那顆 · 沒有游標與波形 · 右側狀態字 · 用在 P01b 進場那 0.35s「正在啟動」（v4.3 起 P01a 喚醒中不出對話框）/ A04 Vyin 正在思考 / E05 重新連線中
今天有什麼場次
Vyin 正在思考
說完後 · placeholder 換句（只有 Attraction 顯示）
還想知道什麼，直接問我
Photo 待命（P01，v4.2）沒有對話框、沒有 CTA：整片螢幕就是按鈕，見 C21。點了之後對話框直接以 --sent「開啟魔法對話 · 正在啟動」出現，腦就緒再用 .is-settling 落定成下面這個平常態
開啟魔法對話
正在啟動
直接說，我在聽
太吵 · placeholder + 灰階波形（E06）
聽不太清楚…
C05User dialog pill.kv-pill .kv-wave .kv-caret · 沒有「你」標籤 · 300ms 內從底部升起 · 位置 .kv-at-pill · Photo 待命 P01 沒有對話框（整片螢幕是按鈕，C21）· 落定過渡 .is-settling（v4.2，只在 .kv-screen--start 內）：--sent → 平常態 450ms，高度 96 → 84、光暈與 Grow 環淡掉（兩組 box-shadow 結構一樣才能互相過渡）、「正在啟動」淡出、placeholder「直接說，我在聽」淡入；最後一格加 .is-nt 換回平常 class 不過渡。時序在 js/start.js 的 pillListen
--shake · 太吵（E06）· 水平抖 600ms 一次 · 點對話框重播
聽不太清楚…
C05bUser pill · 太吵抖一下.kv-pill--shake：觸發 = E06 太吵（README「E06 太吵」台詞列：「這裡有點吵，可以靠近一點，再說一次嗎？」），收到斷斷續續的字時對話框水平抖 600ms（kv-shake-s），Kebbi 同時 .kv-face--squint 瞇眼抖，1.2s 後兩個 class 一起移除（js/moments.js squint、js/film-a3-misc.js）。規則在 css/components.css「09 太吵 E06」段；重播要先移除 class、強制 reflow 再加回。
.kv-btn · 34px開始拍照
.kv-btn--lg · 56px掃描購票
C06CTA button底 #262626 + 4px Grow 外框 + CTA 光暈 · 一屏只有一個；唯一例外是 Photo 延伸內容的 3 張 QR 卡。
.kv-chips · 最多 3 顆，直排（語音模式在內容區）· 最後一顆固定 .kv-chip--photo「幫我拍一張」
今天有什麼場次？有什麼活動？幫我拍一張
C07Suggestion chip.kv-chip · 40/500 · padding 28 48 · 內框 2px。v4.1 出現規則：語音模式只在內容區沒有卡片時出（跟卡片同一格、二擇一）；觸控模式一直在底部格；最後一顆固定 .kv-chip--photo「幫我拍一張」（點了 = 說「可以幫我拍嗎」→ PICK；畫面已有拍照 CTA 或這組已拍過就不放）；觀眾一開口就收；E11 收尾模式不出；P01b 開場與觸控首頁 TP01b 不出（v4.2，五件事就是大卡 C22 + 能力列 C23）。完整規則在 README 互動規則。
Info card · 文字值 / 數字值 · 只在資訊比 AI 說的多時出現 · QR 永遠最右
IMAX · 英文版19:10
中文版21:30
掃描購票
--outlined 建議卡（E03）｜ 文字值
試著問今天有什麼場次？
試著問有什麼優惠？
位置洗手間在電梯旁邊
卡片永遠不可按 · 可按的在底部動作列（C16）
C08Cards.kv-card · flex:1 · 48 / 48 52 · 標籤上、值下 · 只在資訊比 AI 說的多時才出現，且永遠不可按 · 位置：放進 .kv-safe 再加 .kv-at-safe
.kv-qr 268×268 ｜ --active（唯一 CTA）｜ --lg 292（Exit）｜ --xl 照片 Review 頁
威秀官網
掃描購票
看幕後花絮
掃 QR 領取照片
C09QR card固定尺寸，永不拉伸 · 永遠是 safe-area 最右 · QR 碼 208 / 240 / 320 · 白板 padding 16 / 16 / 20 · 正式 QR 以 <img> 取代 .kv-qr__code
觸控規則：可以按的一律住在底部對話框那一格。語音 = .kv-pill，觸控 = .kv-actions。safe area 的卡片永遠不可按。 三顆 · 類別前綴
位置洗手間
這部電影片長
位置販賣部
兩顆 · 決策型：主要在右用 CTA 按鈕（Grow 外框 + 光暈）
結束對話
繼續聊
按下中 · 填色升一階 + 縮 97% · 120ms
位置洗手間
這部電影片長
位置販賣部
對照 · 資訊卡（矩形、不可按）vs 動作列（膠囊、可按）
IMAX · 英文版19:10
位置洗手間在電梯旁邊
結束對話
繼續聊
C16Action bar.kv-actions 1280×144 · 按鈕等寬 · 填 #262626 + 2px #525252 內框 · 44/700 · 位置：所有版型的直接子元件都自動落到對話框那格（不受 --countdown 隱藏）· 只有一顆時加 --single：置中、寬一半、Grow 外框（E10「我再試一次」；P01b 自 v4.2 起沒有 CTA，拍照入口是大卡 C22）
--ok · 辨識到指令 · ✓ 立刻執行，不思考
✓等一下指令
非指令 · 一句提示 + 列出可說的指令 · 1.5s 自動收
拍完照再聊喔可以說「等一下」「重來」
C10Command pill.kv-cmd · 720×112 · COMMAND 模式 · 位置 .kv-at-cmd
.kv-toast · OFF 模式 · 3s
移動中，到 B 點就能跟我聊
.kv-countdown · 環用 --kv-progress 0–100
10 秒後結束對話
24 秒後回到首頁
C11Toast · Countdown pill.kv-toast 位置 .kv-at-toast · .kv-countdown 放在頂列右側取代日期時間
LIVE CAMERA · 1280×800
3
看鏡頭！
C12Camera · 取景框.kv-screen--camera：.kv-camera__frame 灰框 · .kv-camera__mask 框外壓暗（box-shadow）· .kv-camera__guide Grow 環，比例跟成品照片格一樣 4:3（--kiosk-hole-ratio、--kiosk-guide-w 750）· .kv-camera__digit 倒數 · .kv-camera__overlay（加 .is-overlay 才出現）疊照片框，裁到照片格：只疊明確的大佔位（連拍第一張的比莉；單張與連拍第二張不疊），動態框是透明影片 .kv-camera__overlay-video，影片真的在播（.kv-vid-on）才藏靜態圖；某款要裁掉擠進格子的小素材用 --kv-ov-clip（js/frames.js 的 viewfinderKeepX）。.is-strip-2 裁到下格、--single 裁到單張那格。
TOP BAR · 倒數版 y 36
AI · 1 行
SAFE AREA · y 224 · 1152×504
可以跟我說話
24 秒後回到首頁
拍好了！掃 QR 領取照片和影片。
PHOTO 16:9 · 812×456
掃 QR 領取照片
C13Photo frame（舊版，v4.0 起 P06 改用 C18 / C20）.kv-photo 600×340（AI 1 行）／ --lg 812×456（對話框隱藏）· 4px Grow 外框 · 圓角 32 · 照片以 <img> 放進框內
18:55歡迎光臨魔法秘境中文版
19:00示意片 A英文版
19:10歡迎光臨魔法秘境IMAX英文版
明天 · 11月29日
10:30歡迎光臨魔法秘境IMAX英文版
今天 · 共 14 場
上一頁下一頁
C26Schedule · 場次表.kv-schedule（v4.2，設計師 2026-10-27 選時刻表）：沒指定片名問場次時的回答（A05t），放在 AI 一行版的 safe area（.kv-safe--schedule 1152×388）。__panel 一頁 5 列 __row（__time / __film，本片 .is-camp 活動色 / __tags；第 1 頁置頂 .kv-schedule__row--pin 放本片下一場（暖色底 + 片名活動色，不另外標籤），今天沒有就放明天第一場，時間前面寫「明天 10:30」（__when）； 版本標籤 IMAX・中文版・英文版），不放剩位與廳別；整列可點（右端箭頭、按下 .is-pressed）= （v4.3.4 退場：場次是最後一頁、不放 QR；原 A05p 活動好康卡 + QR）；想看單一部片的場次用說的 → A05 單片卡；表格頁不放 QR。高 420、一頁 5 場、每列 66；置頂列下面不畫線。__day 明天分隔（白色淡字）；__foot 範圍 + __prev「← 上一頁」（第 2 頁起才出現，純文字淡色）+ 頁點 + __next（最後一頁字換「回第一頁」）。圖上把幾種狀態放在一起示意。
歡迎光臨魔法秘境下一場 18:55中文版
示意片 A下一場 19:00英文版
示意片 B：很長的片名會換行顯示下一場 19:20中文版
示意片 C下一場 19:45
今天有 7 部片
下一頁
反派 · 女巫女王莎莉絲特女王魔法秘境的統治者，為了永遠保有王位，不惜一切代價。
比莉藏著魔法天賦的衝動少女
莎莉絲特女王想永遠統治魔法秘境的女王
嗶夫隱居避世的三眼貓
劇情比莉發現自己藏著魔法天賦，和謹慎的媽媽愛麗絲一起被帶進女巫的魔法秘境，揭開家族塵封的秘密。
WALT DISNEY ANIMATION STUDIOS65th迪士尼第 65 部動畫長片
上映11/26 週四全台上映
導演Fawn Veerasunthorn
Jason Hand《星願》共同導演
回首頁選別部片再拍一次
取消
C27Touch · 觸控模式v4.2（設計師 2026-10-28）：後台人工切換的正式觸控模式（規格頁 Touch 區、prototype-touch.html）。由上到下：.kv-films 選電影（一頁 4 張左右一排、不放海報、翻頁同場次表 __foot；.kv-film--pin 本片固定第一張）· 新片資訊四種版型（兩種模式共用，腦依回答選一個、不是分頁）：.kv-info--character 單一角色、--cast 角色群像、--plot 劇情、--facts 幕後（.kv-facts__hero 大數字 + __list 兩則；不放背景、不用活動色，只用字級排） · .kv-tnav 底部導覽（__back 往上一層的文字鍵，跟回首頁並排；[data-act=retake] 在 .is-wrapup 藏）· .kv-cam-cancel（站位 / 倒數右上角「取消」，v4.2 起語音模式也有）。那部片的場次直接用 C26 場次表。版面：.kv-screen--touch 不放對話框、藏收音膠囊，內容區 AI 1 行 432 / 2 行 360。畫面片段與示意資料在 js/touch-data.js。
1 一張 · 蓄力 · 靜態
1 一張 · 蓄力 · 動態
3 一張 · 爆米花鍋 · 動態
2 兩張 · 蓄力＋漂浮 · 動態
4 兩張 · 歡呼＋爆米花 · 動態
C18Story · 限動框成品.kv-story --single / --strip（寬度用 --story-w，9:16）· 三層由下往上：__bg 背景 → __slot 照片格（% 座標 --sx --sy --sw --sh）→ __frame 照片框圖層。動態版再疊一層 video.kv-story__frame--video（透明影片 loop），.is-live 時換成它、照片格播「短影片」，影片真的在播（.kv-vid-on）才藏靜態框。v5 照片框（設計師 2026-10-28）：款式先固定 B 紫色（設計師 2026-11-03：照片框已定案、但不是 A / B / C 任一款、偏 B；最終素材之後給，到時整組換掉。A / C 素材與切換都已拿掉，要看回 git 歷史 v4.3 的 frames.js）× 四個版型（一張 1 蓄力、3 爆米花鍋；兩張 2 蓄力＋漂浮、4 鍋中歡呼＋爆米花），每格裡都有角色在動；單張、連拍每組各自隨機抽一款、跟上一組不同。資料在 js/frames.js（API：draw / apply / live / hold / playIn），素材 assets/campaign/frames/v5-{A,B,C}{1–4}/。
可以跟我說話
10月19日 週一16:20
要拍一張大合照，還是兩張連拍？
一張大合照拍 1 次
照片 + 短影片
→
兩張連拍連拍 2 次
照片 + 短影片
→
選擇即同意：照片與短影片僅用於本次活動，24 小時後自動刪除 首頁
直接說，我在聽
C19Pick card · 選版型.kv-pick 兩張 .kv-pick-card（標題 + 說明兩行「拍 N 次／照片 + 短影片」+ .kv-tap-arrow）· 卡片裡就是縮小的 .kv-story，照片格黑底、不放照片（看清楚版型本身），框播這組抽到的動態版 · 置底 .kv-hint--legal 同意拍照小字（只放這頁）· 按下 .is-pressed。
可以跟我說話
10月19日 週一16:20
拍好了！掃 QR
領照片和影片。
照片與短影片僅用於本次活動，24 小時後自動刪除
掃 QR 拿照片和影片
C20Review · 拍好了.kv-screen--review2 + .kv-review2（--strip 連拍擺法）：左欄 AI 兩行、右側 .kv-story 微傾 + .kv-review2__qr 疊在前面（.is-arrive 進場）· 置底 .kv-hint--legal 保留時間 · 限動框只放動態版：短影片 + 動態框整支 loop（v4.2 拿掉快門點定格；P05b 拍立得從快門那一格開始播） · E10 用 .kv-review2--fail（縮小擺正、照片格 loading、沒 QR）。
暫停收音
10月19日 週一16:20
照片和影片還在傳，
再等我一下。
照片與短影片僅用於本次活動，24 小時後自動刪除
上傳中 · 第 2 次
掃 QR 拿照片和影片
我再試一次
C20bReview · 照片和影片還在傳（E10）.kv-review2--fail（加在 .kv-review2 上）：觸發 = photo.upload.fail（README 事件表「photo.upload.fail（E10）」列、台詞列「E10 照片和影片還在傳」；重試 2 次仍失敗回 P02）。限動框傾 +2°、縮 86%、靠右貼頂列日期；.kv-review2__qr 不出；照片格的 <img> 藏起、換 .kv-status（光點 + 「上傳中 · 第 n 次」，不顯示失敗原因）；畫面加 .is-actions 讓底部動作列「我再試一次」壓過法務小字。傳成功只要拿掉 --fail：框滑回、放大、傾斜 ±4°（700ms），QR 進場（js/film-a2-photo-system.js）。規則在 css/components.css「E10 照片還在傳 / 上傳失敗」段。
啟動中
10月23日 週五14:32
DISNEY《HEXED》· 11.26 上映
歡迎光臨魔法秘境
點擊任一處，開啟魔法對話
C21Start idle · 待命歡迎（P01）.kv-screen--start.is-idle：輪播 key art + 上下壓暗 --kiosk-scrim-start · .kv-start-frame 全螢幕 Grow 外框（inset 20、圓角 40、呼吸 3.2s）——例外（設計師 2026-10-23 同意）：整片螢幕就是按鈕，所以環包整個畫面，只在 P01 用 · .kv-welcome 活動 eyebrow（DS .kv-eyebrow）+ __title 歡迎大標 --kiosk-type-welcome 900/112 一行置中、固定字（不跟 Kebbi 的話換） · .kv-start-hint 底部 --kiosk-type-start-hint 700/36「點擊任一處，開啟魔法對話」 · .kv-idle-spark 一顆 10px 小火光（同 .kv-fire--big 的樣子，沒有十字、沒有圓框）在中間跑來跑去、拖小火星尾巴（js/start.js 的 idleLoop） · 不收音：頂列整個不放（opacity: 0，點了才淡入）、沒有對話框。點任何地方 → C25 火光 → .is-cast。
可以跟我說話
10月23日 週五14:32
01 · 活動限定限動框
拍照留念
→拍好掃 QR，合照換斗篷毯
C22Capability hero · 拍照大卡（P01b）.kv-cap-hero 736×392，left 64 / top 232，這次活動的主角 · 不透明底的 Grow 外框走 DS 雙背景做法（padding --kiosk-grow-border 4px、底 --kiosk-grow、光暈 --kiosk-glow-cta，同 .kv-photo）· __inner 圓角 --kiosk-radius-card − 4 · 劇照 object-position: 60% 45% + __scrim 往右壓暗（左 .9 → 75% 透明）· __body 內距 40：eyebrow「01 · 活動限定限動框」上、標題 __title --kiosk-type-cap-hero 900/80 + __go（DS .kv-tap-arrow 白色實心圓箭頭 72px 改排在字前、500/22「拍好掃 QR 帶走」）下 · .is-open 時 kv-rise-in 300ms 升起（delay 100；有火星畫過時 0）· 點了 = 說「可以幫我拍嗎」→ PICK。
可以跟我說話
10月23日 週五14:32
查場次→
活動好康→
看預告→
新片資訊→
C23Capability list · 能力列四顆（P01b）.kv-caps 384×392，left 832 / top 232，四顆 space-between · .kv-cap 高 86、全圓角 --kiosk-radius-pill、padding 0 12 0 32，底色與框線同 chips（--kiosk-glass-tap .16 + 玻璃模糊 + inset 1.5px --kiosk-line-tap，設計師 2026-10-23）、字 --kiosk-type-action 700/30 · 右邊 .kv-tap-arrow--outline 描邊圓箭頭 58px（新原語：透明底、1.5px --kiosk-line-tap 環、26px 箭頭）· 四件事只寫事情、不寫例句：查場次 / 活動好康 / 看預告 / 新片資訊（新能力，內容待 PM）· 點了 = 說了那件事 → A03 → A05 / A05e / A06 · .is-open 時 kv-rise-in（delay 200；火星畫過時 160）· 按下沿用 DS 按下態。觸控首頁 TP01b 同這排、沒有對話框（A02t 自 v4.3 退場）。
啟動中
10月23日 週五14:32
DISNEY《HEXED》· 11.26 上映
歡迎光臨魔法秘境
點擊任一處，開啟魔法對話
開啟魔法對話
正在啟動
C24Skeleton · 喚醒中的骨架（P01a）.kv-skel 疊整個畫面（pointer-events: none），.is-on / .is-off 整組淡入淡出 300ms · 五個 __box 用 --x --y --w --h --r 放在大卡（64, 232, 736×392, r32）與右欄四顆（832, 232 + n×102, 384×86, r43）的位置；AI 那句不出骨架 · 樣式「只留色塊」（設計師 2026-10-23 選定）：玻璃底白 .06 + 模糊、沒有線、沒有字，不會誘人去點 · 火星第一次經過才 .is-seen 淡入（500ms）並留著（整組一起出現太突兀），經過時 .is-lit 底色亮到 .12（150ms）再暗回去 · tap 後 1.8s 還沒 ready 才出現：聚點那顆火星（.kv-idle-spark.is-roaming）依序跑過五格、跑到哪格哪格才亮（約 3.0s 畫完）；畫完還沒好 → .is-shimmer 每格掃一道微光、火星飄慢速 8 字（v4.2 設計師 2026-10-28）；對話框是 --sent「開啟魔法對話 · 正在啟動」· 腦就緒 → 骨架 .is-off、火星一筆畫過、真內容升起。
啟動中
10月23日 週五14:32
DISNEY《HEXED》· 11.26 上映
歡迎光臨魔法秘境
點擊任一處，開啟魔法對話
開啟魔法對話
正在啟動
C25Fire · 火光（tap → P01a → P01b）.kv-fire-layer 疊在畫面最上（z 8、不吃點擊、overflow hidden），裡面的節點都是 JS 用 WAAPI 丟進來、播完自己移除 · .kv-fire 一顆火星：核心亮 → 外圈橙紅 → 一層光暈（mix-blend-mode: screen），大小用 --size 3–24px 混用，≥ 16px 加 --big（更亮、暈更大）· .kv-fire-bloom 點擊處的核心光 520px，脹開再散掉 1.6s · 爆開（設計師 2026-10-23 第二版：有大有小、有疏有密、從點擊處原地散出去、自然消失）：四波 0 / 120 / 320 / 650ms、26 / 22 / 18 / 12 顆、距離倍率 1 → .6，三條比較密的方向讓疏密不均；小的飛遠、大的飛近；到定點後往下墜同時淡掉 2.4–4s · 其他用法：待命火星的尾巴、等待時點擊處每 400ms 一顆餘燼、留下的那顆火星、P01b 進場飛進收音膠囊變綠點 · 只動 transform / opacity；一次爆開最多約 80 顆，實機吃力把 js/start.js 的 WAVES 顆數減半 · prefers-reduced-motion：不出火星，點了直接進 P01b。
可以跟我說話
9月29日 週二20:16
最近的是 19:10 IMAX 這場，21:30 是英文版。
歡迎光臨魔法秘境最近場次
14:20中文版
16:40中文版
19:10IMAX · 英文版
21:30英文版
C17最近場次卡 · 4 場.kv-showtimes 問場次一律用這張（P01b、A05）。規則：最多 4 場；只列今天還沒開演的、近到遠；不足 4 場只放有的、不補空位；都開演完換成 __empty 一句「今日場次已結束 · 明天 10:30 起」。超過 4 場的用語音問「還有其他場次嗎」或掃 QR，不往下塞。每場：時間（display 64）、影廳、剩餘座位。不放海報（設計師 2026-10-06：留位置給場次），片名放標題列、太長用 … 截。
可以跟我說話
9月29日 週二20:16
今天還有兩場。
歡迎光臨魔法秘境最近場次
19:10IMAX · 英文版
21:30英文版
歡迎光臨魔法秘境最近場次
今日場次已結束 · 明天 10:30 起
C17b最近場次卡 · 2 場 / 已結束不足 4 場：場次欄只放有的、不補空位。全部開演完：場次欄換一句 __empty，片名不變。
KEY ART · FULL-BLEED
現在播的是預告，想知道場次隨時問我。
C14aScrim top + bottom全螢幕媒體 · 各 300px（tall 360）· 字幕在上方遮罩內
CAMPAIGN KEY ART
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
C14bScrim coverAttraction Stop Idle · 左側 34% 實色漸出 · AI 字寬 1100
今天有什麼場次
C14cDim聆聽時底圖壓 62% 遮罩，只有對話框亮
站進框裡我數到五就拍3
S-LSide F · 打光態.kv-side-light：拍照 P02 站位到 P04c 快門整段亮著當補光。暖白底 --kiosk-side-light（不是純白）+ __text「看鏡頭」／「換個姿勢」+ __digit 倒數（.is-count）· 快門 .is-flash 拉到純白 700ms。實機交付影片 side-f-count-5(b).mp4。
照片和影片
在上面的 QR 裡
S-DSide F · 拍完態.kv-side-done：P05b 起黑底 + 火光（.kv-embers，從底邊與中段升起、飛出上緣）→ 稀疏火光 + __msg「照片和影片在上面的 QR 裡」+ 往上箭頭，停到 P09；不放任何相紙形狀。.is-send 溶回海報 A（v4.3：照片牆退場）。實機交付影片 side-f-done.mp4 → side-f-done-run.mp4 播一次 → side-f-done-still.png 靜態圖（v4.3.4 ⑤） → side-f-done-out.mp4。
歡迎光臨魔法秘境
S-WSide · 劇照牆.kv-side-wall（v4.2，設計師 2026-10-28 加回：迪士尼很喜歡）：v3.3 的 Side F 素材牆拿回來，標題改「歡迎光臨魔法秘境」（--kiosk-type-side-title）；2 × 3 劇照 + 一張橫幅大圖（--kiosk-radius-tile）。兩面 Side 待命輪播的 ③（海報之後 8s），交付 side-stills-1080x1920.png。
S-PSide F · 機器人能幹嘛.kv-side-promo（v5.1，設計師 2026-10-30 晚；v5 Claude Design 2026-10-28）：待命輪播中的一段，只在待命播。.kv-marquee 一行提示字「↑ 點一下中間螢幕，開啟魔法對話 ↑」+「我可以幫你做這些事」便利貼（上緣紙膠帶）+ 三張卡輪流擺進來（.kv-promo-item --at 帶起始秒數）：01 拍照留念 0–17s、02 場次 · 活動好康 17–26s（電影票 + 餐券）、03 看預告 · 聊新片 26–35s（底片 + 海報月曆）+ 曬衣繩索引三個（.kv-promo-hang）。v5.1 為了 3–5 公尺看得清，字全部放大（--promo-fs-*：標題牌 96、便利貼 60、卡內副文字 48、索引 44；索引小道具 ×1.3）；卡進出場 keyframes 分 9s 版和 17s 版（.kv-promo-item--long / .kv-promo-hang--long）。三張共用骨架 .kv-promo-sheet（952×1000 透明幾何框）：.kv-promo-head 紅色號碼牌、.kv-promo-prop 道具（卡落下 0.4s 後再貼上）、.kv-promo-sheet__foot 一句補充。各卡小動態：01 限動框每 4.25s 換手（.kv-promo-real 放照片框的真實錄影成品 5 秒影片；B 紫色款不加相紙白邊，原本給暗底框用的 --mat 已拿掉）、02 蓋章 + 蓋章微彈、03 底片每 3s 輪劇照。一圈 --kiosk-dur-promo 35s，色走 --kiosk-promo-*。markup 由 js/side-promo.js 產生；實機交付 side-{f,b}-promo-<階段>.mp4（依活動階段分版）。資料：11/26（週四）上映、預告 2:20；片長與台灣分級未公布不放；場次是示意。 10/30 晚再調：右上 Vyin AI logo 拿掉、提示字上移 96、便利貼 250、卡內道具縮 0.84 並離紅牌 60、補充句落到紙面下、索引線 1600；03 的海報拿掉，日期貼紙疊在膠片右下。
CAMPAIGN POSTER
S-BSide B · 後 · 整張海報1080×1920 .kv-side > .kv-art，不疊任何我們的字。Side B（後）永遠海報 B；Side F（前）有人在用時（含 A06 播預告）放海報 A，待命時四段輪播 ① 機器人能幹嘛（S-P）→ ② 海報 A → ③ 劇照牆（S-W）→ ④ 直式預告（v4.3 定案：Side 不同步播預告，只放預製素材；見 README §5.6）
↑在中間螢幕跟我聊↑
S-USide F · 使用中.kv-side-inuse（v4.3，設計師 2026-10-30）：有人點了 Center（P01a 起）Side F 不再是亮海報——海報 A 壓暗四成（頂部壓到近全黑，字不跟海報片頭字疊），頂部一行跟機器人能幹嘛提示同款（.kv-pgrid__hint 56/700、奶金 ↑）「↑ 在中間螢幕跟我聊」（Center 在 Side F 上方），0.6s 淡入、停到 8s、0.8s 淡出，之後維持壓暗海報。使用者測試：開 session 後會不確定要看 Side F 還是 Center，所以把 Side 退成背景、視線由上往下導一次。拍照時照舊換 S-L / S-D；收尾溶回不壓暗的海報 A。輸出 side-f-in-use.mp4（9s，停最後一格），rig 從 P01a 算起播。
魔法還沒結束
掃碼探索更多幕後花絮
S-X-FSide F · Exit 延伸邀請1080×1920 .kv-side-exit--top 去字 key art + 遮罩 + QR 卡靠上。Exit mode 用，其他 mode 回靜態 JPG。工程師備註：成本太高可退回 side-poster-a
魔法還沒結束
掃碼探索更多幕後花絮
S-X-BSide B · Exit 延伸邀請1080×1920 .kv-side-exit--bottom QR 卡靠下，搭配漂浮版 key art
KEBBI FACE · 1024×600 PROPOSAL · 示意

Kebbi 是女媧機器人，表情由它的 SDK 控制、能改多少待實機確認。.kv-face 只是示意「哪個畫面對應哪個表情」， 不是要廠商重畫 Kebbi 的臉。data-emotion 八種表情、data-mic 驅動臉下方的光條（FOCUS 時收音狀態只靠這條）。 畫面對照表在 Screens 頁尾，prototype.html 四螢幕模式逐步同步。

3
idle待機微笑，慢速眨眼
3
listen專注，眼睛放大加光
3
think眼睛上看、輕浮動
3
speak嘴形同步 TTS
3
countdown同步 3、2、1
3
happy迎賓 / 道別 / 拍好
3
sorry聽不清、查不到、逾時
3
sleep斷線 / 休眠
08Usage · 怎麼用這套
載入
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Unbounded:wght@600;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/tokens.css?v=4.3.7">
<link rel="stylesheet" href="css/components.css?v=4.3.7">
<!-- guide.css / guide.js 只給這份文件用，不要帶進產品 -->

相對路徑。整個資料夾放到任何子目錄底下都能開。IBM Plex Mono 只用在佔位圖與格線標籤，正式素材進來後可以不載。

組一個畫面
<div class="kv-screen">                         <!-- 1280×800 畫布 -->
  <div class="kv-at-topbar kv-topbar">…</div>    <!-- 位置 + 長相 -->
  <div class="kv-at-ai kv-transcript">…</div>
  <div class="kv-at-safe kv-safe">
    <div class="kv-card">…</div>
    <div class="kv-qr kv-qr--active">…</div>   <!-- QR 永遠最右 -->
  </div>
  <div class="kv-at-pill kv-pill">…</div>
</div>

用版型可以省掉 kv-at-*：

<div class="kv-screen kv-screen--dialog kv-screen--one-line">
  <div class="kv-topbar">…</div>              <!-- 自動落到 y 44 -->
  <div class="kv-transcript">…</div>          <!-- 自動落到 y 120、1 行 -->
  <div class="kv-safe kv-safe--one-line">…</div>  <!-- 自動落到 y 224 -->
  <div class="kv-pill">…</div>                <!-- 自動落到 bottom 44 -->
</div>

實機以 1280×800 全螢幕呈現，.kv-screen 直接放在 body 裡即可。其他解析度用 transform: scale() 等比縮放整個畫布，不要改 token。

命名規則
--kiosk-*所有 token。與 Vyin 官網的 token 完全獨立。
.kv-block元件本體，只管長相
.kv-block__element元件內部
.kv-block--modifier狀態或尺寸變體
.kv-at-slot格線位置，只在 .kv-screen 內用
.kv-actions唯一可按的元件，住在底部對話框那格；卡片不可按
.kv-screen--template四種畫面骨架：dialog / media / cover / standby，直接子元件自動定位
.kv-grow-ring .kv-dot .kv-eyebrow .kv-art .kv-hero原語，被多個元件共用
.kv-slideshow / __slide / __slide--active背景劇照輪播，3s 淡入淡出交替；放在 .kv-art 裡
.kv-side-photos / __title / __card / __footv4.3 退場（照片牆拿掉，規格頁樣本已刪）；CSS 只剩 transitions-explore.html 探索頁在用，之後一起清
.kv-story / __bg / __slot / __frame / __frame--video限動框成品（C18）：背景 → 照片格 → 照片框；動態框是透明影片圖層。.is-live 動態、.kv-vid-on 影片在播、.is-hold 停在快門那格。款式與 API 在 js/frames.js
.kv-pick / .kv-pick-card / .kv-tap-arrow選版型（C19）：卡片裡是縮小的限動框，照片格黑底
.kv-review2--fail照片和影片還在傳（C20b，E10）：框縮小靠右、QR 藏起、照片格換 .kv-status；拿掉就是傳成功轉場
.kv-review2 / --strip / --fail / __qr拍好了（C20）與照片還在傳（E10）的排版
.kv-camera__overlay / --single / -video取景框疊照片框（C12），只疊明確的大佔位；--kv-ov-clip 裁掉小素材
.kv-pill--shake對話框太吵抖一下（C05b，E06）：水平抖 600ms 一次，1.2s 後由 JS 移除
.kv-pill--sent / __status對話框「已送出」態（C05）：剛說的話或點的那顆 + 右側狀態字
.kv-pill.is-settling / .is-nt對話框從 --sent 落定成平常態的過渡（C05，v4.2，只在 .kv-screen--start 內）；.is-nt 最後一格不過渡
.kv-screen--start / .is-idle .is-cast .is-wait .is-open .is-sweep點擊開始（v4.2）：P01 / P01a / P01b 共用的畫面與狀態，由 js/start.js 切；.is-sweep = P01b 進場有火星畫過、升起順序跟著牠
.kv-start-frameP01 全螢幕 Grow 外框（C21）——例外，只在待命用
.kv-welcome / __title / .kv-start-hint / .kv-idle-spark待命歡迎（C21）：eyebrow + 大標、底部提示、跑來跑去的小火光（.is-roaming = 留下的那顆在飄）
.kv-cap-hero / __inner __scrim __body __title __go拍照大卡（C22）
.kv-caps / .kv-cap / .kv-tap-arrow--outline能力列四顆（C23）與描邊圓箭頭原語
.kv-skel / __box / .is-on .is-off .is-seen .is-lit喚醒中骨架（C24）：位置用 --x --y --w --h --r
.kv-fire-layer / .kv-fire / --big / .kv-fire-bloom火光（C25）：JS 用 WAAPI 丟進來的火星與核心光，--size 定大小
.kv-chip--photo固定的「幫我拍一張」chip（C07），點了 = 進 PICK
.kv-screen--touch / .kv-tnav / .kv-tnav__back / .kv-schedule__end / .kv-films / .kv-film--pin / .kv-info--plot / --cast / --character / --facts / .kv-cam-cancel觸控模式（C27）：導覽、選電影（2 × 2、翻頁、本片置頂、不放海報）、新片資訊四種版型（腦選）、拍照取消
.kv-schedule / __row / __tags / __next / .kv-safe--schedule場次表（C26）：沒指定片名問場次（A05t），照開演時間排、一頁 5 場；只放時間、片名、版本；點一列 → 活動好康卡 + QR（A05p）
.kv-side-promo / .kv-marquee / .kv-promo-*Side F 待命「機器人能幹嘛」段（S-P）：招牌、四件事的紙道具、曬衣繩索引；markup 在 js/side-promo.js
.kv-side-light / .kv-side-doneSide F 拍照打光態（S-L）與拍完態（S-D）；實機用 assets/side/ 的影片
.kv-side-exit / --top / --bottomSide screen Exit 延伸邀請：去字 key art + 遮罩 + QR 卡。--top QR 靠上、--bottom 靠下
.kv-media-pause / .kv-media-btn預告觸控暫停（Grow 圓形播放鈕覆蓋）與「結束預告」按鈕
.kv-screen--media.is-bare / .is-pausedv4.2 預告（A06b / A06p）：沒字時片名列、進度條、頂列淡掉，結束預告往下到下黑邊正中（bottom 17）；暫停時三個都回來、在遮罩之上
.kv-transcript--fade-longv4.2 預告開場兩行字幕：停 6.5s（--kiosk-dur-caption-long）再淡出；實機 = 念完 1.5s 後淡出
.kv-karaoke__done / __restVoice Layer：AI 說話時逐字亮（guide.js 自動套用於 __unspoken）
.kv-ph素材佔位，正式素材進來後移除
.kv-guide / .kv-guides開發用格線疊層，正式版不輸出
本階段不包含

· 四個 Mode 的完整畫面（P00 打烊、P01–P09 含 P01a / P01b / P03b / P04c / P05b / P06b、A03–A07 含 A05e / A05t / A05t2 / A06b / A06p / A06v、E01–E13 含 E05b（E09 v4.3.3 退場）、M01–M03、觸控 TP01 / TP01a / TP01b；v4.3 起 A02 / A02t / A08 退場）
· 互動原型與狀態機
· Kebbi 表情組
· 正式素材、QR 產生、TTS 逐字同步的實作邏輯
這些會在後續階段以同一套 token 與元件疊上去。