/* 即時譯幕 產品頁樣式
 *
 * CSP 為 default-src 'none'、style-src 'self'（不含 'unsafe-inline'），因此所有樣式
 * 必須在本檔，頁面內不得出現 <style> 區塊或 style="..." 屬性。
 *
 * 配色走暖色系（琥珀／赤陶／奶油），調性偏教育場域的柔和親切，而非冷科技感。
 * 所有前景／背景組合都以 WCAG 相對亮度公式實算過，兩種色彩模式皆達 AA
 * （一般文字 4.5:1、UI 元件邊界 3:1）。 */

:root {
  color-scheme: light dark;

  /* 深色（預設）＝暖棕。註記為實算的對比值。 */
  --bg: #17110c;
  --bg-soft: #201810;
  --surface: #2a2016;
  --border: #3a2d20;          /* 僅供裝飾性分隔線——對 --bg 僅 1.51:1，不可用於 UI 元件邊界 */
  --border-strong: #8a7259;   /* UI 元件邊界（SC 1.4.11 需 3:1）：對 bg 4.13:1、bg-soft 3.86:1、surface 3.52:1 */
  --text: #f7ece0;            /* 16.07:1 */
  --text-dim: #cbb49c;        /*  9.40:1（於 surface 上 8.01:1） */
  --text-faint: #a08b74;      /*  5.74:1（於 surface 上 4.89:1） */
  --brand: #f97316;
  --brand-2: #fbbf24;
  --link: #fbbf24;            /* 11.21:1 於 bg。注意：對 --text 僅 1.43:1，因此連結必須另加底線 */
  --btn-fg: #2b1608;          /* 於 brand→brand-2 漸層上最差 6.14:1 */
  --ok: #a3e635;              /* 12.41:1 */
  /* 警示刻意跳出琥珀家族改用緋紅——理由與色相距離見 .notice 區塊註解 */
  --notice-bg: #2e1116;
  --notice-border: #e8637f;   /* 對頁面 bg 5.81:1 */
  --notice-text: #ffdbe1;     /* 13.64:1 於 notice-bg */

  --radius: 18px;
  --maxw: 1080px;
  --gap: clamp(1rem, 3vw, 2rem);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fffaf2;
    --bg-soft: #ffffff;
    --surface: #fdf2e3;
    --border: #eadbc8;
    --border-strong: #a08466;  /* 對 bg 3.38:1、bg-soft 3.51:1、surface 3.17:1 */
    --text: #2a1c10;           /* 15.89:1 */
    --text-dim: #5c4632;       /*  8.50:1（於 surface 上 7.99:1） */
    --text-faint: #75604a;     /*  5.73:1（於 surface 上 5.38:1） */
    /* 深色模式的琥珀（#fbbf24）在奶油底上只有 1.6:1，橘（#f97316）也僅 2.9:1——
       兩者都撐不起淺底的文字對比，漸層兩端必須整組換成更深的赤陶與焦糖。 */
    --brand: #c2410c;
    --brand-2: #a3521a;
    --link: #b03a06;           /* 5.85:1 於 bg */
    --btn-fg: #ffffff;         /* 於 brand→brand-2 漸層上最差 5.18:1 */
    --ok: #4d7c0f;             /* 4.81:1 */
    --notice-bg: #ffe4e6;
    --notice-border: #be123c;  /* 對頁面 bg 6.05:1 */
    --notice-text: #881337;    /* 7.97:1 於 notice-bg */
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* 只壓縮 duration 不夠：字幕示範的六段延遲（0.4s～3.9s）會讓內容照樣分批跳出，
       前庭敏感的使用者要的是「一次看到完整結果」。負延遲讓動畫立刻落在終態。 */
    animation-delay: -1ms !important;
    transition-delay: 0s !important;
  }
}

/* U+2014 EM DASH 同時存在於 SF Pro 與 Segoe UI，因此「——」永遠由拉丁字型繪製：
   兩條短線中間會有斷口，且落在拉丁基線而非漢字中線，接不成一條連續的線。
   把這個範圍導回中文字型即可。用 local() 不發出任何網路請求，也就不必為字型鬆綁 CSP；
   若使用者機器上沒有這些字型，會靜默回退到現況（不會更糟）。 */
