/* 場景 solution-vibe-gates：Vibe coding 開發路徑的兩關圖。 */
/* 情境方案互動圖（solution-ai-path、solution-vibe-gates 共用同一份樣式本體，由測試鎖住兩檔一致）。深色舞台（--deeper）放圖；檢視面板、步驟卡、狀態句用淺色卡片。
   顏色只讀官網 token 與 --accent*：路徑用 --notice-accent，控制點依類型用 --sp-* 場景自訂屬性（值引用既有 token）。沒有 JS 時畫完整靜態圖與文字清單。 */
.page-blocks .sp { --sp-path: var(--notice-accent); --sp-allow: var(--muted-on-dark); --sp-block: var(--paper); --sp-detect: var(--on-dark-card-number); --sp-contain: var(--accent-dark); --sp-check: var(--accent-dark); --c: var(--accent-dark);
  display: grid; gap: clamp(1rem, 2vw, 1.5rem); color: var(--ink); }
.page-blocks .sp > * { min-width: 0; }
.page-blocks .sp .c-block { --c: var(--sp-block); } .page-blocks .sp .c-detect { --c: var(--sp-detect); } .page-blocks .sp .c-contain { --c: var(--sp-contain); } .page-blocks .sp .c-check { --c: var(--sp-check); }
.page-blocks .sp-topo { position: relative; overflow: hidden; border: 1px solid var(--on-dark-line); border-radius: var(--radius-xl); color: var(--paper);
  background: linear-gradient(color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px, var(--deeper); }
.page-blocks .sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--on-dark-line); min-height: 3.5rem; }
.page-blocks .sp-kicker { color: var(--accent-dark); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; }
.page-blocks .sp-count { margin-left: auto; color: var(--paper); font-weight: 800; }
.page-blocks .sp-count b { color: var(--sp-path); font-variant-numeric: tabular-nums; }
.page-blocks .sp-count.is-ok b { color: var(--accent-dark); }
.page-blocks .sp-count[hidden] { display: none; }
.page-blocks .sp-switches { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .sp-label { color: var(--muted-on-dark); font-size: .875rem; font-weight: 700; }
.page-blocks .sp-sel { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); }
.page-blocks .sp-sel button { all: unset; box-sizing: border-box; min-height: 2.25rem; padding: 0 .875rem; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--paper); font-size: .875rem; font-weight: 700; cursor: pointer; }
.page-blocks .sp-sel button[aria-checked="true"] { border-color: var(--sp-path); background: color-mix(in srgb, var(--sp-path) 18%, transparent); }
.page-blocks .sp-sel button:focus-visible, .page-blocks .sp-sw:focus-visible, .page-blocks .sp-replay:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .sp-sw { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .375rem .5rem .375rem 1rem; border: 1.5px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .9375rem; line-height: 1.2; cursor: pointer; }
.page-blocks .sp-sw b { font-weight: 700; }
.page-blocks .sp-sw small { color: var(--muted-on-dark); font-size: .8125rem; font-weight: 600; }
.page-blocks .sp-sw[aria-pressed="true"] { border-color: var(--c); }
.page-blocks .sp-knob { position: relative; box-sizing: border-box; flex: none; width: 3.5rem; height: 1.75rem; border: 1.5px solid var(--on-dark-line); border-radius: var(--r-pill); }
.page-blocks .sp-knob::before { content: attr(data-off); position: absolute; right: .5rem; top: 50%; translate: 0 -50%; color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; line-height: 1; }
.page-blocks .sp-knob::after { content: ""; position: absolute; left: .1875rem; top: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--muted-on-dark); transition: transform .25s var(--ease), background .25s; }
.page-blocks .sp-sw[aria-pressed="true"] .sp-knob { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, transparent); }
.page-blocks .sp-sw[aria-pressed="true"] .sp-knob::before { content: attr(data-on); right: auto; left: .5rem; color: var(--paper); }
.page-blocks .sp-sw[aria-pressed="true"] .sp-knob::after { background: var(--c); transform: translateX(1.75rem); }
.page-blocks .sp-replay { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1.5px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .9375rem; font-weight: 800; cursor: pointer; }
.page-blocks .sp-replay:hover, .page-blocks .sp-sw:hover { border-color: var(--paper); }
html:not(.js) .page-blocks .sp-switches, html:not(.js) .page-blocks .sp-inspect, html:not(.js) .page-blocks .sp-hint { display: none; }
/* 圖：窄螢幕放在可左右滑動的框內，頁面本身不橫向捲動 */
.page-blocks .sp-viz { overflow-x: auto; overscroll-behavior-x: contain; padding: .25rem .5rem 0; }
.page-blocks .sp-viz:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -3px; }
.page-blocks .sp-viz > svg { display: block; width: 100%; height: auto; font-family: inherit; }
.page-blocks .sp-swipe { display: none; margin: 0; padding: .5rem 1.25rem 0; color: var(--muted-on-dark); font-size: .8125rem; }
/* issue 289：平板（含 1024）也維持原尺寸可左右滑動，圖內字才不會縮到 7–9px；桌機（> 64rem）照舊整張縮放 */
@media (max-width: 64rem) { .page-blocks .sp-viz > svg { width: 1020px; max-width: none; } .page-blocks .sp-swipe { display: block; } }
/* issue 289：開關列窄螢幕不拆品牌名（粗體名稱不換行，說明文字可換行） */
@media (max-width: 30rem) { .page-blocks .sp-sw b { flex: none; white-space: nowrap; } .page-blocks .sp-sw small { flex: 1 1 0; min-width: 0; } }
/* 分區 */
.page-blocks .sp-zb { fill: color-mix(in srgb, var(--paper) 3%, transparent); stroke: var(--on-dark-line); stroke-width: 1.5; stroke-dasharray: 6 5; }
.page-blocks .sp-zt rect { fill: var(--deeper); stroke: var(--on-dark-line); }
.page-blocks .sp-zt text { fill: var(--muted-on-dark); font-size: 14px; font-weight: 700; }
.page-blocks .sp-zone.sub .sp-zb { stroke-dasharray: 3 5; stroke-width: 1.2; fill: color-mix(in srgb, var(--deeper) 40%, transparent); }
.page-blocks .sp-zone.sub .sp-zt text { font-size: 12.5px; font-weight: 600; }
/* 連線 */
.page-blocks .sp-seg { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .3s; }
.page-blocks .sp-e.lane .sp-seg, .page-blocks .sp-e.is-off .sp-seg { stroke: var(--sp-allow); stroke-width: 2; stroke-dasharray: none; opacity: 1; }
.page-blocks .sp-e.is-off .sp-seg { opacity: .55; }
.page-blocks .sp-dot { fill: var(--sp-allow); }
.page-blocks .sp-e.route:not(.is-off) .sp-seg, .page-blocks .sp-e.spread:not(.is-off) .sp-seg { stroke: color-mix(in srgb, var(--sp-path) 75%, transparent); stroke-width: 1.8; stroke-dasharray: 7 6; }
.page-blocks .sp .sp-e .sp-seg.is-path { stroke: var(--sp-path); stroke-width: 4.5; stroke-dasharray: 12 7; opacity: 1; }
.page-blocks .sp .sp-e .sp-seg.is-cut { stroke: var(--muted-on-dark); stroke-width: 2.4; stroke-dasharray: 3 6; opacity: .55; animation: none; }
.page-blocks .sp-x { opacity: 0; pointer-events: none; transition: opacity .3s; }
.page-blocks .sp-x.is-on { opacity: 1; }
.page-blocks .sp-x path { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
@keyframes sp-flowdash { to { stroke-dashoffset: -38; } }
/* 膠囊標籤 */
.page-blocks .sp-pill rect { fill: var(--deeper); stroke: var(--sp-path); stroke-width: 1.5; }
.page-blocks .sp-pill text { fill: var(--paper); font-size: 13px; font-weight: 800; }
.page-blocks .sp-pill.is-quiet rect { stroke: var(--on-dark-line); } .page-blocks .sp-pill.is-quiet text { fill: var(--muted-on-dark); }
.page-blocks .sp-pill { transition: opacity .35s; }
.page-blocks .sp-pill.is-dim { opacity: .3; }
.page-blocks .sp-pill.is-note { opacity: 0; } .page-blocks .sp-pill.is-note rect { stroke: var(--c); } .page-blocks .sp-pill.is-note.is-on { opacity: 1; }
/* 節點 */
.page-blocks .sp-hit { fill: transparent; stroke: none; }
.page-blocks .sp-node, .page-blocks .sp-gate { cursor: pointer; outline: none; }
.page-blocks .sp-ic { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.page-blocks .sp-lb { fill: var(--paper); font-size: 15px; font-weight: 700; }
.page-blocks .sp-sub { fill: var(--muted-on-dark); font-size: 12.5px; font-weight: 600; }
.page-blocks .sp-ring { fill: none; stroke: transparent; stroke-width: 3; transition: stroke .3s, fill .3s; }
.page-blocks .sp-node { transition: opacity .35s; }
.page-blocks .sp-node.is-dim { opacity: .4; }
.page-blocks .sp-node:focus-visible .sp-ring, .page-blocks .sp-node.is-sel .sp-ring { stroke: var(--paper); stroke-dasharray: 3 4; }
.page-blocks .sp-node.is-start .sp-ring { stroke: var(--sp-path); stroke-width: 5; stroke-dasharray: none; }
.page-blocks .sp-node.is-risk .sp-ic { stroke: var(--sp-path); }
.page-blocks .sp-node.is-risk .sp-ring { fill: color-mix(in srgb, var(--sp-path) 14%, transparent); }
.page-blocks .sp-node[data-mk] .sp-ring { stroke-width: 4; stroke-dasharray: none; fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: var(--c); }
.page-blocks .sp-node[data-mk="block"] { --c: var(--sp-block); } .page-blocks .sp-node[data-mk="detect"] { --c: var(--sp-detect); } .page-blocks .sp-node[data-mk="contain"] { --c: var(--sp-contain); } .page-blocks .sp-node[data-mk="check"] { --c: var(--sp-check); }
.page-blocks .sp-node.is-held .sp-ring { stroke-dasharray: 5 4; }
/* 控制點：整條邊界牆或檢查卡片，標籤放在分區上方 */
.page-blocks .sp-gb { fill: color-mix(in srgb, var(--c) 6%, var(--deeper)); stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 4 3; transition: fill .3s; }
.page-blocks .sp-gate.is-on .sp-gb { fill: color-mix(in srgb, var(--c) 24%, var(--deeper)); stroke-dasharray: none; }
.page-blocks .sp-gate.is-hit .sp-gb { fill: color-mix(in srgb, var(--c) 35%, var(--deeper)); stroke-dasharray: none; stroke-width: 2.5; }
.page-blocks .sp-gate:focus-visible .sp-gb, .page-blocks .sp-gate.is-sel .sp-gb { stroke: var(--paper); stroke-dasharray: 4 3; stroke-width: 2.5; }
.page-blocks .sp-gk path { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.page-blocks .sp-gate.is-on .sp-gk path { opacity: .85; } .page-blocks .sp-gate.is-hit .sp-gk path { opacity: 1; }
.page-blocks .sp-gno { fill: var(--c); font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.page-blocks .sp-gname { fill: var(--paper); font-size: 15px; font-weight: 800; }
.page-blocks .sp-gsub { fill: var(--muted-on-dark); font-size: 12px; font-weight: 600; }
.page-blocks .sp-chk rect { fill: transparent; stroke: var(--on-dark-line); stroke-width: 1.5; stroke-dasharray: 4 3; transition: fill .3s, stroke .3s; }
.page-blocks .sp-chk text { fill: var(--muted-on-dark); font-size: 13px; font-weight: 800; transition: fill .3s; }
.page-blocks .sp-chk.is-on rect { fill: color-mix(in srgb, var(--c) 34%, var(--deeper)); stroke: var(--c); stroke-dasharray: none; }
.page-blocks .sp-chk.is-on text { fill: var(--paper); }
/* 圖例 */
.page-blocks .sp-legend { display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; margin: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--on-dark-line); color: var(--muted-on-dark); font-size: .875rem; font-weight: 600; list-style: none; }
.page-blocks .sp-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.page-blocks .sp-legend svg { width: 2.5rem; height: 1rem; flex: none; }
.page-blocks .sp-lg-lane { stroke: var(--sp-allow); stroke-width: 2; fill: none; }
.page-blocks .sp-lg-route { stroke: color-mix(in srgb, var(--sp-path) 75%, transparent); stroke-width: 1.8; stroke-dasharray: 7 6; fill: none; }
.page-blocks .sp-lg-path { stroke: var(--sp-path); stroke-width: 4.5; stroke-dasharray: 12 7; fill: none; }
.page-blocks .sp-lg-cut { stroke: var(--muted-on-dark); stroke-width: 2.4; stroke-dasharray: 3 6; fill: none; opacity: .7; }
.page-blocks .sp-lg-x { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; fill: none; }
.page-blocks .sp-lg-gate { fill: color-mix(in srgb, var(--paper) 18%, transparent); stroke: var(--paper); stroke-width: 1.5; }
.page-blocks .sp-lg-mark { fill: none; stroke: var(--sp-detect); stroke-width: 3; }
.page-blocks .sp-hint { margin: 0; padding: 0 1.25rem 1rem; color: var(--muted-on-dark); font-size: .875rem; }
/* 流動光線：圖下方一條細線，亮光段由左往右循環掃過；純裝飾。靜止時只剩一條漸淡的線。 */
.page-blocks .sp-flow { position: relative; overflow: hidden; height: 2px; margin: .25rem 1.25rem .75rem; background: linear-gradient(90deg, transparent, var(--accent-dark), transparent); }
.page-blocks .sp-flow::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 90%, var(--accent-dark)), transparent); transform: translateX(-100%); opacity: 0; }
/* 檢視面板、步驟卡、狀態句（淺色卡） */
.page-blocks .sp-inspect { padding: clamp(1rem, 2vw, 1.625rem); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--elevation-card); }
.page-blocks .sp-ix-k { margin: 0; color: var(--muted); font-size: .875rem; font-weight: 700; }
.page-blocks .sp-ix-state { margin: .25rem 0 0; color: var(--accent-ink); font-size: .875rem; font-weight: 700; }
.page-blocks .sp-inspect h3 { margin: .375rem 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; }
.page-blocks .sp-ix-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin: 0; }
.page-blocks .sp-ix-tags div { padding: .625rem .875rem; border-radius: var(--radius-m); background: var(--surface-sunken); }
.page-blocks .sp-ix-tags dt { color: var(--muted); font-size: .8125rem; }
.page-blocks .sp-ix-tags dd { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.page-blocks .sp-ix-read { display: flex; gap: .625rem; align-items: baseline; margin: .75rem 0 0; font-size: .9375rem; }
.page-blocks .sp-ix-read b { flex: none; padding: .125rem .75rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: .8125rem; }
.page-blocks .sp-ix-note { margin: .75rem 0 0; padding-left: .625rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: .875rem; }
.page-blocks .sp-ix-note:empty { display: none; }
@media (max-width: 45rem) { .page-blocks .sp-ix-tags { grid-template-columns: 1fr 1fr; } }
.page-blocks .sp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 2vw, 1.5rem); }
.page-blocks .sp-steps[data-n="1"] { grid-template-columns: 1fr; } .page-blocks .sp-steps[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 62rem) { .page-blocks .sp-steps, .page-blocks .sp-steps[data-n="2"] { grid-template-columns: 1fr; } }
.page-blocks .sp-step { padding: clamp(1.125rem, 2vw, 1.75rem); border: 2px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--muted); transition: background .35s, border-color .35s, color .35s; }
.page-blocks .sp-step .sp-no { margin: 0; color: var(--accent-ink); font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 800; line-height: 1; }
.page-blocks .sp-step .sp-who { margin: .5rem 0 0; color: var(--muted); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
.page-blocks .sp-step h3 { margin: .5rem 0; color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; }
.page-blocks .sp-step p:last-child { margin: 0; font-size: .9375rem; line-height: 1.6; }
.page-blocks .sp-step.is-on { border-color: var(--deeper); background: var(--deeper); color: var(--muted-on-dark); }
.page-blocks .sp-step.is-on .sp-no { color: var(--accent-dark); } .page-blocks .sp-step.is-on h3 { color: var(--paper); } .page-blocks .sp-step.is-on .sp-who { color: var(--muted-on-dark); }
.page-blocks .sp-step.is-done { border-color: var(--accent-ink); }
.page-blocks .sp-summary { margin: 0; padding: 1.125rem 1.375rem; border-left: 4px solid var(--accent); border-radius: 0 var(--radius-l) var(--radius-l) 0; background: var(--paper); color: var(--ink); font-weight: 700; line-height: 1.8; }
.page-blocks .sp-summary.is-ok { border-left-color: var(--accent-ink); }
.page-blocks .sp-summary strong { font-weight: 900; }
.page-blocks .sp-summary span { display: block; }
.page-blocks .sp-alt { color: var(--muted); font-size: .875rem; }
.page-blocks .sp-alt summary { display: flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 700; cursor: pointer; }
.page-blocks .sp-alt summary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.page-blocks .sp-alt h4 { margin: 1rem 0 0; color: var(--ink); font-size: .875rem; }
.page-blocks .sp-alt ul { margin: .5rem 0 0; padding-left: 1.25rem; line-height: 1.7; }
.page-blocks .sp-alt strong { color: var(--ink); }
.page-blocks .sp-l-note, .page-blocks .sp-cap { margin: .75rem 0 0; max-width: 62rem; }
.page-blocks .sp-cap { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
/* 動態：只在沒有要求減少動態、站上動態沒關時播放；否則路徑靜止、光線靜止、步驟卡直接顯示 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .sp .sp-e .sp-seg.is-path { animation: sp-flowdash 1.1s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .sp-flow::after { opacity: 1; animation: sp-sweep 3s linear infinite; }
  html.js:not([data-motion="off"]) .page-blocks .sp-steps:not(.is-seen) .sp-step { opacity: 0; transform: translateY(1.25rem); }
  html.js:not([data-motion="off"]) .page-blocks .sp-steps.is-seen .sp-step { animation: sp-rise .6s var(--ease-out-expo) both; }
  html.js:not([data-motion="off"]) .page-blocks .sp-steps.is-seen .sp-step:nth-child(2) { animation-delay: .15s; }
  html.js:not([data-motion="off"]) .page-blocks .sp-steps.is-seen .sp-step:nth-child(3) { animation-delay: .3s; }
  html.js:not([data-motion="off"]) .page-blocks .sp-steps.is-seen .sp-step:nth-child(n+4) { animation-delay: .45s; }
  @keyframes sp-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
  @keyframes sp-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .page-blocks .sp-seg, .page-blocks .sp-node, .page-blocks .sp-pill, .page-blocks .sp-gb, .page-blocks .sp-gk path, .page-blocks .sp-chk rect, .page-blocks .sp-chk text, .page-blocks .sp-x, .page-blocks .sp-knob::after, .page-blocks .sp-step { transition: none; }
}
html[data-motion="off"] .page-blocks :is(.sp-seg, .sp-node, .sp-pill, .sp-gb, .sp-gk path, .sp-chk rect, .sp-x, .sp-knob::after, .sp-step) { transition: none; }

/* issue 374：「開始模擬」步驟條放在面板最上方，內縮與面板內其他列一致。 */
.page-blocks .sp-topo > .sg-steps { margin: 0; padding: .875rem 1.25rem 0; }
/* 開關與單選用 all: unset 重設樣式，會蓋掉泡泡的定位基準，這裡補回。 */
.page-blocks .sp-topo .sg-host { position: relative; }