/* 果果 GUIDE · 共用樣式 (design system)
來源：html-guidelines.html 的設計系統。改這一支 = 全站樣式一起變。
果果國際風格：淺色底、深藍主色、綠色為輔 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
/* ── 基底（淺色・果果國際）── */
--bg: #f6f8fb;
--panel: #ffffff;
--panel2: #f0f3f8;
--line: #e2e8f0;
--grid: #edf1f6;
--ink: #16223a; /* 標題 / 強調 */
--body: #45506a; /* 正文 */
--muted: #8590a6; /* 次要 / 標籤 */
/* ── 品牌與語意色（深藍主、綠輔，固定語意）── */
--navy: #17345f; --navy-deep: #0f2547; --navy-bg: #eef2f8;
--green: #2f9e57; --green-deep: #237a43; --green-bg: #eaf5ee;
--amber: #b47d1e; --amber-bg: #f8f0dc;
--red: #c0492f; --red-bg: #fbeae5;
--teal: #1c8a9a; --teal-bg: #e3f3f4;
--purple: #7150c9; --purple-bg: #efeafb;
/* 內文連結專用。原本用 navy，但它跟正文同色系、只靠點線底線區分，讀者常常沒發現那是連結。
#c2185b 在白底對比 5.87:1（WCAG AA 需 4.5），是能通過可讀性的最淺粉色。
⚠️ 只給 a.inline 用，別拿來當語意色——它跟 --red 色相接近，混用會讓「錯誤/雷區」失去識別度。 */
--pink: #c2185b; --pink-bg: #fdf0f5; --pink-line: #f0b8ce;
--mono: 'SF Mono','JetBrains Mono','Menlo','Consolas',monospace;
--sans: 'Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;
}
body { background: var(--bg); color: var(--body); font-family: var(--sans); display: flex; min-height: 100vh; line-height: 1.72; -webkit-font-smoothing: antialiased; }
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--green); z-index: 99; transition: width .1s; }
/* ── Sidebar ── */
nav { width: 244px; min-width: 244px; background: #fff; border-right: 1px solid var(--line); padding: 30px 0 30px 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; font-family: var(--mono); }
nav .brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; padding-right: 20px; }
nav .brand svg { width: 30px; height: 30px; flex: none; }
nav .brand b { font-family: var(--sans); font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
nav .brand small { display: block; font-size: .5rem; letter-spacing: .18em; color: var(--muted); }
nav a { display: block; font-size: .77rem; color: var(--muted); text-decoration: none; padding: 5px 0; transition: .12s; }
nav a::before { content: '› '; color: var(--line); }
nav a:hover { color: var(--ink); }
nav a.active { color: var(--navy); font-weight: 700; } nav a.active::before { content: '› '; color: var(--green); }
nav .grp { font-size: .58rem; letter-spacing: .1em; color: var(--muted); margin: 18px 0 4px; }
/* ── Main ── */
/* 內容寬度 820（原 900）：扣掉 .inner 左右 padding 後每行約 43 個中文字。
900px 時每行 49 字，超過中文最佳閱讀寬度（35–40），視線回掃容易跳行。 */
/* min-width:0 是必要的，不是保險。
main 是 body 這個 flex 容器的項目，flex item 預設 min-width:auto（＝內容的 min-content 寬），
所以任何一個寬元素（最常見的是 .tbl-wrap 裡 min-width:620px 的寬表格）都會沿著 main
把「整篇文章」撐開，手機上變成全頁橫向捲動——不只那張表格會跑掉，連標題和內文都被推出畫面。
實測（viewport 390px，22 篇文章）：加這一行之前有 16 篇溢出，最寬的到 740px；加了之後全部回到 390。 */
main { flex: 1; min-width: 0; max-width: 820px; padding: 0 0 120px; }
.inner { padding: 46px 52px 0; }
/* ── V1 masthead（極簡淺色）── */
.masthead { }
.masthead .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 52px 18px; }
.masthead .logo { display: flex; align-items: center; gap: 12px; }
.masthead .logo svg { width: 40px; height: 40px; flex: none; }
.masthead .logo .wm { font-weight: 800; font-size: 1.06rem; color: var(--ink); line-height: 1.15; }
.masthead .logo .wm-sub { font-family: var(--mono); font-size: .55rem; letter-spacing: .2em; color: var(--muted); }
.masthead .tagline { text-align: right; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.masthead .tagline b { color: var(--navy); }
.masthead .trust { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 13px 52px; background: #fafbfd; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.masthead .trust span { font-size: .78rem; color: var(--body); display: flex; align-items: center; gap: 7px; }
.masthead .trust span::before { content: '✓'; color: var(--green); font-weight: 800; font-size: .82rem; }
.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--navy); margin-bottom: 14px; }
.kicker::before { content: '// '; color: var(--muted); }
/* h1 下方 24（原 14）、行高 1.3（原 1.16）：2.4rem 的大標下面只留 14px 會貼住副標，
而 section 之間卻有 56px——區塊內間距遠小於區塊間，視覺上標題會「掉進」內文。 */
h1 { font-weight: 800; font-size: 2.4rem; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); margin-bottom: 24px; }
.subtitle { font-size: 1.12rem; color: var(--body); margin-bottom: 30px; line-height: 1.5; } /* 20 → 30：與導言的分界 */
/* 導言比正文略大、行距更鬆，讓眼睛進入正文前先「呼吸」 */
.lede { font-size: 1.06rem; line-height: 1.85; margin-bottom: 24px; }
/* ── 導言區元件 lead ──
解決的問題：h1 底下連接好幾段 .lede，字級、顏色、行距全部一樣。
內容規範只要求「導言 >200 字要分段」（content-quality-guidelines §12），
但分了段卻長得一模一樣時，視覺上仍是一整面灰牆——最重要的那句結論
跟過場句同等重量，讀者的眼睛沒有落點。
作法是不刪任何字、只換載體：
.lead-ans 全篇最重要的結論 → 大字卡（左側色框沿用 .callout 的語彙，以 --c 指定語意色）
.alias-line 名詞別名對照 → 卡片內的分隔小字（官方用詞 ↔ 讀者熟悉的俗稱）
.lead-src 引用的官方原文 → 獨立成引用區塊，從長段落裡抽出來
.lead-map 「這頁講什麼」 → 可點的導覽格（窄螢幕 nav 隱藏時，它就是目錄）
首次使用：activation-lock-truth、forgot-passcode-rescue-ladder。 */
.lead { margin-bottom: 4px; }
.lead .lede { margin: 18px 0 0; }
.lead-ans { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--navy)); border-radius: 10px; padding: 18px 22px; box-shadow: 0 2px 10px rgba(20,39,68,.04); }
.lead-ans + .lead-ans { margin-top: 10px; }
.lead-ans .lt { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--c); margin-bottom: 8px; }
.lead-ans .big { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.45; margin-bottom: 10px; }
.lead-ans .sm { font-size: 1rem; line-height: 1.8; margin-bottom: 0; }
/* 別名對照：讀者搜尋、店家口語用的詞，常常跟官方正式名稱對不上號（例：ID 鎖 ↔「啟用鎖定」）。
名字對不起來，讀者會懷疑自己找錯頁，所以放在第一屏的結論卡裡。 */
.alias-line { font-size: .88rem; color: var(--body); line-height: 1.7; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--grid); }
.alias-line b { font-family: var(--mono); font-size: .82rem; color: var(--red); font-weight: 700; }
.lead-src { margin-top: 11px; padding: 13px 17px; background: var(--navy-bg); border-radius: 9px; font-size: .93rem; line-height: 1.75; color: var(--body); }
.lead-src cite { display: block; font-family: var(--mono); font-size: .66rem; font-style: normal; color: var(--muted); margin-top: 7px; }
.lead-map { margin: 24px 0 0; }
.lead-map .lm-t { font-size: .95rem; color: var(--body); margin-bottom: 9px; }
.lead-map .lm-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.lead-map a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; text-decoration: none; color: var(--ink); font-size: .89rem; line-height: 1.5; transition: .12s; }
.lead-map a:hover { border-color: var(--navy); background: var(--navy-bg); }
.lead-map a i { display: block; font-family: var(--mono); font-style: normal; font-size: .66rem; color: var(--navy); font-weight: 700; margin-bottom: 4px; }
section { margin-top: 56px; scroll-margin-top: 20px; }
h2 { font-weight: 800; font-size: 1.42rem; color: var(--ink); margin-bottom: 14px; } /* 4 → 14：小標不貼內文 */
.sec-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--c, var(--navy)); margin-bottom: 16px; }
.sec-label::before { content: '['; } .sec-label::after { content: ']'; }
h3 { font-size: 1.08rem; color: var(--ink); margin: 38px 0 14px; font-weight: 700; } /* 30/10 → 38/14 */
/* 段落間距 22（原 14）：行高是 27.5px，14px 的段距只有行高的 51%——
段落界線比換行還弱，整段會糊成一坨。提到 80% 才分得出「這是新的一段」。 */
p { margin-bottom: 22px; }
details p { margin-bottom: 0; } /* 摺疊區內不需額外底部留白 */
strong { color: var(--ink); }
code { font-family: var(--mono); font-size: .85em; background: var(--panel2); color: var(--navy); padding: 1px 6px; border-radius: 4px; }
a.inline { color: var(--pink); text-decoration: none; border-bottom: 1px solid var(--pink-line); }
a.inline:hover { border-bottom-color: var(--pink); background: var(--pink-bg); }
/* callouts */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--panel); border-radius: 8px; padding: 14px 17px; margin: 11px 0; font-size: .94rem; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.callout .ct { font-family: var(--mono); font-size: .68rem; color: var(--c); font-weight: 700; margin-bottom: 3px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 16px 0; }
.cgrid .callout { margin: 0; }
/* card grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.card .c-tag { font-family: var(--mono); font-size: .66rem; color: var(--c); margin-bottom: 7px; }
.card .c-tag::before { content: '▸ '; }
.card h4 { font-size: 1rem; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.card p { font-size: .87rem; color: var(--muted); margin: 0; }
.card .ex { font-family: var(--mono); font-size: .74rem; color: var(--c); margin-top: 8px; background: var(--cbg); padding: 4px 8px; border-radius: 4px; display: inline-block; }
/* table */
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th { text-align: left; font-family: var(--mono); font-size: .68rem; color: #fff; background: var(--navy); padding: 10px 14px; }
td { padding: 11px 14px; border-bottom: 1px solid var(--grid); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.bad { color: var(--red); } td.good { color: var(--green-deep); }
td:first-child { color: var(--ink); font-weight: 600; }
/* meter */
.meter { margin: 0 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 11px 15px; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.meter .mtop { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 6px; }
.meter .mtop b { color: var(--ink); font-weight: 600; }
.meter .mtop span { font-family: var(--mono); font-size: .78rem; color: var(--c); }
.meter .track { height: 7px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.meter .fill { height: 100%; width: var(--w); background: var(--c); border-radius: 4px; }
/* steps */
.steps { display: grid; gap: 10px; margin: 20px 0; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.step .n { font-family: var(--mono); min-width: 28px; height: 28px; border-radius: 7px; background: var(--navy-bg); color: var(--navy); font-weight: 800; font-size: .85rem; display: grid; place-items: center; flex: none; }
.step h4 { font-size: .96rem; color: var(--ink); font-weight: 700; margin-bottom: 1px; }
.step p { font-size: .87rem; color: var(--muted); margin: 0; }
/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.tag { font-family: var(--mono); font-size: .75rem; padding: 4px 11px; border-radius: 999px; color: var(--c); background: var(--cbg); border: 1px solid var(--c); }
/* stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 24px 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 14px; text-align: center; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.stat .num { font-family: var(--mono); font-size: 1.85rem; font-weight: 800; color: var(--c); line-height: 1; }
.stat .lab { font-size: .72rem; color: var(--muted); margin-top: 7px; }
.stat .badge { display: inline-block; font-family: var(--mono); font-size: .56rem; color: var(--green-deep); border: 1px solid var(--green); background: var(--green-bg); border-radius: 4px; padding: 1px 6px; margin-top: 8px; }
/* swatches */
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.sw { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; }
.sw .chip { width: 28px; height: 28px; border-radius: 7px; background: var(--c); flex: none; }
.sw b { color: var(--ink); font-family: var(--mono); font-size: .82rem; }
.sw small { color: var(--muted); display: block; font-size: .78rem; }
/* 話術範本 script block */
.script { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; margin: 10px 0 15px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,39,68,.03); }
.script .slabel { font-family: var(--mono); font-size: .66rem; color: var(--green-deep); background: var(--green-bg); padding: 6px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.script .slabel::before { content: '⌨ 話術'; }
.script .slabel .copy { color: var(--muted); }
.script .sbody { padding: 12px 15px; font-size: .92rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.script .why { font-size: .8rem; color: var(--muted); padding: 0 15px 11px; }
/* code block */
.code { background: #0f2547; border: 1px solid var(--navy-deep); border-radius: 8px; padding: 14px 16px; margin: 14px 0; font-family: var(--mono); font-size: .76rem; line-height: 1.65; color: #cdd6e6; overflow-x: auto; white-space: pre; }
.code .cm { color: #7c8db0; }
.code .k { color: #b79cf0; }
.code .v { color: #7fe0a3; }
.code .t { color: #6cb0f0; }
.code .s { color: #e8c07d; }
.demo-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--muted); margin: 18px 0 6px; }
.demo-label::before { content: '▸ DEMO · '; color: var(--green); }
/* checklist */
.check { list-style: none; margin: 14px 0; }
.check li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px solid var(--grid); font-size: .92rem; color: var(--body); }
.check li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-family: var(--mono); font-weight: 800; }
/* 問句獨立成行：這類清單是「問題＋解答」，擠在同一行時問句會被答案吃掉、
三個項目糊成一片。6px 比段落間距(22px)小得多，維持「同一項目內」的親近感。 */
.check li b { display: block; margin-bottom: 6px; color: var(--ink); }
ul.styled { list-style: none; margin: 12px 0; }
ul.styled li { padding: 7px 0 7px 20px; position: relative; font-size: .92rem; color: var(--body); border-bottom: 1px solid var(--grid); }
ul.styled li::before { content: '›'; position: absolute; left: 0; color: var(--navy); font-family: var(--mono); }
li b { color: var(--ink); }
/* details */
details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-size: .92rem; margin: 10px 0; }
details summary { cursor: pointer; color: var(--ink); font-weight: 600; }
details p { margin-top: 10px; color: var(--muted); }
/* bigquote（V1 引言） */
.bigquote { background: var(--navy-bg); border-radius: 14px; padding: 24px 28px; margin: 32px 0; }
.bigquote .qm { font-size: 1.9rem; color: var(--navy); font-weight: 800; opacity: .3; line-height: .5; }
.bigquote p { font-size: 1.28rem; font-weight: 800; color: var(--navy); line-height: 1.5; margin: 8px 0 0; }
.bigquote small { display: block; color: var(--body); font-size: .9rem; margin-top: 8px; }
.use { display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; vertical-align: middle; margin-left: 8px; }
.use.in { color: var(--navy); background: var(--navy-bg); border: 1px solid #cfdaea; }
.use.out { color: var(--green-deep); background: var(--green-bg); border: 1px solid #c3e4cf; }
.part-div { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--muted); margin: 66px 0 24px; display: flex; align-items: center; gap: 14px; }
.part-div::before, .part-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* 影片預覽卡 vlite（YouTube facade：正式站點擊就地播放、無 JS/本機開 YouTube） */
.vlite { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,39,68,.04); margin: 10px 0; }
.vlite .thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f2547; text-decoration: none; }
.vlite .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vlite .thumb .pbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 60px; height: 42px; border-radius: 11px; background: rgba(193,73,47,.94); display: grid; place-items: center; }
.vlite .thumb .pbtn::before { content: ''; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.vlite .thumb .yt { position: absolute; right: 10px; bottom: 9px; font-family: var(--mono); font-size: .58rem; color: #fff; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 4px; }
.vlite iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vlite .cap { padding: 11px 15px; }
.vlite .cap b { color: var(--ink); font-size: .9rem; font-weight: 700; display: block; }
.vlite .cap small { color: var(--muted); font-size: .8rem; }
/* CSS 示意圖 figure + flow */
figure.fig { margin: 20px 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px 14px; }
figure.fig figcaption { font-size: .84rem; color: var(--body); text-align: center; margin-top: 14px; }
figure.fig figcaption b { color: var(--ink); }
.flow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
.flow .box { flex: 1; min-width: 128px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px; text-align: center; background: var(--cbg,#fff); }
.flow .box .bi { font-size: 1.7rem; }
/* Apple 標誌用單色 SVG 而不是 🍎 emoji：emoji 是紅蘋果、且每個平台長得不一樣，
跟讀者在 iPad 上實際看到的畫面對不起來。fill 跟著文字色走，深淺底都看得見。 */
.flow .box .bi svg { display: block; width: .9em; height: .9em; margin: 0 auto; fill: currentColor; }
.flow .box .bt { font-family: var(--mono); font-size: .6rem; color: var(--muted); margin-top: 8px; }
.flow .box .bv { font-size: .9rem; color: var(--ink); font-weight: 700; margin-top: 3px; }
.flow .arr { display: grid; place-items: center; color: var(--muted); font-family: var(--mono); }
/* ═══ 動態分鏡 anim（figure.fig 的動畫版）═══
用途：知識點本身是「會動的東西」時才用——過程、時間差、空間移動。
規格比較、清單、SOP 請用 table / flow / steps，動畫只會添亂。
★ 鐵則：每個元素的「基礎樣式」必須等於動畫的最終狀態，動畫只是把它倒帶重演。
這樣關掉動畫、prefers-reduced-motion、或瀏覽器不支援 container query 單位時，
讀者看到的仍是看得懂的靜態圖，資訊不會少（見規範 §「無 JS 也全看得到」：
JS／動畫只能錦上添花，內容本身要預設可見）。絕不可把資訊只放在動畫的中間狀態。
情境 A：選單列 .scr/.lines/.bar/.menu/.tip/.trail → iPadOS 26 頂端下滑
情境 B：觸控板手勢 .hand/.home/.appwin/.cards → 1～3 指的動作
情境 C：筆刷間距 .brush/.slider/.stamps → 滑桿一拉印章就散開
情境 D：壓感時間差 .canvas/.guess/.real/.nib → 位置先到、力道後到
節奏一律 4.4s 一輪，全站保持同一種動畫語言。 */
.anim .box { padding: 12px 10px 14px; max-width: 300px; margin: 0 auto; }
.anim .scr { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--navy); border-radius: 8px; background: #fff; overflow: hidden; container-type: inline-size; }
.anim .lines { padding: 26px 8px 0; display: grid; gap: 4px; padding: 24cqi 7cqi 0; gap: 3.4cqi; }
.anim .lines i { display: block; height: 4px; height: 3.4cqi; border-radius: 99px; background: var(--grid); }
.anim .lines i:nth-child(2) { width: 74%; }
.anim .lines i:nth-child(3) { width: 48%; }
.anim .bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; height: 14px; gap: 7px; padding: 0 6px; font-size: 8px; height: 13cqi; gap: 5cqi; padding: 0 5cqi; font-size: 5.2cqi; background: var(--navy-bg); border-bottom: 1px solid var(--line); font-family: var(--mono); color: var(--navy); }
.anim .bar b { font-weight: 600; }
.anim .menu { position: absolute; top: 13cqi; left: 5cqi; width: 60cqi; padding: 2cqi 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 10px rgba(20,39,68,.16); }
.anim .menu div { display: flex; justify-content: space-between; gap: 4cqi; padding: .6cqi 4cqi; font-size: 8px; font-size: 5.2cqi; line-height: 1.6; }
.anim .menu b { color: var(--ink); font-weight: 600; }
.anim .menu span { color: var(--green-deep); font-family: var(--mono); } /* 快捷鍵：整張圖的視覺重點 */
.anim .trail { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: 26cqi; border-radius: 2px; background: linear-gradient(var(--green), rgba(47,158,87,0)); transform-origin: top; }
.anim .tip { position: absolute; left: 50%; top: 0; width: 11cqi; height: 11cqi; margin-left: -5.5cqi; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4cqi rgba(47,158,87,.16); transform: translateY(200%); }
@keyframes mb-tip { 0%, 6% { transform: translateY(0); } 26%, 100% { transform: translateY(200%); } }
@keyframes mb-trail { 0%, 6% { transform: scaleY(0); } 26%, 100% { transform: scaleY(1); } }
@keyframes mb-bar { 0%, 26% { transform: translateY(-100%); } 46%, 100% { transform: translateY(0); } }
@keyframes mb-menu { 0%, 56% { opacity: 0; transform: translateY(-8%); } 70%, 100% { opacity: 1; transform: translateY(0); } }
.anim .tip { animation: mb-tip 4.4s ease-in-out infinite; }
.anim .trail { animation: mb-trail 4.4s ease-in-out infinite; }
.anim .mv { animation: mb-bar 4.4s cubic-bezier(.2,.8,.3,1) infinite; }
.anim .menu { animation: mb-menu 4.4s ease-out infinite; }
/* ── 情境 B：觸控板手勢（1～3 指的動作） ── */
.anim .lines.tall { padding-top: 8cqi; }
.anim .hand { position: absolute; left: 50%; top: 44cqi; display: flex; gap: 6cqi; transform: translate(-50%, -26cqi); }
.anim .hand i { display: block; width: 9cqi; height: 9cqi; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3cqi rgba(47,158,87,.16); }
.anim .home { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqi; padding: 14cqi 9cqi; align-content: start; }
.anim .home span { display: block; aspect-ratio: 1; border-radius: 3cqi; background: var(--navy-bg); }
.anim .appwin { position: absolute; inset: 0; background: #fff; transform: scale(.3); opacity: 0; }
.anim .cards { position: absolute; inset: 0; display: flex; align-items: center; gap: 4cqi; padding: 0 6cqi; }
.anim .cards span { display: block; flex: 1; height: 46cqi; border-radius: 3cqi; border: 1px solid var(--line); background: var(--panel2); }
.anim .cards span.on { background: var(--navy-bg); border-color: var(--navy); }
@keyframes g-up { 0%, 12% { transform: translate(-50%, 0); } 48%, 100% { transform: translate(-50%, -26cqi); } }
@keyframes g-half { 0%, 12% { transform: translate(-50%, 13cqi); } 40%, 100% { transform: translate(-50%, 0); } }
@keyframes g-side { 0%, 12% { transform: translate(calc(-50% + 17cqi), 0); } 52%, 100% { transform: translate(-50%, 0); } }
@keyframes g-scroll { 0%, 12% { transform: translateY(0); } 48%, 100% { transform: translateY(-16cqi); } }
@keyframes g-shrink { 0%, 12% { transform: scale(1); opacity: 1; } 55%, 100% { transform: scale(.3); opacity: 0; } }
@keyframes g-pop { 0%, 20% { transform: scale(1.45); opacity: 0; } 55%, 100% { transform: scale(1); opacity: 1; } }
@keyframes g-slide { 0%, 12% { transform: translateX(23cqi); } 52%, 100% { transform: translateX(0); } }
.anim .hand.up { animation: g-up 4.4s ease-in-out infinite; }
.anim .hand.half { top: 44cqi; transform: translate(-50%, 0); animation: g-half 4.4s ease-in-out infinite; }
.anim .hand.side { top: 44cqi; transform: translate(-50%, 0); animation: g-side 4.4s ease-in-out infinite; }
.anim .lines.scroll { animation: g-scroll 4.4s ease-in-out infinite; }
.anim .appwin { animation: g-shrink 4.4s ease-in-out infinite; }
.anim .cards.pop { animation: g-pop 4.4s ease-out infinite; }
.anim .cards.slide { animation: g-slide 4.4s ease-in-out infinite; }
/* ── 情境 C：筆刷間距 Spacing（滑桿一拉，印章就散開） ── */
.anim .brush { padding: 4px 0 2px; }
.anim .ends { display: flex; justify-content: space-between; margin: 0 8%; font-family: var(--mono); font-size: .66rem; color: var(--muted); }
.anim .slider { position: relative; height: 4px; border-radius: 4px; background: var(--line); margin: 8px 8% 20px; }
.anim .slider b { position: absolute; top: 50%; left: 100%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--green); box-shadow: 0 1px 5px rgba(20,39,68,.3); }
.anim .stamps { display: flex; align-items: center; justify-content: center; height: 34px; }
.anim .stamps i { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); }
.anim .stamps i + i { margin-left: 10px; }
@keyframes b-knob { 0%, 10% { left: 0%; } 52%, 100% { left: 100%; } }
@keyframes b-lap { 0%, 10% { margin-left: -15px; } 52%, 100% { margin-left: 10px; } }
.anim .slider b { animation: b-knob 4.4s ease-in-out infinite; }
.anim .stamps i + i { animation: b-lap 4.4s ease-in-out infinite; }
/* ── 情境 D：位置先到、力道後到（Pencil 壓感的時間差） ── */
.anim .canvas { position: relative; height: 62px; margin: 6px 6% 4px; }
.anim .canvas .guess { position: absolute; left: 0; top: 50%; width: 100%; height: 9px; margin-top: -4.5px; border-radius: 9px; background: var(--line); }
.anim .canvas .real { position: absolute; left: 0; top: 50%; width: 100%; height: 22px; margin-top: -11px; background: var(--navy); opacity: 1;
clip-path: polygon(0 41%, 22% 34%, 48% 16%, 74% 4%, 100% 0, 100% 100%, 74% 96%, 48% 84%, 22% 66%, 0 59%); }
.anim .canvas .nib { position: absolute; top: 50%; left: 100%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(47,158,87,.18); }
.anim .tags { display: flex; justify-content: space-between; margin: 0 6%; font-family: var(--mono); font-size: .64rem; }
.anim .tags span:first-child { color: var(--muted); }
.anim .tags span:last-child { color: var(--navy); }
@keyframes p-draw { 0%, 8% { width: 0; } 46%, 100% { width: 100%; } }
@keyframes p-nib { 0%, 8% { left: 0; } 46%, 100% { left: 100%; } }
@keyframes p-fix { 0%, 52% { opacity: 0; } 66%, 100% { opacity: 1; } }
.anim .canvas .guess { animation: p-draw 4.4s linear infinite; }
.anim .canvas .nib { animation: p-nib 4.4s linear infinite; }
.anim .canvas .real { animation: p-fix 4.4s ease-out infinite; }
/* ── 情境 E：筆畫造型（Taper 收筆／Fall Off 淡出／Charge 重新沾色）── */
.anim .stroke { position: relative; height: 34px; container-type: inline-size; }
.anim .stroke + .stroke { margin-top: 7px; }
.anim .reveal { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; }
.anim .ink2 { position: absolute; left: 0; top: 0; height: 100%; width: 100cqw; background: var(--navy); }
.anim .ink2.flat { clip-path: polygon(0 27%, 100% 27%, 100% 73%, 0 73%); }
.anim .ink2.taper { clip-path: polygon(0 50%, 9% 22%, 55% 13%, 88% 27%, 100% 50%, 88% 73%, 55% 87%, 9% 78%); }
.anim .ink2.fade { clip-path: polygon(0 27%, 100% 27%, 100% 73%, 0 73%); background: linear-gradient(90deg, var(--navy), rgba(23,52,95,.1)); }
@keyframes s-draw { 0%, 8% { width: 0; } 46%, 100% { width: 100%; } }
@keyframes s-late { 0%, 58% { width: 0; } 92%, 100% { width: 100%; } }
.anim .reveal { animation: s-draw 4.4s ease-out infinite; }
.anim .reveal.late { animation: s-late 4.4s ease-out infinite; }
/* ── 情境 F：Jitter（印章排列的亂度）── */
.anim .jit { display: flex; align-items: center; justify-content: center; height: 38px; }
.anim .jit i { display: block; flex: none; width: 21px; height: 13px; border-radius: 50%; background: var(--amber); }
.anim .jit i + i { margin-left: 5px; }
.anim .jit.shake i { transform: translateY(var(--dy)) rotate(var(--rot)); animation: j-shake 4.4s ease-in-out infinite; }
.anim .jit.shake i:nth-child(1) { --dy: -5px; --rot: -22deg; }
.anim .jit.shake i:nth-child(2) { --dy: 4px; --rot: 14deg; }
.anim .jit.shake i:nth-child(3) { --dy: -7px; --rot: 28deg; }
.anim .jit.shake i:nth-child(4) { --dy: 2px; --rot: -12deg; }
.anim .jit.shake i:nth-child(5) { --dy: -3px; --rot: 20deg; }
.anim .jit.shake i:nth-child(6) { --dy: 6px; --rot: -26deg; }
.anim .jit.shake i:nth-child(7) { --dy: -6px; --rot: 10deg; }
.anim .jit.shake i:nth-child(8) { --dy: 3px; --rot: -18deg; }
@keyframes j-shake { 0%, 15% { transform: none; } 45%, 100% { transform: translateY(var(--dy)) rotate(var(--rot)); } }
/* ── 情境 G：延遲落差（筆尖跑在前、墨跡追在後）── */
.anim .race { position: relative; height: 30px; }
.anim .race::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--grid); }
.anim .race i { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; }
.anim .race .nib2 { left: 100%; z-index: 2; background: var(--green); box-shadow: 0 0 0 4px rgba(47,158,87,.18); }
.anim .race .ink3 { background: var(--navy); }
.anim .lag60 .ink3 { left: 66%; }
.anim .lag120 .ink3 { left: 92%; }
@keyframes r-nib { 0%, 8% { left: 0; } 55%, 100% { left: 100%; } }
@keyframes r-i60 { 0%, 8% { left: 0; } 55%, 100% { left: 66%; } }
@keyframes r-i120 { 0%, 8% { left: 0; } 55%, 100% { left: 92%; } }
.anim .race .nib2 { animation: r-nib 4.4s ease-in-out infinite; }
.anim .lag60 .ink3 { animation: r-i60 4.4s ease-in-out infinite; }
.anim .lag120 .ink3 { animation: r-i120 4.4s ease-in-out infinite; }
/* ── 情境 H：訊號接力（AirTag 要靠路過的陌生裝置）── */
.anim .relay { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 2px; font-size: 1.25rem; }
.anim .relay span { opacity: .9; }
.anim .relay span.off { opacity: .28; filter: grayscale(1); }
.anim .relay .sig { position: absolute; top: 50%; left: 88%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(47,158,87,.2); }
.anim .relay.dead .sig { left: 13%; background: var(--red); box-shadow: 0 0 0 4px rgba(192,73,47,.16); }
@keyframes a-hop { 0%, 8% { left: 12%; opacity: 0; } 16% { opacity: 1; } 38% { left: 37%; } 60% { left: 62%; } 80%, 100% { left: 88%; } }
@keyframes a-stop { 0%, 8% { left: 12%; opacity: 0; } 16% { opacity: 1; } 34%, 46% { left: 17%; } 62%, 100% { left: 13%; } }
.anim .relay .sig { animation: a-hop 4.4s ease-in-out infinite; }
.anim .relay.dead .sig { animation: a-stop 4.4s ease-in-out infinite; }
/* ── 情境 I：兩段路（熱點的第二段是單行道）── */
.anim .pipes { display: flex; align-items: center; gap: 7px; height: 50px; font-size: 1.1rem; }
.anim .pipe { position: relative; flex: 1; border-radius: 20px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.anim .pipe.wide { height: 22px; }
.anim .pipe.narrow { height: 11px; }
.anim .pipe i { position: absolute; top: 50%; left: 100%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--navy); }
.anim .pipe.narrow i { width: 6px; height: 6px; margin-top: -3px; background: var(--amber); }
@keyframes f-flow { 0% { left: -6%; } 100% { left: 100%; } }
.anim .pipe i { animation: f-flow 1.6s linear infinite; }
.anim .pipe i:nth-child(2) { animation-delay: .53s; }
.anim .pipe i:nth-child(3) { animation-delay: 1.06s; }
.anim .pipe.narrow i { animation-duration: 3.6s; }
.anim .pipe.narrow i:nth-child(2) { animation-delay: 1.8s; }
/* ── 情境 J：側轉（Apple Pencil Pro barrel roll）── */
.anim .stage { position: relative; height: 62px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.anim .stage::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.anim .obj { position: absolute; top: 50%; left: 88%; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.anim .obj i { display: block; width: 100%; height: 100%; border-radius: 6px; background: var(--navy); border-top: 3px solid var(--green); }
@keyframes j-move { 0%, 10% { left: 12%; } 62%, 100% { left: 88%; } }
@keyframes j-spin { 0%, 10% { transform: rotate(0deg); } 62%, 100% { transform: rotate(315deg); } }
.anim .obj { animation: j-move 4.4s ease-in-out infinite; }
.anim .obj.roll i { transform: rotate(315deg); animation: j-spin 4.4s ease-in-out infinite; }
/* ── 情境 K：指腹 vs 筆尖（接觸面積為什麼重要）── */
.anim .touch { position: relative; height: 72px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.anim .touch b { display: block; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1.5px solid #c2cddc; }
.anim .touch b.target { background: var(--green); border-color: var(--green-deep); box-shadow: 0 0 0 3px var(--green-bg); }
.anim .presser { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.anim .presser.pad { width: 48px; height: 48px; margin: -24px 0 0 -24px; background: rgba(23,52,95,.26); border: 2px solid rgba(23,52,95,.45); }
.anim .presser.nib3 { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--navy); box-shadow: 0 0 0 3px rgba(23,52,95,.16); }
@keyframes k-press { 0%, 12% { transform: translateY(-30px); opacity: 0; } 26% { opacity: 1; } 48%, 100% { transform: translateY(0); opacity: 1; } }
.anim .presser { animation: k-press 4.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.anim .tip, .anim .trail, .anim .mv, .anim .menu,
.anim .hand, .anim .lines, .anim .appwin, .anim .cards,
.anim .slider b, .anim .stamps i, .anim .canvas .guess, .anim .canvas .nib, .anim .canvas .real,
.anim .reveal, .anim .jit.shake i, .anim .race i, .anim .relay .sig, .anim .pipe i,
.anim .obj, .anim .obj.roll i, .anim .presser { animation: none; }
}
/* 分水嶺光譜 spectrum（舊↔新區間對照） */
.spectrum { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.spectrum .seg { flex: 1; padding: 12px 14px; text-align: center; }
.spectrum .seg small { display: block; font-size: .68rem; color: var(--muted); margin: 5px 0; }
.spectrum .seg b { display: block; margin-top: 4px; }
.spectrum .seg.old { background: var(--amber-bg); } .spectrum .seg.old b { color: var(--amber); }
.spectrum .seg.new { background: var(--red-bg); } .spectrum .seg.new b { color: var(--red); }
.spectrum .divider { display: grid; place-items: center; padding: 0 14px; background: var(--navy); color: #fff; font-family: var(--mono); font-size: .58rem; text-align: center; }
/* 紅旗清單 flags · 來源 sources · 更新日期 updated */
ul.flags { list-style: none; margin: 14px 0; }
ul.flags li { padding: 10px 0 10px 32px; position: relative; font-size: .92rem; color: var(--body); border-bottom: 1px solid var(--grid); }
ul.flags li::before { content: '🚩'; position: absolute; left: 0; top: 8px; }
ul.flags li b { color: var(--red); }
.sources { font-size: .82rem; color: var(--muted); line-height: 1.9; }
.sources a { color: var(--navy); text-decoration: none; border-bottom: 1px dotted var(--muted); word-break: break-all; }
/* 來源清單：原本是一長串用
·
· 串起來的段落（最長 399 字），改成逐條可掃描的清單。
每條之間有分隔線，眼睛不必自己數 · 在哪裡斷。純新增規則，不影響既有 .sources 段落。 */
ul.sources { list-style: none; margin: 8px 0 0; }
ul.sources li { padding: 6px 0 6px 17px; position: relative; border-bottom: 1px solid var(--grid); }
ul.sources li:last-child { border-bottom: 0; }
ul.sources li::before { content: '·'; position: absolute; left: 5px; color: var(--navy); font-weight: 700; }
.updated { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
/* 來源清單摺疊 details.src-fold：來源動輒 20 筆，全展開會把後面的常見問題、
延伸觀看與導購推到看不見的地方。預設收合、點一下展開； 是原生元素，
沒有 JS 也能開合，內容仍在 DOM 裡 → 搜尋引擎與 Pagefind 照樣讀得到。 */
details.src-fold { margin: 8px 0 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
details.src-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 11px 14px; font-size: .86rem; font-weight: 700; color: var(--navy);
list-style: none; border-radius: 10px; transition: background .14s; }
details.src-fold > summary::-webkit-details-marker { display: none; }
details.src-fold > summary::before { content: '›'; font-size: 1.15rem; line-height: 1;
color: var(--navy); transition: transform .18s; flex: none; }
details.src-fold[open] > summary::before { transform: rotate(90deg); }
details.src-fold > summary:hover { background: var(--navy-bg); }
details.src-fold > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
details.src-fold > summary .n { margin-left: auto; font-family: var(--mono); font-weight: 400;
font-size: .74rem; color: var(--muted); }
details.src-fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
details.src-fold ul.sources { margin: 0; padding: 4px 14px 10px; }
@media (prefers-reduced-motion: reduce) { details.src-fold > summary::before { transition: none; } }
.updated b { color: var(--amber); }
@media (max-width: 860px) {
nav { display: none; }
.inner, .masthead .top, .masthead .trust { padding-left: 20px; padding-right: 20px; }
.grid, .cgrid, .stats, .swatches { grid-template-columns: 1fr; }
.masthead .tagline { display: none; }
.spectrum { flex-direction: column; }
}
/* 560 而不是 860：導覽格三欄在平板寬度還讀得完，硬要提早拆成一欄反而變成一長條。 */
@media (max-width: 560px) {
.lead-map .lm-g { grid-template-columns: 1fr; }
}