@font-face {
  font-family: cjk-dash;
  src: local("PingFangTC-Regular"), local("PingFang TC"),
       local("Microsoft JhengHei"), local("Noto Sans CJK TC");
  unicode-range: U+2014-2015;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 拉丁字型排在中文字型之前是 CJK 網站的標準做法：字型比對逐字元進行，
     拉丁字與數字用 SF Pro／Segoe UI，漢字自然回退到蘋方／微軟正黑。
     末端的 Noto Sans CJK TC 是 Linux／Android 的系統字名（與 Google Fonts 的
     「Noto Sans TC」不同），避免只裝了簡體字型的機器落到簡體字面。 */
  font-family: cjk-dash, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

/* 連結一律加底線：實算顯示深色模式下琥珀對正文只有 1.43:1、淺色模式的赤陶對正文
   也只有 2.72:1，都遠低於 3:1 的區辨門檻——顏色無法獨力標示連結（SC 1.4.1）。
   暖色系讓這個問題更嚴重（連結色與正文同屬暖色相，色相差也幫不上忙），底線更不可省。 */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* 螢幕閱讀器專用：視覺隱藏但保留在無障礙樹中 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 跳過導覽：鍵盤聚焦時才現身（頁首有 5 個連結，否則每次進站都要 Tab 5 次才到主要 CTA） */
.skip-link:focus {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 50;
  width: auto; height: auto;
  padding: 0.7rem 1.1rem;
  margin: 0;
  overflow: visible;
  clip-path: none;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  text-decoration: none;
}

/* 錨點目標以程式移動焦點時不該畫外框（:focus-visible 仍會依鍵盤操作顯示） */
main:focus, section:focus { outline: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); }

section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
section + section { border-top: 1px solid var(--border); }

/* 標題不套負字距：漢字字面本就填滿字身框、側邊留白極小，再收緊會讓相鄰字視覺相黏。
   行高也比拉丁文需要更寬——漢字沒有升降部的天然留白。

   不要為了「親切感」在標題加 ui-rounded（或任何圓體）：暖色改版時試過並否決。
   全站 h1/h2/h3 實測共 286 個漢字、只有 11 個拉丁字元，且全集中在同一個標題
   （「為什麼不在 Mac App Store 上架？」）。macOS 沒有繁中圓體，漢字一定落回蘋方，
   結果只會讓那一個標題變成「拉丁圓潤、中文方正」的混排，比統一字型更難看。
   Chrome 實測也不支援 ui-rounded/ui-serif/ui-monospace（全部靜默落回預設字型），
   直接指名 "SF Pro Rounded" 同樣拿不到。中文站的柔和感要靠顏色、圓角與留白，不是字型。 */
h1, h2, h3 { letter-spacing: normal; margin: 0 0 0.6em; }
h1, h2 { line-height: 1.35; }
h3 { line-height: 1.45; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; }

/* 中文沒有詞界，瀏覽器會在任意字元間斷行，「變／成」這種拆法很難讀，而
   text-wrap: balance 只是讓各行長度平均、猜不出語意邊界。把標題切成語意單位
   並設 inline-block，斷行就只會發生在單位之間（逗號因此留在行末，不會跑到行首）。
   單位內部在窄螢幕仍可換行，所以不會溢出。 */
h1 .line { display: inline-block; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 650; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1rem; }

/* 行長用 em 而非 ch：ch 是「0」字元的前進寬度，在中文字型約 0.55em，
   46ch 實際只有 25 個漢字，與直覺差很多。em 才等於漢字數。 */
.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-dim);
  max-width: 30em;
  text-wrap: pretty;
}
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 0.92rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;              /* 同時解掉瀏覽器的等寬字級怪癖 */
  background: var(--surface);
  padding: 0.15em 0.4em;
  border-radius: 6px;
  word-break: break-all;
}

/* ---------- 頁首 ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 650; color: var(--text); text-decoration: none;
  padding: 0.4rem 0.3rem; margin: -0.4rem -0.3rem;   /* 負 margin：撐大命中區但不影響版面 */
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.site-head nav { display: flex; gap: 0.6rem; font-size: 0.95rem; }
.site-head nav a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.55rem 0.4rem;
  margin: -0.55rem 0;            /* 抵銷垂直 padding 對頁首高度的影響 */
}
.site-head nav a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
}

