/* issue 231 場景 devaeye-ops-arch：服務運行架構（分頁切換部署模式，每個模式一張可播放的連線架構圖；HTML 排版，文字隨寬度重排，不靠縮放圖片）。
   外層白色卡片（不受區段底色影響）含分頁列與深色舞台；寬螢幕（>= 62rem）照示意排格線，窄螢幕直排（390 寬不縮放、不橫向捲動）。
   顏色只讀官網 token（流向色與節點底色是 design-tokens.css 的 --arch-*）。沒有 JS 時所有分頁依序完整顯示；
   動畫、轉場與流動光點全部在檔案最後的 no-preference 區塊內，並由 JS 加上的 dvo-anim 啟動；淡化只在 JS 加上 dvo-focus 時出現。
   類別一律用 dvo- 前綴（issue 228：chrome.css 的全站游標佔用了幾個通用類別名稱，場景不得使用通用名稱）。 */
.page-blocks .dvo { display: block; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--elevation-card); }
.page-blocks .dvo [hidden] { display: none; }
.page-blocks .dvo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.page-blocks .dvo-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-blocks .dvo-sp { flex: 1; }
.page-blocks .dvo-tabs button, .page-blocks .dvo-ctl { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: .95rem; font-weight: 700; cursor: pointer; }
.page-blocks .dvo-tabs button[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.page-blocks .dvo-ctl[aria-pressed="true"] { background: var(--wash); }
.page-blocks .dvo-tabs button:hover, .page-blocks .dvo-ctl:hover { border-color: var(--ink); }
.page-blocks .dvo button:focus-visible { outline: 3px solid var(--cloudforce-blue); outline-offset: 2px; }
.page-blocks .dvo-arch { padding: clamp(.9rem, 2.5vw, 2rem); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--navy), var(--deeper)); color: var(--paper); }
.page-blocks .dvo-arch > * { min-width: 0; }
.page-blocks .dvo .dvo-h { margin: 0; color: var(--paper); font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-weight: 800; line-height: 1.3; }
.page-blocks .dvo-sub { margin: .3rem 0 1.4rem; color: var(--muted-on-dark); font-size: 1rem; line-height: 1.5; }
.page-blocks .dvo-pane + .dvo-pane { margin-top: 2.5rem; }
.page-blocks .dvo-js .dvo-pane + .dvo-pane { margin-top: 0; }
.page-blocks .dvo-note { margin: 1.2rem 0 0; padding: .7rem 1rem; border: 1px solid var(--arch-panel-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 7%, transparent); text-align: center; font-size: .95rem; font-weight: 700; }
.page-blocks .dvo-js .dvo-note { display: none; }
.page-blocks .dvo-ic { flex: none; width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .dvo-ic .dvo-f { fill: currentColor; }
/* ---- 色彩 ---- */
.page-blocks .dvo-o { --c: var(--arch-orange); } .page-blocks .dvo-p { --c: var(--arch-purple); } .page-blocks .dvo-r { --c: var(--arch-coral); } .page-blocks .dvo-t { --c: var(--arch-teal); } .page-blocks .dvo-g { --c: var(--arch-green); }
.page-blocks .dvo-nd.dvo-teal { --c: var(--arch-teal); } .page-blocks .dvo-nd.dvo-orange { --c: var(--arch-orange); } .page-blocks .dvo-nd.dvo-purple { --c: var(--arch-purple); }
.page-blocks .dvo-nd.dvo-red, .page-blocks .dvo-nd.dvo-coral { --c: var(--arch-coral); }
.page-blocks .dvo-nd.dvo-sky, .page-blocks .dvo-nd.dvo-ghost, .page-blocks .dvo-nd.dvo-hx { --c: var(--arch-sky); } .page-blocks .dvo-nd.dvo-green { --c: var(--arch-green); }
/* ---- 節點 ---- */
.page-blocks .dvo-nd { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: flex; align-items: center; gap: .8rem; width: 100%; margin: .5rem 0; padding: .9rem 1rem; border: 1.5px solid var(--c); border-radius: .9rem; background: color-mix(in srgb, var(--c) 11%, var(--arch-node)); color: var(--paper); text-align: left; cursor: pointer; }
.page-blocks .dvo-nd .dvo-ic { width: 2rem; height: 2rem; color: var(--c); }
.page-blocks .dvo-nd b { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.page-blocks .dvo-nd small { display: block; margin-top: .15rem; color: var(--muted-on-dark); font-size: .9rem; line-height: 1.5; }
.page-blocks .dvo-tag { position: absolute; top: .6rem; right: .7rem; padding: .05rem .65rem; border: 1.5px solid var(--c); border-radius: var(--r-pill); background: var(--arch-node); color: var(--c); font-size: .875rem; font-weight: 800; letter-spacing: .03em; }
.page-blocks .dvo-big { padding-top: 1.6rem; flex-wrap: wrap; }
.page-blocks .dvo-big b { font-size: 1.2rem; }
.page-blocks .dvo-big .dvo-tag { position: static; align-self: flex-start; }
.page-blocks .dvo-big .dvo-tx { flex: 1 1 9rem; }
.page-blocks .dvo-nd[aria-pressed="true"] { outline: 2px solid var(--paper); outline-offset: 2px; }
.page-blocks .dvo-ghost { border-color: var(--arch-line); background: color-mix(in srgb, var(--paper) 4%, transparent); }
.page-blocks .dvo-nd .dvo-pill { display: inline-block; margin-bottom: .5rem; padding: .1rem .8rem; border: 1.5px solid var(--arch-teal); border-radius: var(--r-pill); color: var(--arch-teal); font-size: .95rem; line-height: 1.5; }
.page-blocks .dvo-chs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; color: var(--muted-on-dark); font-size: .9rem; }
.page-blocks .dvo-ch { display: inline-flex; align-items: center; gap: .35rem; }
.page-blocks .dvo-ch .dvo-ic { width: 1.3rem; height: 1.3rem; color: var(--arch-sky); }
.page-blocks .dvo-sl { color: var(--on-dark-line); }
.page-blocks .dvo-hd { z-index: 1; display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .4rem; }
.page-blocks .dvo-hd span { display: block; padding: .7rem 1rem; border: 1.5px solid var(--c); border-radius: .9rem; color: var(--paper); font-size: 1.15rem; font-weight: 800; line-height: 1.3; text-align: center; }
.page-blocks .dvo-hd.dvo-navy span { --c: var(--arch-sky); background: var(--arch-navy-fill); }
.page-blocks .dvo-hd.dvo-coral span { --c: var(--arch-coral); background: var(--arch-coral-fill); }
.page-blocks .dvo-hd em { color: var(--muted-on-dark); font-size: .9rem; font-style: normal; text-align: center; }
.page-blocks .dvo-bg { display: none; border: 1.5px solid var(--on-dark-line); border-radius: 1.2rem; background: color-mix(in srgb, var(--paper) 2.5%, transparent); }
.page-blocks .dvo-end { margin: 1.8rem 0 0; padding: .7rem 1rem; border: 1px solid var(--arch-panel-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 7%, transparent); font-size: .95rem; font-weight: 700; text-align: center; }
.page-blocks .dvo-end i { color: var(--arch-teal); font-style: normal; font-weight: 900; }
/* ---- 連線 ---- */
.page-blocks .dvo-cn { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; column-gap: .9rem; min-height: 3.4rem; }
.page-blocks .dvo-lb { grid-column: 3; grid-row: 1; color: var(--c); font-size: .95rem; font-weight: 800; line-height: 1.4; text-align: left; }
.page-blocks .dvo-ic2 { grid-column: 1; grid-row: 1; justify-self: end; }
.page-blocks .dvo-ic2 .dvo-ic { width: 1.6rem; height: 1.6rem; color: var(--arch-teal); }
.page-blocks .dvo-tk { position: relative; display: block; grid-column: 2; grid-row: 1; justify-self: center; width: 2px; height: 2.8rem; background: var(--c); }
.page-blocks .dvo-ah { position: absolute; width: 0; height: 0; border: .42rem solid transparent; }
.page-blocks .dvo-ah-s { top: -1px; left: 50%; transform: translateX(-50%); border-top: 0; border-bottom: .7rem solid var(--c); }
.page-blocks .dvo-ah-e { bottom: -1px; left: 50%; transform: translateX(-50%); border-bottom: 0; border-top: .7rem solid var(--c); }
.page-blocks .dvo-ah-d { display: none; }
.page-blocks .dvo-dot { position: absolute; z-index: 3; display: none; left: 50%; top: 0; width: .85rem; height: .85rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 50%, transparent), 0 0 12px var(--c); transform: translate(-50%, -50%); }
/* ---- 狀態與面板 ---- */
.page-blocks .dvo-focus [data-k]:not(.dvo-is-on) { opacity: .28; }
.page-blocks .dvo-focus .dvo-is-on .dvo-tk { box-shadow: 0 0 6px var(--c); }
.page-blocks .dvo-nd.dvo-is-cur { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent), 0 0 26px color-mix(in srgb, var(--c) 40%, transparent); }
.page-blocks .dvo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.2rem 0 0; }
.page-blocks .dvo-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1.5px solid var(--c, var(--arch-line)); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 5%, transparent); color: var(--paper); font-size: .95rem; font-weight: 700; cursor: pointer; }
.page-blocks .dvo-chip[aria-pressed="true"] { background: var(--c, var(--arch-line)); color: var(--deeper); }
.page-blocks .dvo-chip.dvo-all { --c: var(--muted-on-dark); }
.page-blocks .dvo-status { display: block; min-height: 5.2rem; margin: 1.1rem 0 0; padding: .75rem 1rem; border: 1px solid var(--arch-panel-line); border-radius: .8rem; background: var(--arch-panel); color: var(--paper); font-weight: 800; line-height: 1.55; }
.page-blocks .dvo-status:empty { display: none; }
.page-blocks .dvo-status small { display: block; color: var(--on-dark-card-body); font-size: .95rem; font-weight: 500; }
.page-blocks .dvo-det { display: flex; flex-direction: column; gap: .15rem; min-height: 4.6rem; margin: .8rem 0 0; padding: .8rem 1rem; border: 1px dashed var(--arch-line); border-radius: .8rem; }
.page-blocks .dvo-det b { font-size: 1.05rem; }
.page-blocks .dvo-det span { color: var(--muted-on-dark); font-size: .95rem; }
.page-blocks .dvo-grid { display: flex; flex-direction: column; }
/* ===== 窄螢幕：直排（tri 依 DOM 順序，hub 用兩欄格線並排成對的連線與節點） ===== */
.page-blocks .dvo-g-tri > [data-c="1"]:not(.dvo-hd) { margin-top: 1.8rem; }
.page-blocks .dvo-g-tri > .dvo-hd { margin-top: 0; }
.page-blocks .dvo-g-tri > .dvo-hd + .dvo-hd { margin-top: 0; }
.page-blocks .dvo-g-hub { display: grid; grid-template-columns: 1fr 1fr; column-gap: .6rem; }
.page-blocks .dvo-g-hub > * { grid-column: 1 / -1; }
.page-blocks .dvo-g-hub > [data-pos="hd-r"] { grid-row: 1; margin-top: .4rem; }
.page-blocks .dvo-g-hub > [data-pos="src-1"] { grid-row: 2; } .page-blocks .dvo-g-hub > [data-pos="src-2"] { grid-row: 3; }
.page-blocks .dvo-g-hub > [data-pos="chan"] { grid-row: 4; } .page-blocks .dvo-g-hub > [data-pos="fw-r"] { grid-row: 5; }
.page-blocks .dvo-g-hub > [data-pos="lane-1"] { grid-row: 6; grid-column: 1; } .page-blocks .dvo-g-hub > [data-pos="lane-2"] { grid-row: 6; grid-column: 2; }
.page-blocks .dvo-g-hub > [data-pos="to-owner"] { grid-row: 7; }
.page-blocks .dvo-g-hub > [data-pos="hd-l"] { grid-row: 8; margin-top: 1.4rem; }
.page-blocks .dvo-g-hub > [data-pos="fw-l"] { grid-row: 9; } .page-blocks .dvo-g-hub > [data-pos="hub"] { grid-row: 10; }
.page-blocks .dvo-g-hub > [data-pos="to-agent"] { grid-row: 11; grid-column: 1; } .page-blocks .dvo-g-hub > [data-pos="to-feed"] { grid-row: 11; grid-column: 2; }
.page-blocks .dvo-g-hub > [data-pos="agent"] { grid-row: 12; grid-column: 1; align-self: start; } .page-blocks .dvo-g-hub > [data-pos="feed"] { grid-row: 12; grid-column: 2; align-self: start; }
.page-blocks .dvo-g-hub > [data-pos="owner"] { grid-row: 13; }
.page-blocks .dvo-g-hub .dvo-nd { margin: .5rem 0; }
.page-blocks .dvo-g-hub > [data-pos="agent"], .page-blocks .dvo-g-hub > [data-pos="feed"] { margin: .3rem 0; }
.page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"] > .dvo-ic, .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] > .dvo-ic { display: none; }
.page-blocks .dvo-g-hub > .dvo-cn[data-pos="lane-1"] .dvo-lb, .page-blocks .dvo-g-hub > .dvo-cn[data-pos="lane-2"] .dvo-lb,
.page-blocks .dvo-g-hub > .dvo-cn[data-pos="to-agent"] .dvo-lb, .page-blocks .dvo-g-hub > .dvo-cn[data-pos="to-feed"] .dvo-lb { font-size: .9rem; }
.page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="hub"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-l"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-r"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] { padding: .8rem; }
.page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-l"] small, .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-r"] small { margin-top: 0; }
/* ===== 寬螢幕：照示意版面 ===== */
@media (min-width: 62rem) {
  .page-blocks .dvo-nd { width: auto; margin: .5rem .8rem; }
  .page-blocks .dvo-hd { margin: .8rem .8rem .5rem; }
  .page-blocks .dvo-end { margin: .6rem .8rem 1rem; }
  .page-blocks .dvo-bg { display: block; z-index: 0; }
  .page-blocks .dvo-g-tri > [data-c="1"]:not(.dvo-hd) { margin-top: .5rem; }
  .page-blocks .dvo-g-tri { display: grid; --cw: clamp(7rem, 11vw, 10.5rem); grid-template-columns: minmax(0, 1.05fr) var(--cw) minmax(0, 1.6fr) var(--cw) minmax(0, 1.05fr); grid-template-rows: auto auto auto auto auto; }
  .page-blocks .dvo-g-tri [data-c="1"] { grid-column: 1; } .page-blocks .dvo-g-tri [data-c="2"] { grid-column: 2; } .page-blocks .dvo-g-tri [data-c="3"] { grid-column: 3; } .page-blocks .dvo-g-tri [data-c="4"] { grid-column: 4; } .page-blocks .dvo-g-tri [data-c="5"] { grid-column: 5; }
  .page-blocks .dvo-g-tri [data-r="1"] { grid-row: 1; } .page-blocks .dvo-g-tri [data-r="2"] { grid-row: 2; } .page-blocks .dvo-g-tri [data-r="3"] { grid-row: 3; } .page-blocks .dvo-g-tri [data-r="4"] { grid-row: 4; } .page-blocks .dvo-g-tri [data-r="5"] { grid-row: 5; }
  .page-blocks .dvo-g-tri > .dvo-bg { grid-row: 1 / 6; }
  .page-blocks .dvo-g-tri > .dvo-bg-l { grid-column: 1; border-color: color-mix(in srgb, var(--arch-sky) 45%, var(--deeper)); background: color-mix(in srgb, var(--arch-sky) 5%, transparent); }
  .page-blocks .dvo-g-tri > .dvo-bg-m { grid-column: 3; border-color: color-mix(in srgb, var(--arch-teal) 45%, var(--deeper)); background: color-mix(in srgb, var(--arch-teal) 4%, transparent); }
  .page-blocks .dvo-g-tri > .dvo-bg-r { grid-column: 5; border-color: color-mix(in srgb, var(--arch-coral) 50%, var(--deeper)); background: color-mix(in srgb, var(--arch-coral) 5%, transparent); }
  .page-blocks .dvo-g-tri .dvo-hd[data-r="1"] { margin-top: .8rem; }
  .page-blocks .dvo-g-tri .dvo-hd[data-c="1"] { margin-top: .9rem; }
  .page-blocks .dvo-cn { grid-template-columns: 1fr; grid-template-rows: 1fr 2px 1fr; align-items: stretch; row-gap: .3rem; min-height: 0; margin: 0 -.8rem; }
  .page-blocks .dvo-tk { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; height: 2px; }
  .page-blocks .dvo-lb { grid-column: 1; grid-row: 1; align-self: end; padding: 0 .5rem; text-align: center; }
  .page-blocks .dvo-lock .dvo-ic2 { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; }
  .page-blocks .dvo-lock .dvo-lb { grid-row: 3; align-self: start; }
  .page-blocks .dvo-ah-s { top: 50%; left: -1px; transform: translateY(-50%); border: .42rem solid transparent; border-left: 0; border-right: .7rem solid var(--c); }
  .page-blocks .dvo-ah-e { top: 50%; right: -1px; bottom: auto; left: auto; transform: translateY(-50%); border: .42rem solid transparent; border-right: 0; border-left: .7rem solid var(--c); }
  .page-blocks .dvo-ah-m { display: none; } .page-blocks .dvo-ah-d { display: block; }
  .page-blocks .dvo-dot { top: 50%; left: 0; }
  .page-blocks .dvo-g-tri .dvo-big { min-height: 6rem; flex-wrap: nowrap; }
  .page-blocks .dvo-g-tri .dvo-big .dvo-tag { position: absolute; }
  .page-blocks .dvo-g-tri .dvo-nd[data-c="1"], .page-blocks .dvo-g-tri .dvo-nd[data-c="5"] { min-height: 7.2rem; }
  /* 純地端（hub） */
  .page-blocks .dvo-g-hub { --lw: 5.5rem; grid-template-columns: minmax(0, 1.2fr) var(--lw) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1fr) 10rem minmax(0, 1fr) minmax(0, 1.6fr); grid-template-rows: auto 5.8rem minmax(8.8rem, auto) minmax(8.8rem, auto) auto; column-gap: 0; }
  .page-blocks .dvo-g-hub > .dvo-bg-l { grid-column: 1 / 6; grid-row: 1 / 6; border-color: color-mix(in srgb, var(--arch-coral) 50%, var(--deeper)); background: color-mix(in srgb, var(--arch-coral) 5%, transparent); }
  .page-blocks .dvo-g-hub > .dvo-bg-r { grid-column: 7 / 9; grid-row: 1 / 6; border-color: color-mix(in srgb, var(--arch-sky) 45%, var(--deeper)); background: color-mix(in srgb, var(--arch-sky) 5%, transparent); }
  .page-blocks .dvo-g-hub > [data-pos="hd-l"] { grid-column: 1 / 6; grid-row: 1; margin: .8rem .8rem .5rem; }
  .page-blocks .dvo-g-hub > [data-pos="hd-r"] { grid-column: 7 / 9; grid-row: 1; margin: .8rem .8rem .5rem; }
  .page-blocks .dvo-g-hub > [data-pos="agent"] { grid-column: 1; grid-row: 3 / 5; align-self: stretch; margin: .5rem .8rem; }
  .page-blocks .dvo-g-hub > [data-pos="hub"] { grid-column: 3 / 5; grid-row: 3 / 5; margin: .5rem .8rem; }
  .page-blocks .dvo-g-hub > [data-pos="fw-l"] { grid-column: 5; grid-row: 3 / 5; }
  .page-blocks .dvo-g-hub > [data-pos="fw-r"] { grid-column: 7; grid-row: 3 / 5; }
  .page-blocks .dvo-g-hub > [data-pos="src-1"] { grid-column: 8; grid-row: 3; } .page-blocks .dvo-g-hub > [data-pos="src-2"] { grid-column: 8; grid-row: 4; }
  .page-blocks .dvo-g-hub > [data-pos="chan"] { grid-column: 7 / 9; grid-row: 5; }
  .page-blocks .dvo-g-hub > [data-pos="owner"] { grid-column: 3 / 6; grid-row: 5; margin: .5rem .8rem .8rem; }
  .page-blocks .dvo-g-hub > [data-pos="to-owner"] { grid-column: 6; grid-row: 5; margin: 0 -.8rem; }
  .page-blocks .dvo-g-hub > [data-pos="to-owner"] .dvo-lb { font-size: .875rem; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"] > .dvo-ic, .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] > .dvo-ic { display: block; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="hub"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-l"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-r"] { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-l"], .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-r"] { justify-content: center; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"] .dvo-tx, .page-blocks .dvo-g-hub .dvo-nd[data-pos="hub"] .dvo-tx, .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-l"] .dvo-tx, .page-blocks .dvo-g-hub .dvo-nd[data-pos="fw-r"] .dvo-tx { text-align: center; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="hub"] .dvo-ic, .page-blocks .dvo-g-hub .dvo-nd[data-pos="agent"] .dvo-ic { width: 2.6rem; height: 2.6rem; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] { grid-column: 6; grid-row: 2; align-self: start; height: 4rem; margin: 0 .8rem; justify-content: center; text-align: center; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] .dvo-ic { display: none; }
  .page-blocks .dvo-g-hub .dvo-nd[data-pos="feed"] b { font-size: 1.2rem; }
  .page-blocks .dvo-g-hub > [data-pos="to-agent"] { grid-column: 2; grid-row: 3 / 5; margin: 0 -.8rem; }
  .page-blocks .dvo-g-hub > [data-pos="lane-1"] { grid-column: 5 / 8; grid-row: 3; margin: 0 -.8rem; }
  .page-blocks .dvo-g-hub > [data-pos="lane-2"] { grid-column: 5 / 8; grid-row: 4; margin: 0 -.8rem; }
  .page-blocks .dvo-g-hub > .dvo-cn[data-pos="lane-1"] .dvo-lb, .page-blocks .dvo-g-hub > .dvo-cn[data-pos="lane-2"] .dvo-lb { font-size: 1rem; }
  .page-blocks .dvo-g-hub > .dvo-cn[data-pos="to-agent"] .dvo-lb, .page-blocks .dvo-g-hub > .dvo-cn[data-pos="to-feed"] .dvo-lb { font-size: .95rem; }
  .page-blocks .dvo-g-hub > [data-pos="to-feed"] { grid-column: 4 / 6; grid-row: 2; display: block; min-height: 0; margin: 0 -.8rem 0 0; }
  .page-blocks .dvo-g-hub > [data-pos="to-feed"] .dvo-lb { position: absolute; left: .9rem; top: .1rem; padding: 0; text-align: left; }
  .page-blocks .dvo-g-hub > [data-pos="to-feed"] .dvo-tk { position: absolute; top: 2rem; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-top: 2px solid var(--c); border-left: 2px solid var(--c); background: none; }
  .page-blocks .dvo-g-hub > [data-pos="to-feed"] .dvo-ah-e { top: -1px; }
  .page-blocks .dvo-g-hub .dvo-nd { width: auto; margin: .5rem .8rem; }
}
@media (min-width: 62rem) and (max-width: 79.99rem) {
  .page-blocks .dvo-g-tri .dvo-nd > .dvo-ic { display: none; }
  .page-blocks .dvo-g-tri .dvo-big { flex-wrap: wrap; padding-top: .9rem; }
  .page-blocks .dvo-g-tri .dvo-big .dvo-tag { position: static; order: -1; align-self: flex-start; }
  .page-blocks .dvo-g-tri .dvo-cn .dvo-lb { padding: 0 .2rem; font-size: .875rem; }
}
/* issue 289：窄螢幕（單欄）下半欄寬的連線標籤改成「線在左、字在右」，不再擠成 38px 直排窄欄；節點標題平衡換行，不留孤字 */
@media (max-width: 61.99rem) {
  .page-blocks .dvo-g-hub > .dvo-cn:is([data-pos="lane-1"], [data-pos="lane-2"], [data-pos="to-agent"], [data-pos="to-feed"]) { grid-template-columns: 2px minmax(0, 1fr); }
  .page-blocks .dvo-g-hub > .dvo-cn:is([data-pos="lane-1"], [data-pos="lane-2"], [data-pos="to-agent"], [data-pos="to-feed"]) .dvo-tk { grid-column: 1; }
  .page-blocks .dvo-g-hub > .dvo-cn:is([data-pos="lane-1"], [data-pos="lane-2"], [data-pos="to-agent"], [data-pos="to-feed"]) .dvo-lb { grid-column: 2; }
  .page-blocks .dvo-nd b { text-wrap: balance; }
}
@media (max-width: 30rem) { .page-blocks .dvo-nd b { font-size: 1rem; } .page-blocks .dvo-nd { gap: .6rem; padding-inline: .8rem; } }
/* ===== 動畫：只在允許動態時；沒有 JS（沒有 dvo-anim）或減少動態、網站動態關閉時一律靜止 ===== */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .dvo-nd { transition: opacity .45s, box-shadow .3s; }
  html:not([data-motion="off"]) .page-blocks .dvo-cn, html:not([data-motion="off"]) .page-blocks .dvo-end { transition: opacity .45s; }
  html:not([data-motion="off"]) .page-blocks .dvo-anim .dvo-is-on .dvo-dot { display: block; animation: dvo-mvy 2.2s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .dvo-anim .dvo-is-on .dvo-dot-r { animation-direction: reverse; animation-delay: -1.1s; }
  html:not([data-motion="off"]) .page-blocks .dvo-anim .dvo-is-on .dvo-dot-back { animation-direction: reverse; }
  html:not([data-motion="off"]) .page-blocks .dvo-paused .dvo-dot { animation-play-state: paused; }
  @keyframes dvo-mvy { from { top: 0; } to { top: 100%; } }
  @media (min-width: 62rem) {
    html:not([data-motion="off"]) .page-blocks .dvo-anim .dvo-is-on .dvo-dot { animation-name: dvo-mvx; }
    html:not([data-motion="off"]) .page-blocks .dvo-anim .dvo-g-hub > [data-pos="to-feed"].dvo-is-on .dvo-dot { animation-name: dvo-mvel; animation-duration: 2.6s; }
    @keyframes dvo-mvx { from { left: 0; } to { left: 100%; } }
    @keyframes dvo-mvel { 0% { left: 0; top: 100%; } 38% { left: 0; top: 0; } 100% { left: 100%; top: 0; } }
  }
}