/* 261022 影音轉逐字稿教學：本篇元件（前綴 .x-），疊在 site.css 的 .article--tech 之上。
   動效原則：基礎樣式就是終態；只有 html.x-motion（JS 確認支援且未要求減少動態）才先藏起、進場播一次。 */
.article--tech {
  --x-acc: #1F345C;      /* 瑞獅深海軍藍 */
  --x-acc-soft: #E3E7EE;
  --x-ok: #3a5a40;       /* 同 callout--tip */
  --x-warm: #9A4B12;     /* 同 callout--warn */
  --x-pit: #B3261E;      /* 同 callout--pitfall */
  --x-paper: #F7F6F2;
  --x-ease: cubic-bezier(.2, .7, .2, 1);
}

.x-sub { font-size: 17px; color: var(--ink-2); margin: -.4em 0 1.4em; }

/* 對話泡泡：小獅妹在左、阿瑋在右 */
.x-chat { display: grid; gap: 14px; margin: 1.6em 0 2em; }
.x-bub { display: flex; align-items: flex-end; gap: 10px; }
.x-bub--r { flex-direction: row-reverse; }
.x-bub--r .x-stk { transform: scaleX(-1); }  /* 阿瑋貼紙朝右，放右側時翻成面向小獅妹；小獅妹不翻（護肘要在右手） */
.x-stk { width: 128px; height: auto; flex: none; margin: 0; max-width: none;  /* site.css 的正文 img 有上下外距，貼紙不吃 */
   filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.article--tech .x-bub .x-stk { margin: 0; }  /* site.css 正文 img 選擇器權重較高，要拉到同級才蓋得掉 */
.x-stk--ph { height: 128px; border-radius: 50%; background: var(--x-acc-soft); color: var(--x-acc);
  display: grid; place-items: center; font-size: 26px; }
.x-say { position: relative; min-width: 0; max-width: 34em; background: var(--x-paper); border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px; padding: 10px 14px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.x-bub--r .x-say { border-radius: 18px 18px 6px 18px; background: #fff; }
.x-bub--l .x-say { border-color: rgba(31, 52, 92, .22); }
.x-say p { margin: 0; font-size: 16px; line-height: 1.8; }
/* C3 貼紙名牌：白底色框、下緣一條色影、前面一顆小圓點（Vic 10-22 選定） */
.x-who { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.6;
  padding: 0 9px 0 7px; margin-bottom: 6px; border-radius: 8px; background: #fff; border: 2px solid currentColor;
  box-shadow: 0 2px 0 currentColor; color: #B5782E; }
.x-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.x-bub--l .x-who { color: #3E6FB0; }

/* 兩行結論 */
.x-lead { border-left: 3px solid var(--x-acc); padding: .2em 0 .2em 1em; margin: 0 0 1.6em; }
.x-lead p { margin: 0; font-size: 18px; line-height: 1.8; color: var(--ink); font-weight: 500; }
.x-lead p + p { font-size: 16px; font-weight: 400; color: var(--ink-2); }

/* 數字 */
.x-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 2em; }
.x-stat { background: var(--x-paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; text-align: center; }
.x-stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--x-acc);
  font-variant-numeric: tabular-nums; }
.x-stat span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }

/* 結構圖 */
.x-dg { margin: 1.2em auto 1.8em; max-width: 520px; }
.x-dg svg { width: 100%; height: auto; display: block; overflow: visible; }
.x-dg text { font-family: var(--serif); fill: var(--ink-2); letter-spacing: .02em; }
.x-t14 { font-size: 13px; } .x-t15 { font-size: 15px; } .x-t16 { font-size: 16px; }
.x-mid { text-anchor: middle; } .x-end { text-anchor: end; }
.x-dg .x-mu { fill: var(--muted); } .x-dg .x-ink { fill: var(--ink); }
.x-dg .x-acc { fill: var(--x-acc); } .x-dg .x-warm { fill: var(--x-warm); } .x-dg .x-on { fill: #fff; }
.x-fill-ink { fill: var(--ink-2); }
.x-n { fill: #fff; stroke: var(--ink-2); stroke-width: 2; }
.x-n--acc { fill: var(--x-acc); stroke: var(--x-acc); }
.x-ln { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.x-ln--rail { stroke: var(--line); stroke-width: 4; }
.x-ln--ok { stroke: var(--x-ok); stroke-width: 3; }
.x-sep { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.x-pill { fill: #fff; stroke: var(--ink-2); stroke-width: 1.5; }
.x-pill--soft { fill: var(--x-paper); stroke: var(--line); }
.x-pill--mute { fill: rgba(0,0,0,.05); stroke: none; }
.x-pill--acc { fill: var(--x-acc-soft); stroke: var(--x-acc); }
.x-gate { fill: #FBEBD9; stroke: var(--x-warm); stroke-width: 2; }
.x-dev { fill: #fff; stroke: var(--ink-2); stroke-width: 2; }
.x-row { fill: var(--x-paper); stroke: var(--line); }
.x-scr { fill: var(--x-acc-soft); }  /* 裝置螢幕 */
.x-island { fill: var(--ink-2); }  /* 動態島、瀏海、側鍵、指槽 */
.x-on-fill { fill: #fff; }
.x-row--acc { fill: var(--x-acc-soft); stroke: var(--x-acc); }
.x-coin { fill: var(--x-acc); }

/* 色塊標籤卡：卡面一句話，細節點開 */
.x-card { background: var(--x-paper); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; }
.x-card__face { display: block; padding: 12px 14px; font-size: 16px; line-height: 1.8; color: var(--ink); list-style: none; }
.x-card__face::-webkit-details-marker { display: none; }
details.x-card > summary { cursor: pointer; min-height: 44px; }
.x-tag { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.7;
  border-radius: 999px; padding: 0 10px; margin-right: 8px; background: rgba(0,0,0,.06); color: var(--ink); white-space: nowrap; }
.x-tag--done, .x-tag--tip { background: #E3ECE4; color: var(--x-ok); }
.x-tag--role, .x-tag--step, .x-tag--time { background: var(--x-acc-soft); color: var(--x-acc); }
.x-tag--warn, .x-tag--pay { background: #FBEBD9; color: var(--x-warm); }
.x-tag--pit { background: #F8E1DF; color: var(--x-pit); }
.x-more { display: inline-block; font-size: 13px; color: var(--muted); margin-left: .4em; white-space: nowrap; }
.x-more::after { content: "▾"; display: inline-block; margin-left: .2em; transition: transform .2s; }
details[open] > summary .x-more::after { transform: rotate(180deg); }
.x-card__detail { padding: 0 14px 12px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.x-card__detail > *:last-child { margin-bottom: 0; }
.x-card__detail .prompt-block, .x-card__detail .tabs, .x-card__detail .table-wrap { margin: 1em 0; }
.x-card + .prompt-block, .prompt-block + .x-card { margin-top: 14px; }
.x-code { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto;
  font-size: 13px; line-height: 1.6; }
mark.x-fill { background: #E3E7EE; color: var(--x-acc); padding: 0 .2em; border-radius: 4px; }
mark.x-pending { background: #FFE8B0; color: #6B4A00; padding: 0 .2em; border-radius: 4px; }

/* ── 常駐：對話貼紙呼吸（Vic 2026-11-01）。對話在畫面裡才動（.live 由 article.js 加），兩人錯半拍；
   用 scale／translate 屬性，不蓋掉 .x-bub--r 的 transform 翻面 ── */
.x-chat.live .x-stk { animation: xBreath 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.x-chat.live .x-bub--r .x-stk { animation-delay: -1.8s; }
@keyframes xBreath { 0%, 100% { scale: 1 1; translate: 0 0; } 50% { scale: 1.015 1.03; translate: 0 -1px; } }

/* ── 進場：播一次就停 ── */
.x-motion .x-bub { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--x-ease), transform .5s var(--x-ease);
  transition-delay: calc(var(--i, 0) * 260ms); }
.x-motion .x-chat.go .x-bub { opacity: 1; transform: none; }
.x-motion .x-dg .nd { opacity: 0; transform: scale(.88); transform-box: fill-box; transform-origin: center;
  transition: opacity .45s var(--x-ease), transform .45s var(--x-ease); transition-delay: calc(var(--i, 0) * 150ms); }
.x-motion .x-dg .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--x-ease);
  transition-delay: calc(var(--i, 0) * 150ms); }
.x-motion .x-dg.go .nd { opacity: 1; transform: none; }
.x-motion .x-dg.go .ln { stroke-dashoffset: 0; }
.x-motion .x-dg marker path { opacity: 0; transition: opacity .25s; }  /* 箭頭尖端等線畫完才出現 */
.x-motion .x-dg.go marker path { opacity: 1; transition-delay: 1s; }
.x-motion .x-stat { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--x-ease), transform .5s var(--x-ease);
  transition-delay: calc(var(--i, 0) * 90ms); }
.x-motion .x-stats.go .x-stat { opacity: 1; transform: none; }
/* 第 5 章：影片卡抵達後，筆電輕彈一下、逐字稿逐行長出 */
.x-motion [data-dg="hof"] .hof-bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left center;
  transition: transform .45s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--b) * 110ms); }
.x-motion [data-dg="hof"].landed .hof-bar { transform: none; }
.x-motion [data-dg="hof"].landed .nd[data-i="2"] { animation: xHofBump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes xHofBump { 0% { transform: scale(1); } 35% { transform: scale(1.04, .97); } 100% { transform: scale(1); } }
/* A2 結構圖終點節點的脈動光圈：只在圖看得到時跑（.live），每 3.6 秒一次 */
.x-dg .x-halo { fill: none; stroke: var(--x-acc); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.x-motion .x-dg.live .x-halo { animation: xHalo 3.6s ease-out 1.6s infinite; }
.x-motion .x-dg.live .x-halo--r { animation-name: xHaloR; }
@keyframes xHalo { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes xHaloR { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08, 1.5); } }

/* B3 點詞找圖：圖說的關鍵詞可點，點了圖裡那一站亮起來。上下內距撐出 44px 點擊區、負外距不撐開行高 */
.x-dg figcaption { margin-top: 8px; font-size: 15px; line-height: 1.9; color: var(--ink-2); text-align: center; }
.x-k { display: inline-block; font: inherit; line-height: inherit; color: var(--x-acc); background: none; border: 0; cursor: pointer;
  padding: 11px 3px; margin: -11px 0; -webkit-tap-highlight-color: transparent; }
.x-k span { font-weight: 600; padding: 0 2px; border-bottom: 2px dotted currentColor; border-radius: 3px; transition: background-color .2s; }
.x-k[aria-pressed="true"] span { background: var(--x-acc-soft); border-bottom-style: solid; }
.x-k:focus-visible { outline: 2px solid var(--x-acc); outline-offset: -8px; border-radius: 8px; }
.x-dg .hit { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(31,52,92,.55)); animation: xHit .9s cubic-bezier(.3,1.6,.5,1); }
.x-dg text.hit { fill: var(--x-acc); font-weight: 700; }
@keyframes xHit { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* D1 螢光筆刷：結論與對話裡的粗體，捲到時從左刷到右 */
.x-lead strong, .x-say strong { font-weight: 700; padding: 0 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1,9 C20,6 45,7 99,5 L98,17 C70,18 30,19 2,16 Z' fill='%23FFD966' fill-opacity='.75'/%3E%3C/svg%3E") no-repeat 0 75% / 100% 60%; }
.x-motion .x-lead strong, .x-motion .x-say strong { background-size: 0% 60%; transition: background-size .8s var(--x-ease) .35s; }
.x-motion .go strong { background-size: 100% 60%; }

/* CTA：T3 亞麻按鈕＋落花（Vic 10-22 選定）。平常偶爾自己按一下、背後探出一兩朵花；按下去花從背後冒出、先往上再落下 */
.article--tech .x-cta { position: relative; overflow: hidden; margin: 2em 0; padding: 76px 0 64px; touch-action: manipulation; }
.article--tech .x-cta .cta__btn { position: relative; z-index: 2; gap: .45em; color: #3F5A45; border: 2px solid #7E9C82;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 2.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2 .08' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #F7F8EF 0%, #E8EEDC 100%); box-shadow: 3px 3px 0 #E6ECF4, inset 0 1.5px 0 rgba(255,255,255,.8);
  transition: transform .5s cubic-bezier(.3,1.7,.45,1), box-shadow .3s; }
.article--tech .x-cta .cta__btn:hover { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 2.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2 .08' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #F7F8EF 0%, #E8EEDC 100%); box-shadow: 3px 3px 0 #D6E0EE, inset 0 1.5px 0 rgba(255,255,255,.8); }
.article--tech .x-cta .cta__btn:active, .article--tech .x-cta .cta__btn.tap { box-shadow: 1px 1px 0 #E6ECF4, inset 0 1.5px 0 rgba(255,255,255,.8); }
.article--tech .x-cta .cta__btn:active { transform: translateY(2px) scale(.95, .92); transition-duration: .08s; }
.article--tech .x-cta .cta__btn:focus-visible { outline: 2px solid #3F5A45; outline-offset: 3px; }
.x-cta .cta__btn.tap { animation: xTap .7s cubic-bezier(.3,1.7,.45,1); }
@keyframes xTap { 0% { transform: none; } 22% { transform: translateY(2px) scale(.94, .9); } 100% { transform: none; } }
.x-ic { width: 15px; height: 15px; flex: none; }
.x-fl { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.x-fl.back { z-index: 1; }
.x-fl svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .x-motion .x-bub, .x-motion .x-dg .nd, .x-motion .x-stat { opacity: 1 !important; transform: none !important; transition: none !important; }
  .x-motion .x-dg .ln { stroke-dashoffset: 0 !important; transition: none !important; }
  .x-motion [data-dg="hof"] .hof-bar { transform: none !important; }
  .x-dg .hit, .x-cta .cta__btn.tap { animation: none; }
  .x-fl { display: none; }
  .x-chat.live .x-stk { animation: none; }
}

@media (max-width: 720px) {
  .x-stk { width: 96px; }
  .x-stk--ph { height: 96px; }
  .x-stat b { font-size: 24px; }
}

/* 桌面側欄目錄：site.css 只放在第 1 列，目錄比第一段高，第一段下方會空一大塊。
   改成正文每段一列、最後加一條 1fr 列，目錄跨到最後一列，高度只落在 1fr 那列。
   正文沒有 row-gap，多出來的空 auto 列高 0，所以列數給寬裕的固定值，不必逐篇計算 */
@media (min-width: 1200px) {
  .article--tech .article__body { grid-template-rows: repeat(300, auto) 1fr; }
  .article--tech .article__body > .toc { grid-row: 1 / span 301; }
}

/* ── 教學頁與參數化結構圖補充（2026-10-23 併入：SaaS 課） ── */
.x-stat b em { font-style: normal; }
.x-n--warm { fill: var(--x-warm); stroke: var(--x-warm); }
.x-q { fill: #fff; stroke: var(--x-acc); stroke-width: 1.5; }
.x-lesson { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--x-acc); padding-left: .8em; }
.x-lesson--bad { border-color: var(--x-pit); }

/* ── 難易度撥桿（Vic 2026-11-01，母案〈沒有煩惱的日子〉剪片教學）：看懂／照著做／幕後技術三段。
   文首一顆＋捲過後浮出的膠囊（.x-lvbar--cap，fixed 在頁首下方）；分層段落 .x-lv 是加上去的，不替換原文。
   沒有 JS（html 沒有 .x-lv-on）時三層全顯示。滑塊移動是回饋層動效，新出現的段落淡入一次是認知層，reduced-motion 全歸零。 ── */
.x-lvbar { margin: 0 0 1.6em; }
.x-lvbar__seg { position: relative; display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 999px;
  background: var(--x-paper); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0,0,0,.05); }
.x-lvbar__b { position: relative; z-index: 1; min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; background: none; border-radius: 999px;
  font: inherit; font-size: 15px; letter-spacing: .06em; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s; }
.x-lvbar__b[aria-checked="true"] { color: #fff; font-weight: 500; }
.x-lvbar__b:focus-visible { outline: 2px solid var(--x-acc); outline-offset: 2px; }
.x-lvbar__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: var(--x-acc); box-shadow: 0 2px 6px rgba(31,52,92,.25); transition: transform .32s var(--x-ease); display: none; }
.x-lv-on .x-lvbar__thumb { display: block; }
.x-lvbar[data-at="2"] .x-lvbar__thumb { transform: translateX(100%); }
.x-lvbar[data-at="3"] .x-lvbar__thumb { transform: translateX(200%); }
.x-lvbar__hint { margin: .5em 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
html:not(.x-lv-on) .x-lvbar { display: none; }
.x-lvbar--cap { --x-acc: #1F345C; --x-paper: #F7F6F2; --x-ease: cubic-bezier(.2, .7, .2, 1);  /* 膠囊掛在 body 下，拿不到 .article--tech 的變數 */
  position: fixed; z-index: 25; top: calc(var(--x-hdr, 72px) + 8px); right: var(--x-capr, 16px); margin: 0;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .25s var(--x-ease); }
.x-lvbar--cap.show { opacity: 1; transform: none; pointer-events: auto; }
.x-lvbar--cap .x-lvbar__seg { background: rgba(247,246,242,.94); box-shadow: 0 4px 14px rgba(0,0,0,.12); backdrop-filter: blur(6px); }
.x-lvbar--cap .x-lvbar__b { min-width: 0; padding: 0 12px; font-size: 15px; }

.x-lv { margin: 1.2em 0 1.4em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--x-ok); }
.x-lv--deep { border-left-color: var(--x-acc); }
.x-lv__tag { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.7; border-radius: 999px;
  padding: 0 10px; margin: 0 0 .5em; background: #E3ECE4; color: var(--x-ok); }
.x-lv--deep .x-lv__tag { background: var(--x-acc-soft); color: var(--x-acc); }
.x-lv > *:last-child { margin-bottom: 0; }
.x-lv-on[data-xlv="1"] .x-lv, .x-lv-on[data-xlv="2"] .x-lv[data-lv="3"] { display: none; }
.x-lv--in { animation: xLvIn .45s var(--x-ease); }
@keyframes xLvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-lvbar__thumb, .x-lvbar__b, .x-lvbar--cap { transition: none; }
  .x-lv--in { animation: none; }
}
@media (max-width: 720px) {
  .x-lvbar__seg { display: grid; width: 100%; }
  .x-lvbar--cap { left: 16px; right: 16px; }
  .x-lvbar--cap .x-lvbar__seg { width: 100%; }
}

/* 截圖（2026-11-02，母案〈沒有煩惱的日子〉剪片教學）：圖說和結構圖同字級 */
.x-shot { margin: 1.4em 0 1.8em; }
.x-shot img, .article__body .x-shot img { display: block; width: 100%; height: auto; margin: 0; border-radius: 10px; box-shadow: 0 6px 18px rgba(60, 40, 20, .10); }
.x-shot figcaption { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--ink-2); text-align: center; }