.gradient-text {
  background: linear-gradient(100deg, var(--brand) 10%, var(--brand-2) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 「任何聲音」是一個語意單位，被拆成「任何聲／音」會很難讀。
     四個字不至於造成溢出，可以安全地釘住。 */
  white-space: nowrap;
}

/* ---------- 按鈕 ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin: 1.8rem 0 0.9rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.02rem;
  font-family: inherit;            /* <button> 預設不繼承字型，會掉回瀏覽器的 UI 字體 */
  border: 1px solid transparent;   /* 預留邊框寬度，hover 換色時不會位移 */
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  color: var(--btn-fg);
}
/* hover 的明暗方向必須跟著色彩模式走：深色底提亮、淺色底加深。
   淺色模式若照樣提亮，白字對比會從 5.18:1 掉到 4.54:1（貼著 AA 門檻），
   而且「hover 讓按鈕變淡」在淺色底上讀起來像失效而非強調。加深後回到 5.93:1。 */
.btn-primary:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: light) {
  .btn-primary:hover { filter: brightness(0.92); }
}
/* 邊框是這顆按鈕唯一的輪廓（背景透明），因此必須用達 3:1 的 --border-strong */
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface); }
.btn-meta { font-weight: 450; opacity: 0.8; font-size: 0.9rem; }

.req-line { color: var(--text-faint); font-size: 0.92rem; margin: 0; }

/* ---------- 相容性提示（由 site.js 顯示） ----------
 *
 * 底色與頁面背景的對比只有 1.08:1（深色）／1.16:1（淺色），光靠底色看不出是獨立
 * 區塊，因此邊框是必要的。
 *
 * 為什麼是緋紅而不是琥珀：這個區塊原本用琥珀警示色，之所以一眼讀得出「警告」，
 * 是因為它是整個冷藍頁面上唯一的暖色。頁面全面改暖色系之後，琥珀與品牌色同屬
 * 一個色相家族，警示訊號會被稀釋到消失——尤其淺色模式的品牌色本身就是赤陶，
 * 實測色相只差 1°，警告框會和它正下方的下載按鈕看起來同一類東西。
 * 改用緋紅後拉開到 32°（淺色）／38°（深色）。
 * 改動品牌色時必須重新量這個色相距離，低於約 25° 就要重選警示色。
 *
 * 左側粗邊是第二道保險：色相距離只在「同時看到兩者」時有效，而警告可能單獨出現
 * 在視野中。4px 實心左邊條是通用的 alert 形制，不依賴顏色即可辨識（SC 1.4.1）。 */

.notice {
  display: none;
  margin: 0 0 1.2rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--notice-border);
  border-left-width: 4px;
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.notice.is-visible { display: block; }

/* ---------- 字幕浮窗動畫 ----------
 *
 * 重現產品核心體驗：暫定字幕逐步浮現（可隨語音修正）→ 語句定稿凍結 → 譯文接上。
 * 靜態截圖表現不出這個過程，因此主視覺用動畫而非圖片。
 *
 * 這一區在淺色模式下**刻意維持深色**：它模擬的是真實的字幕浮窗（本來就是深色半透明），
 * 保持深色比跟著頁面翻白更忠實。因此以下顏色寫死，不吃色彩模式變數。
 *
 * 暖色改版時查證了真實浮窗：CaptionView.swift 是 Color.black.opacity(0.75) 配白字
 * （.white.opacity(0.72/0.85/0.66)）——是**純黑**，不是深藍。舊版的 #10203a/#0a1526
 * 藍調是網站自己加的風格化，並非還原。因此「維持深色」的結論保留，但改成中性偏暖的
 * 深色，反而比原本的藍調更貼近產品實際外觀。caption-card 直接用 rgba(0,0,0,.82)。 */

.demo {
  background: linear-gradient(150deg, #241a12, #180f09 60%);
  border: 1px solid #3d2c1d;
  border-radius: 24px;
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: 0 20px 50px -26px rgba(249, 115, 22, 0.28);   /* = --brand #f97316 */
}
.demo-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #b09a84;
  font-size: 0.82rem;
  margin-bottom: 0.9rem;
}
.demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a3e635;
  /* 只脈動 3 次後停住：無限循環的自動動畫需要暫停機制（SC 2.2.2），
     而這個點的用途只是暗示「進行中」，重複到永遠沒有增益。 */
  animation: pulse 2.4s ease-in-out 3;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.caption-card {
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(220, 180, 130, 0.18);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
}
.cap-src {
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  color: #f0e6db;
  min-height: 1.7em;
}
.cap-dst {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 600;
  color: #fff;
  min-height: 1.7em;
}

/* 暫定階段：斜體、低彩度暖灰褐；定稿後轉為高彩度暖白實色。
   「未定稿」的視覺弱化靠彩度與字形（斜體）雙管道表達，不是只靠顏色（SC 1.4.1）。 */
