/* issue 193 場景 cloudcoffer-direction：外對內／內對內／內對外。只讀官網 token 與 --accent*。
   沒有 JS：圖上三個方向全部亮起（無 data-dir）、三段說明完整列出。
   issue 313：不再釘住捲動；一般高度，圖與說明卡並排垂直置中，JS 自動輪播（is-auto／is-run）時卡片底部細線倒數、目前方向的連線上有光點流動。 */
.page-blocks .pp-scene--cloudcoffer-direction { --cd-fg: var(--ink); --cd-mute: var(--muted); --cd-edge: var(--line); --cd-hi: var(--accent-ink); --cd-node: var(--paper); --cd-panel: var(--surface-sunken); --cd-glow: color-mix(in srgb, var(--accent) 22%, transparent); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--cloudcoffer-direction { --cd-fg: var(--paper); --cd-mute: var(--muted-on-dark); --cd-edge: var(--on-dark-line); --cd-hi: var(--accent-dark); --cd-node: var(--deeper); --cd-panel: color-mix(in srgb, var(--paper) 6%, var(--deeper)); --cd-glow: color-mix(in srgb, var(--accent) 16%, transparent); }
.page-blocks .cd-stick { display: grid; gap: clamp(1rem, 3vh, 2rem); }
.page-blocks .cd-grid { display: grid; gap: clamp(1.25rem, 4vw, 4rem); align-items: center; }
.page-blocks .cd-fig { position: relative; min-width: 0; padding-bottom: 1.75rem; }
.page-blocks .cd-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 30px var(--cd-glow)); }
.page-blocks .cd-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: var(--cd-mute); font-size: .875rem; text-align: center; }
.page-blocks .cd-svg .xfill .a0, .page-blocks .cd-svg .a0 { stop-color: color-mix(in srgb, var(--accent) 14%, transparent); }
.page-blocks .cd-svg .a1 { stop-color: transparent; }
.page-blocks .cd-svg .xdots circle { fill: var(--cd-mute); opacity: .45; }
.page-blocks .cd-svg .nd rect { fill: var(--cd-node); stroke: var(--cd-mute); stroke-width: 1; }
.page-blocks .cd-svg .xbody { fill: none; stroke: var(--cd-mute); stroke-width: 1.5; }
.page-blocks .cd-svg .xbody2 { fill: none; stroke: var(--cd-edge); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(.93); }
.page-blocks .cd-svg text { fill: var(--cd-fg); font-size: 16px; font-weight: 600; text-anchor: middle; }
.page-blocks .cd-svg .lb { fill: var(--cd-mute); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.page-blocks .cd-svg .lk { fill: none; stroke: var(--cd-hi); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 10 8; }
.page-blocks .cd-svg .hd { fill: var(--cd-hi); }
.page-blocks .cd-svg .ob { fill: var(--cd-glow); stroke: var(--cd-hi); stroke-width: 1.5; }
/* 有 JS：只有目前方向亮，其餘退到背景 */
/* 方向標籤（.lb）不跟著退：仍保持可讀（muted 色＋區段底色描邊，連線與點陣不穿過字）。 */
.page-blocks .cd-svg[data-dir] .ln > :not(.lb) { opacity: .38; }
.page-blocks :is(.cd-svg[data-dir="in"] .ln.in, .cd-svg[data-dir="ew"] .ln.ew, .cd-svg[data-dir="out"] .ln.out) > :not(.lb) { opacity: 1; }
.page-blocks .cd-svg .lb { paint-order: stroke; stroke: var(--cd-node); stroke-width: 6px; stroke-linejoin: round; }
.page-blocks :is(.cd-svg[data-dir="in"] .ln.in, .cd-svg[data-dir="ew"] .ln.ew, .cd-svg[data-dir="out"] .ln.out) .lb { fill: var(--cd-fg); }
.page-blocks .cd-svg[data-dir] .ln:not(.is-hot) .lk { stroke: var(--cd-mute); stroke-width: 2; }
.page-blocks .cd-svg[data-dir] .ln:not(.is-hot) .hd { fill: var(--cd-mute); }
.page-blocks .cd-svg[data-dir] .ln:not(.is-hot) .ob { fill: var(--cd-node); stroke: var(--cd-mute); }
.page-blocks .cd-list { display: grid; gap: .625rem; min-width: 0; }
.page-blocks .cd-item { position: relative; overflow: hidden; padding: clamp(1.125rem, 1.6vw, 1.625rem) clamp(1.375rem, 1.8vw, 1.75rem); border: 1px solid var(--cd-edge); border-radius: var(--radius-l); background: var(--cd-panel); }
.page-blocks .cd-t { margin: 0 0 .375rem; color: var(--cd-fg); font-size: clamp(1.1rem, 1.35vw, 1.375rem); line-height: 1.35; }
.page-blocks .cd-t button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.page-blocks .cd-t button:focus-visible { outline: 3px solid var(--cd-hi); outline-offset: 4px; border-radius: var(--radius-m); }
.page-blocks .cd-item p { margin: 0; color: var(--cd-mute); font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.7; }
html.js .page-blocks .cd-item.is-on { border-color: var(--cd-hi); }
html.js .page-blocks .cd-item.is-on p { color: var(--cd-fg); }
@media (min-width: 62rem) { .page-blocks .cd-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .cd-svg .ln > * { transition: opacity .4s var(--ease), fill .4s var(--ease); }
  html:not([data-motion="off"]) .page-blocks .cd-svg[data-dir="in"] .ln.in .lk, html:not([data-motion="off"]) .page-blocks .cd-svg[data-dir="ew"] .ln.ew .lk, html:not([data-motion="off"]) .page-blocks .cd-svg[data-dir="out"] .ln.out .lk { animation: cd-flow 1.4s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .cd-item { transition: border-color var(--dur-base) var(--ease); }
}
@keyframes cd-flow { to { stroke-dashoffset: -36; } }
/* issue 313：自動輪播的倒數細線（卡片底部）與目前方向連線上的光點。只在允許動態時。 */
.page-blocks .cd-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cd-hi); transform-origin: left; scale: 0 1; pointer-events: none; }
.page-blocks .cd-svg .pk { fill: var(--cd-hi); visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .cd.is-auto.is-run .cd-item.is-on .cd-timer { animation: cd-timer 3.2s linear forwards; }
  html:not([data-motion="off"]) .page-blocks .cd-svg .ln.is-hot .pk { visibility: visible; animation: cd-pk 1.6s cubic-bezier(.45, 0, .3, 1) infinite; }
}
@keyframes cd-timer { to { scale: 1 1; } }
/* issue 316：箭頭改為 402～416（右框由 426 起，留 10px）；光點停在箭頭前（cx 190＋r 5＋188＝383），抵達前淡出，看起來像流進箭頭。 */
@keyframes cd-pk { 0% { opacity: 0; translate: 0 0; } 12%, 70% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; translate: 188px 0; } }

/* 窄螢幕：文字以 viewBox 單位放大，渲染後仍有 12px 以上 */
@media (max-width: 40rem) {
  .page-blocks .cd-svg text { font-size: 26px; }
  .page-blocks .cd-svg .lb { font-size: 24px; letter-spacing: .06em; }
}