.cap-src .seg { opacity: 0; }
.cap-src .seg.tentative { color: #c9ab86; font-style: italic; }

/* 四個片段依序浮現，模擬 volatile 結果逐步累積 */
.demo-anim .cap-src .s1 { animation: appear 0.35s ease forwards 0.4s; }
.demo-anim .cap-src .s2 { animation: appear 0.35s ease forwards 1.1s; }
.demo-anim .cap-src .s3 { animation: appear 0.35s ease forwards 1.8s; }
.demo-anim .cap-src .s4 { animation: appear 0.35s ease forwards 2.5s; }
/* 定稿：整句由暫定樣式轉正 */
.demo-anim .cap-src { animation: settle 0.4s ease forwards 3.3s; }
/* 譯文在定稿後接上，然後整段停在定稿狀態——敘事已完成，不再重播 */
.demo-anim .cap-dst { opacity: 0; animation: appear 0.5s ease forwards 3.9s; }

@keyframes appear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes settle {
  to { color: #fdf6ee; font-style: normal; }
}

.demo-caption {
  margin: 0.9rem 0 0;
  color: #b09a84;
  font-size: 0.86rem;
  text-align: center;
}

/* ---------- 卡片格線 ---------- */

.grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { margin: 0; color: var(--text-dim); font-size: 0.97rem; }
.card-icon {
  width: 38px; height: 38px; margin-bottom: 0.8rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(249,115,22,0.20), rgba(251,191,36,0.24));
  color: var(--brand);
}
.card-icon svg { width: 20px; height: 20px; }

/* ---------- 隱私區塊 ---------- */

.privacy-band { background: var(--surface); }
.privacy-points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.85rem; }
.privacy-points li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-dim); }
.privacy-points svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ok); margin-top: 4px; }

/* ---------- 步驟 ---------- */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 1rem;
}
.steps h3 { margin-bottom: 0.35rem; }
.steps p { margin: 0; color: var(--text-dim); font-size: 0.97rem; }

/* ---------- 規格清單 ----------
 *
 * 原本是 <table>，但那是 label/value 結構、沒有表頭列，<dl> 語意更準確；
 * 也因此不需要 min-width 與水平捲動容器——那個容器不可聚焦，鍵盤使用者
 * 在窄螢幕上根本捲不動（SC 2.1.1）。 */

.spec { margin: 0; display: grid; gap: 0; }
@media (min-width: 640px) {
  .spec { grid-template-columns: minmax(6rem, 10rem) 1fr; }
}
.spec dt {
  font-weight: 600;
  color: var(--text);
  padding: 0.85rem 0 0.2rem;
}
.spec dd {
  margin: 0;
  color: var(--text-dim);
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) {
  .spec dt { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--border); }
  .spec dd { padding: 0.85rem 0; }
}
.spec > :last-of-type { border-bottom: 0; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0.8rem; }
details {
  background: var(--bg-soft);
  /* 卡片邊界屬 UI 元件，需達 3:1 */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
summary {
  cursor: pointer;
  /* 水平 padding 放在 summary 而非 details：放在 details 會讓卡片左右各有
     約 21px 點不到的死區。 */
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary h3 { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; }
summary::after {
  content: "+";
  color: var(--link);
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 1.2rem;              /* 固定寬度：+ 與 − 在部分字型下寬度不同，會推擠標題 */
  text-align: center;
}
details[open] summary::after { content: "\2212"; }
details p { color: var(--text-dim); margin: 0 0 1rem; font-size: 0.97rem; padding: 0 1.3rem; }
details p:last-of-type { margin-bottom: 1.1rem; }

/* ---------- 頁尾 ---------- */

.site-foot {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 3rem;
  color: var(--text-faint);
  font-size: 0.92rem;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.foot-links a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.5rem 0.4rem;
  margin: -0.5rem 0;
}
.foot-links a:hover { color: var(--text); text-decoration: underline; }
/* 行內的信箱連結原本命中高度只有字身框（約 17px），連 24px 都不到 */
.foot-mail { display: inline-block; padding: 0.35rem 0; }

/* ---------- 內文頁（隱私／條款） ---------- */

/* 40em ≈ 40 個漢字/行，落在中文長文建議的 30–40 字上緣；
   原本的 760px 是 44.7 字，回行時容易串行。 */
.doc { max-width: 40em; }
.doc h2 { margin-top: 2.4rem; }
.doc h2:first-of-type { margin-top: 1rem; }
.doc ul { color: var(--text-dim); padding-left: 1.3rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .updated { color: var(--text-faint); font-size: 0.9rem; }