/* issue 220 場景 solution-ransom-spread：一個落點的擴散模擬（示意，非實測）。深色舞台放圖與開關，舞台下方的控制點卡片、檢視面板、步驟卡、摘要用淺色卡片。
   顏色只讀官網 token；擴散、三種控制點的色票以 --rsc-* 場景前綴自訂屬性集中在 .rsc，值都引用既有 token（不寫色碼）。
   沒有 JS 時是靜態圖（控制點全關）加卡片與展開的文字說明；開關群組在 JS 接手前 hidden。 */
.page-blocks .rsc {
  --rsc-hit: var(--notice-accent);
  --rsc-access: var(--cloudforce-blue);
  --rsc-segment: var(--paper);
  --rsc-respond: var(--soft);
  --rsc-allow: color-mix(in srgb, var(--muted-on-dark) 62%, transparent);
  --rsc-zone: color-mix(in srgb, var(--muted-on-dark) 30%, transparent);
  display: grid; gap: clamp(1rem, 2vw, 1.5rem); color: var(--ink);
}
.page-blocks .rsc > * { min-width: 0; }
.page-blocks .rsc-fx-access { --c: var(--rsc-access); }
.page-blocks .rsc-fx-segment { --c: var(--rsc-segment); }
.page-blocks .rsc-fx-respond { --c: var(--rsc-respond); }
.page-blocks .rsc-stage { position: relative; border: 1px solid var(--on-dark-line); border-radius: var(--radius-xl); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--paper) 7%, var(--deeper)), var(--deeper)); color: var(--muted-on-dark); box-shadow: var(--elevation-card); overflow: hidden; }
.page-blocks .rsc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .rsc-kicker { color: var(--rsc-hit); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; }
.page-blocks .rsc-count { margin-left: auto; color: var(--paper); font-weight: 800; font-variant-numeric: tabular-nums; }
.page-blocks .rsc-count.is-ok { color: var(--rsc-respond); }
.page-blocks .rsc-switches { display: flex; flex-wrap: wrap; gap: .5rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .rsc-switches[hidden] { display: none; }
.page-blocks .rsc-sw, .page-blocks .rsc-replay { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .375rem .5rem .375rem 1rem; border: 2px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .9375rem; font-weight: 700; cursor: pointer; transition: border-color var(--dur-base); }
.page-blocks .rsc-replay { padding: .375rem 1.125rem; }
.page-blocks .rsc-sw small { color: var(--muted-on-dark); font-size: .8125rem; font-weight: 600; }
.page-blocks .rsc-sw:hover, .page-blocks .rsc-replay:hover { border-color: var(--paper); }
.page-blocks .rsc-sw:focus-visible, .page-blocks .rsc-replay:focus-visible, .page-blocks .rsc-viz:focus-visible, .page-blocks .rsc-alt summary:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .rsc-knob { position: relative; box-sizing: border-box; flex: 0 0 auto; width: 3.5rem; height: 1.75rem; border: 2px solid var(--on-dark-line); border-radius: var(--r-pill); transition: background var(--dur-base), border-color var(--dur-base); }
.page-blocks .rsc-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 .rsc-knob::after { content: ""; position: absolute; left: .125rem; top: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--muted-on-dark); transition: transform var(--dur-base) var(--ease), background var(--dur-base); }
.page-blocks .rsc-sw[aria-pressed="true"] { border-color: var(--c); }
.page-blocks .rsc-sw[aria-pressed="true"] .rsc-knob { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, transparent); }
.page-blocks .rsc-sw[aria-pressed="true"] .rsc-knob::before { content: attr(data-on); right: auto; left: .5rem; color: var(--paper); }
.page-blocks .rsc-sw[aria-pressed="true"] .rsc-knob::after { background: var(--c); transform: translateX(1.75rem); }
/* 圖：窄螢幕留在框內左右滑動，頁面不橫向捲動 */
.page-blocks .rsc-viz { overflow-x: auto; overscroll-behavior-x: contain; }
.page-blocks .rsc-svg { display: block; width: 100%; height: auto; min-width: 0; font-family: var(--font-body); }
.page-blocks .rsc-svg text { font-family: var(--font-body); }
.page-blocks .rsc-swipe { display: none; margin: 0; padding: .5rem 1.25rem 0; color: var(--muted-on-dark); font-size: .8125rem; }
/* issue 289：平板（含 1024）也維持原尺寸可左右滑動；桌機（> 64rem）照舊整張縮放 */
@media (max-width: 64rem) { .page-blocks .rsc-svg { width: 56rem; max-width: none; } .page-blocks .rsc-swipe { display: block; } }
.page-blocks .rsc-box { fill: color-mix(in srgb, var(--deep) 55%, transparent); stroke: var(--rsc-zone); stroke-width: 1.5; stroke-dasharray: 6 5; transition: stroke .5s, fill .6s, filter .6s; }
.page-blocks .rsc-zone.is-hit .rsc-box { fill: color-mix(in srgb, var(--rsc-hit) 9%, transparent); stroke: color-mix(in srgb, var(--rsc-hit) 60%, transparent); }
.page-blocks .rsc-svg[data-segment="on"] .rsc-zone .rsc-box { stroke: color-mix(in srgb, var(--rsc-segment) 70%, transparent); stroke-dasharray: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rsc-segment) 35%, transparent)); }
.page-blocks .rsc-tag rect { fill: var(--deeper); stroke: var(--rsc-zone); stroke-width: 1; }
.page-blocks .rsc-tag text { fill: var(--muted-on-dark); font-size: 14px; font-weight: 700; }
.page-blocks .rsc-tag .rsc-zc { text-anchor: end; fill: var(--muted-on-dark); font-variant-numeric: tabular-nums; transition: fill .3s; }
.page-blocks .rsc-tag.is-hit .rsc-zc { fill: var(--rsc-hit); }
.page-blocks .rsc-sub { fill: var(--muted-on-dark); font-size: 13px; font-weight: 700; text-anchor: middle; }
.page-blocks .rsc-cap { paint-order: stroke; stroke: var(--deeper); stroke-width: 5px; stroke-linejoin: round; }
.page-blocks .rsc-ic { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
/* 主機 */
.page-blocks .rsc-n { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html:not(.js) .page-blocks .rsc-n { cursor: default; }
.page-blocks .rsc-hit { fill: transparent; }
.page-blocks .rsc-ring { fill: none; stroke: transparent; stroke-width: 3; transition: stroke .3s; }
.page-blocks .rsc-host { fill: var(--deep); stroke: var(--on-dark-line); stroke-width: 1.5; transition: fill .35s, stroke .35s; }
.page-blocks .rsc-id { fill: var(--muted-on-dark); font-size: 13px; font-weight: 800; text-anchor: middle; transition: fill .3s; }
.page-blocks .rsc-n .rsc-ic { stroke: var(--muted-on-dark); }
.page-blocks .rsc-n:hover .rsc-host { stroke: var(--paper); }
.page-blocks .rsc-n.is-risk .rsc-host { fill: color-mix(in srgb, var(--rsc-hit) 26%, var(--deep)); stroke: var(--rsc-hit); }
.page-blocks .rsc-n.is-risk .rsc-id { fill: var(--paper); }
.page-blocks .rsc-n.is-risk .rsc-ic { stroke: var(--paper); }
.page-blocks .rsc-n.is-iso .rsc-host { fill: color-mix(in srgb, var(--rsc-respond) 14%, var(--deep)); stroke: var(--rsc-respond); stroke-dasharray: 5 3; }
.page-blocks .rsc-n.is-iso .rsc-id { fill: var(--rsc-respond); }
.page-blocks .rsc-n.is-iso .rsc-ic { stroke: var(--rsc-respond); }
.page-blocks .rsc-n.is-start .rsc-ring { stroke: var(--rsc-hit); stroke-width: 3; }
.page-blocks .rsc-n:focus { outline: none; }
.page-blocks .rsc-n:focus-visible .rsc-ring { stroke: var(--paper); stroke-width: 3; stroke-dasharray: none; }
.page-blocks .rsc-pill rect { fill: var(--deeper); stroke: var(--rsc-hit); stroke-width: 1.5; }
.page-blocks .rsc-pill text { fill: var(--paper); font-size: 12.5px; font-weight: 800; text-anchor: middle; }
.page-blocks .rsc-pills .rsc-pill rect { fill: var(--rsc-hit); stroke: none; }
.page-blocks .rsc-pills .rsc-pill text { fill: var(--deeper); font-size: 12px; }
/* 墨水暈開（落點與被波及的主機）與隔離光環 */
.page-blocks .rsc-bloom { fill: url(#rsc-bloom-g); pointer-events: none; transform-box: fill-box; transform-origin: center; animation: rsc-bloom 1.25s cubic-bezier(.15, .6, .2, 1) both; }
.page-blocks .rsc-bloom.is-d1 { animation-delay: .16s; } .page-blocks .rsc-bloom.is-d2 { animation-delay: .32s; }
.page-blocks .rsc-bloom.is-big { animation-duration: 1.7s; }
.page-blocks .rsc-b0 { stop-color: var(--rsc-hit); stop-opacity: .95; } .page-blocks .rsc-b1 { stop-color: var(--rsc-hit); stop-opacity: .45; } .page-blocks .rsc-b2 { stop-color: var(--rsc-hit); stop-opacity: 0; }
@keyframes rsc-bloom { 0% { transform: scale(.15); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
.page-blocks .rsc-halo { fill: none; stroke: var(--rsc-respond); stroke-width: 3; pointer-events: none; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 7px var(--rsc-respond)); animation: rsc-halo .7s var(--ease) both; }
@keyframes rsc-halo { 0% { transform: scale(2.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
/* 連線 */
.page-blocks .rsc-e, .page-blocks .rsc-route, .page-blocks .rsc-link { fill: none; stroke: var(--rsc-allow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .3s; }
.page-blocks .rsc-e.is-draw, .page-blocks .rsc-route.is-draw { stroke: var(--rsc-hit); stroke-width: 3.5; stroke-dasharray: 1 2; }
.page-blocks .rsc-e.is-hot, .page-blocks .rsc-route.is-hot { stroke: var(--rsc-hit); stroke-width: 3.5; stroke-dasharray: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rsc-hit) 70%, transparent)); }
.page-blocks .rsc-e.is-trail, .page-blocks .rsc-route.is-trail { opacity: .4; filter: none; }
.page-blocks .rsc-e.is-cut { stroke: var(--muted-on-dark); stroke-dasharray: 3 6; opacity: .45; }
.page-blocks .rsc-route { stroke: color-mix(in srgb, var(--rsc-hit) 55%, transparent); stroke-dasharray: 7 6; stroke-width: 2; }
.page-blocks .rsc-svg[data-access="on"] .rsc-route { stroke: var(--muted-on-dark); opacity: .3; }
.page-blocks .rsc-svg[data-access="on"] .rsc-direct { display: none; }
.page-blocks .rsc-x, .page-blocks .rsc-lg-x { fill: none; stroke: var(--rsc-hit); stroke-width: 3.5; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.page-blocks .rsc-x.is-on, .page-blocks .rsc-svg[data-access="on"] .rsc-xg { opacity: 1; }
.page-blocks .rsc-lg-x { opacity: 1; stroke-width: 2.5; }
.page-blocks .rsc-in, .page-blocks .rsc-gw { stroke: var(--rsc-hit); stroke-width: 2.5; opacity: .85; }
.page-blocks .rsc-svg[data-access="on"] .rsc-in, .page-blocks .rsc-svg[data-access="on"] .rsc-gw { stroke: var(--rsc-access); }
/* 微分割邊界：玻璃牆亮起 */
.page-blocks .rsc-wall { fill: color-mix(in srgb, var(--rsc-segment) 80%, var(--deeper)); transform-box: fill-box; transform-origin: center; transform: scaleY(0); opacity: 0; transition: transform .7s var(--ease), opacity .4s; filter: drop-shadow(0 0 9px var(--rsc-segment)); }
.page-blocks .rsc-svg[data-segment="on"] .rsc-wall { transform: scaleY(1); opacity: .95; }
.page-blocks .rsc-svg[data-segment="on"] .rsc-wall[data-k="1"] { transition-delay: .1s; } .page-blocks .rsc-svg[data-segment="on"] .rsc-wall[data-k="3"] { transition-delay: .2s; } .page-blocks .rsc-svg[data-segment="on"] .rsc-wall[data-k="2"] { transition-delay: .3s; } .page-blocks .rsc-svg[data-segment="on"] .rsc-wall[data-k="4"] { transition-delay: .4s; }
.page-blocks .rsc-wallpill { opacity: 0; transition: opacity .4s .5s; } .page-blocks .rsc-svg[data-segment="on"] .rsc-wallpill { opacity: 1; }
.page-blocks .rsc-wallpill rect { stroke: var(--rsc-segment); } .page-blocks .rsc-wallpill text { font-size: 13px; }
/* 閘門與回應色帶 */
.page-blocks .rsc-gate rect { fill: var(--deeper); stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 4 3; transition: fill .3s, stroke .3s; }
.page-blocks .rsc-gate text { fill: var(--muted-on-dark); font-size: 13px; font-weight: 800; text-anchor: middle; }
.page-blocks .rsc-gate.is-on rect { fill: color-mix(in srgb, var(--c) 22%, var(--deeper)); stroke-dasharray: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)); }
.page-blocks .rsc-gate.is-on text { fill: var(--paper); }
.page-blocks .rsc-dvband text { font-size: 15px; }
.page-blocks .rsc-dvband.is-hit rect { animation: rsc-pulse .9s ease-out; }
@keyframes rsc-pulse { 0% { filter: drop-shadow(0 0 0 var(--rsc-respond)); } 40% { filter: drop-shadow(0 0 22px var(--rsc-respond)); } 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rsc-respond) 45%, transparent)); } }
.page-blocks .rsc-remote .rsc-box { stroke-dasharray: none; }
/* 圖下方的流動光線（純裝飾）：2px 細線，強調色向兩端漸淡；亮光段約線長 40%，3 秒一輪由左往右掃過。只在允許動態時動，其餘靜止。 */
.page-blocks .rsc-flow { position: relative; height: 2px; margin: 0 1.25rem; overflow: hidden; background: linear-gradient(90deg, transparent, var(--accent-dark) 20%, var(--accent-dark) 80%, transparent); }
.page-blocks .rsc-flow-glow { position: absolute; inset: 0 auto 0 0; width: 40%; translate: -100% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 90%, var(--accent-dark)), transparent); }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .page-blocks .rsc-flow-glow { animation: rsc-flow 3s linear infinite; } }
/* issue 311：位移改用 translate（以自身 40% 寬為單位：-100%＝-40%、250%＝100%），不再每格觸發排版。 */
@keyframes rsc-flow { from { translate: -100% 0; } to { translate: 250% 0; } }
/* 圖例與提示 */
.page-blocks .rsc-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 .rsc-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.page-blocks .rsc-legend svg { width: 2.5rem; height: 1rem; }
.page-blocks .rsc-lg { fill: var(--deep); stroke: var(--on-dark-line); stroke-width: 1.5; }
.page-blocks .rsc-lg-risk { fill: color-mix(in srgb, var(--rsc-hit) 30%, var(--deep)); stroke: var(--rsc-hit); }
.page-blocks .rsc-lg-iso { fill: color-mix(in srgb, var(--rsc-respond) 16%, var(--deep)); stroke: var(--rsc-respond); stroke-dasharray: 3 2; }
.page-blocks .rsc-lg-wall { fill: var(--rsc-segment); stroke: none; }
.page-blocks .rsc-lg-path { stroke: var(--rsc-hit); stroke-width: 3.5; }
.page-blocks .rsc-lg-cut { stroke: var(--muted-on-dark); stroke-dasharray: 3 6; opacity: .45; }
.page-blocks .rsc-hint { margin: 0; padding: 0 1.25rem 1rem; color: var(--muted-on-dark); font-size: .875rem; }
html:not(.js) .page-blocks .rsc-hint, html:not(.js) .page-blocks .rsc-inspect, html:not(.js) .page-blocks .rsc-count, html:not(.js) .page-blocks .rsc-swipe { display: none; }
/* 控制點卡片、檢視面板、步驟卡、摘要、文字說明（淺色卡片） */
.page-blocks .rsc-points { display: grid; gap: 1rem; }
@media (min-width: 62rem) { .page-blocks .rsc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-blocks .rsc-pt { padding: 1rem 1.25rem 1.125rem; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--radius-m); background: var(--paper); box-shadow: var(--elevation-card); }
.page-blocks .rsc-pt p { margin: 0; color: var(--muted); font-size: .9375rem; }
.page-blocks .rsc-pt .rsc-pt-k { margin-bottom: .375rem; color: var(--ink); font-weight: 800; }
.page-blocks .rsc-fx-segment.rsc-pt { border-top-color: var(--rsc-segment); box-shadow: inset 0 3px 0 var(--deep), var(--elevation-card); }
.page-blocks .rsc-inspect { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--elevation-card); }
.page-blocks .rsc-inspect h3 { margin: .5rem 0 1rem; font-size: 1.5rem; font-weight: 900; }
.page-blocks .rsc-ix-k { margin: 0; color: var(--muted); font-size: .875rem; font-weight: 700; }
.page-blocks .rsc-ix-state { margin: .25rem 0 0; color: var(--accent-ink); font-weight: 800; }
.page-blocks .rsc-ix-tags { display: grid; gap: .625rem; margin: 0 0 1rem; }
@media (min-width: 48rem) { .page-blocks .rsc-ix-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-blocks .rsc-ix-tags div { padding: .75rem 1rem; border-radius: var(--radius-m); background: var(--surface-sunken); }
.page-blocks .rsc-ix-tags dt { color: var(--muted); font-size: .8125rem; font-weight: 700; }
.page-blocks .rsc-ix-tags dd { margin: .125rem 0 0; font-weight: 800; overflow-wrap: anywhere; }
.page-blocks .rsc-ix-read { display: flex; gap: .75rem; align-items: baseline; margin: 0; }
.page-blocks .rsc-ix-read b { flex: 0 0 auto; padding: .125rem .625rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: .8125rem; }
.page-blocks .rsc-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 62rem) { .page-blocks .rsc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-blocks .rsc-step { padding: 1.5rem 1.75rem 1.75rem; border: 2px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--muted); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.page-blocks .rsc-step p { margin: 0; }
.page-blocks .rsc-step h3 { margin: .5rem 0; color: var(--ink); font-size: 1.375rem; font-weight: 900; }
.page-blocks .rsc-step .rsc-who { margin-bottom: .5rem; color: var(--muted); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
.page-blocks .rsc-step .rsc-no { color: var(--accent-ink); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.page-blocks .rsc-step.is-on { border-color: var(--deeper); background: var(--deeper); color: var(--muted-on-dark); }
.page-blocks .rsc-step.is-on h3 { color: var(--paper); }
.page-blocks .rsc-step.is-on .rsc-no { color: var(--accent-dark); }
.page-blocks .rsc-step.is-on .rsc-who { color: var(--muted-on-dark); }
.page-blocks .rsc-summary { margin: 0; min-height: calc(1.6em + 2.25rem); padding: 1.125rem 1.375rem; border-left: 4px solid var(--rsc-hit); border-radius: 0 var(--radius-l) var(--radius-l) 0; background: var(--paper); color: var(--ink); font-weight: 600; line-height: 1.6; box-shadow: var(--elevation-card); }
.page-blocks .rsc-summary b { font-weight: 900; }
.page-blocks .rsc-summary.is-ok { border-left-color: var(--accent); }
.page-blocks .rsc-alt { color: var(--muted); }
.page-blocks .rsc-alt summary { display: flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 800; cursor: pointer; }
.page-blocks .rsc-alt summary:focus-visible { outline-color: var(--accent-ink); }
.page-blocks .rsc-alt p { margin: .25rem 0; font-size: .9375rem; }
.page-blocks .rsc-note { margin: 0; color: var(--muted); font-size: .875rem; }
/* 版面（issue 242）：寬螢幕左圖右控制，圖高限制在一個螢幕內；控制點說明收合；窄螢幕直排並更緊湊（開關 → 圖 → 摘要 → 檢視 → 控制點 → 步驟 → 文字說明）。 */
.page-blocks .rsc { gap: 1rem; }
/* issue 374：rsc-sim 是「開始模擬」引導的 host（遮罩蓋住整個可操作區），版面上與原本的 rsc-main 直接放在 rsc 裡等價。 */
.page-blocks .rsc-sim { display: grid; gap: 1rem; min-width: 0; }
.page-blocks .rsc-sim > .sg-steps { margin: 0; }
.page-blocks .rsc-main { display: grid; gap: .75rem; align-items: start; }
.page-blocks .rsc-main > *, .page-blocks .rsc-left > *, .page-blocks .rsc-side > * { min-width: 0; }
.page-blocks .rsc-left, .page-blocks .rsc-side { display: grid; gap: .75rem; align-content: start; }
.page-blocks .rsc-panel { border: 1px solid var(--on-dark-line); border-radius: var(--radius-xl); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--paper) 7%, var(--deeper)), var(--deeper)); color: var(--muted-on-dark); box-shadow: var(--elevation-card); overflow: hidden; }
.page-blocks .rsc-panel .rsc-bar { padding: .625rem 1rem; }
.page-blocks .rsc-panel .rsc-switches { padding: .75rem 1rem; border-bottom: 0; }
.page-blocks .rsc-panel .rsc-sw { flex: 1 1 100%; justify-content: space-between; }
.page-blocks .rsc-panel .rsc-replay { flex: 1 1 100%; justify-content: center; min-height: 2.5rem; }
.page-blocks .rsc-legend { padding: .625rem 1rem; gap: .375rem 1rem; font-size: .8125rem; }
.page-blocks .rsc-hint { padding: 0 1rem .75rem; font-size: .8125rem; line-height: 1.55; }
.page-blocks .rsc-summary { min-height: 0; padding: .75rem 1rem; line-height: 1.55; font-size: .9375rem; }
.page-blocks .rsc-inspect { padding: .875rem 1rem; border-radius: var(--radius-l); }
.page-blocks .rsc-inspect h3 { margin: .125rem 0 .5rem; font-size: 1.25rem; }
.page-blocks .rsc-ix-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; margin-bottom: .625rem; }
.page-blocks .rsc-ix-tags div { padding: .375rem .625rem; }
.page-blocks .rsc-ix-read { font-size: .9375rem; }
.page-blocks .rsc-points { gap: .5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .page-blocks .rsc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-blocks .rsc-pt { padding: 0; }
.page-blocks .rsc-pt summary { display: flex; align-items: center; min-height: 2.75rem; padding: .375rem 1rem; color: var(--ink); font-size: .9375rem; font-weight: 800; list-style: none; cursor: pointer; }
.page-blocks .rsc-pt summary::-webkit-details-marker { display: none; }
.page-blocks .rsc-pt summary::after { content: "+"; margin-left: auto; padding-left: .75rem; color: var(--muted); font-weight: 700; }
.page-blocks .rsc-pt[open] summary::after { content: "\2212"; }
.page-blocks .rsc-pt summary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -3px; }
.page-blocks .rsc-pt .rsc-pt-k { margin-bottom: 0; }
.page-blocks .rsc-pt p { padding: 0 1rem .75rem; font-size: .875rem; }
.page-blocks .rsc-steps { gap: .75rem; }
.page-blocks .rsc-step { padding: 1rem 1.25rem 1.25rem; }
@media (max-width: 61.99rem) {
  .page-blocks .rsc, .page-blocks .rsc-sim { gap: .625rem; }
  .page-blocks .rsc-main, .page-blocks .rsc-left, .page-blocks .rsc-side { display: contents; }
  .page-blocks .rsc-panel { order: 1; } .page-blocks .rsc-stage { order: 2; } .page-blocks .rsc-summary { order: 3; } .page-blocks .rsc-inspect { order: 4; }
  .page-blocks .rsc-points { order: 5; } .page-blocks .rsc-steps { order: 6; } .page-blocks .rsc-alt { order: 7; } .page-blocks .rsc-note { order: 8; }
  .page-blocks .rsc-step { padding: .75rem 1rem; } .page-blocks .rsc-step .rsc-no { font-size: 1.75rem; } .page-blocks .rsc-step h3 { margin: .25rem 0; font-size: 1.125rem; } .page-blocks .rsc-step .rsc-who { margin-bottom: .25rem; }
  .page-blocks .rsc-panel .rsc-bar { padding: .5rem .75rem; }
  .page-blocks .rsc-panel .rsc-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; padding: .625rem; }
  .page-blocks .rsc-panel .rsc-switches[hidden] { display: none; }
  .page-blocks .rsc-panel .rsc-sw { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .25rem; padding: .5rem; border-radius: var(--radius-m); font-size: .875rem; line-height: 1.3; }
  .page-blocks .rsc-panel .rsc-sw small { display: block; font-size: .75rem; }
  .page-blocks .rsc-panel .rsc-knob { width: 2.75rem; height: 1.5rem; }
  .page-blocks .rsc-panel .rsc-knob::before { right: .375rem; font-size: .6875rem; }
  .page-blocks .rsc-panel .rsc-sw[aria-pressed="true"] .rsc-knob::before { right: auto; left: .375rem; }
  .page-blocks .rsc-panel .rsc-knob::after { width: 1rem; height: 1rem; }
  .page-blocks .rsc-panel .rsc-sw[aria-pressed="true"] .rsc-knob::after { transform: translateX(1.25rem); }
  .page-blocks .rsc-panel .rsc-replay { grid-column: 1 / -1; }
}
/* issue 289：窄螢幕三顆開關各占一列，品牌名不被拆字（flex-wrap 讓說明與開關換到下一行，而不是壓縮文字） */
@media (max-width: 25rem) {
  .page-blocks .rsc-panel .rsc-switches { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .rsc-panel .rsc-sw { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; padding: .375rem .5rem .375rem .75rem; }
  .page-blocks .rsc-panel .rsc-sw small { margin-inline-end: auto; }
}
@media (min-width: 62rem) {
  .page-blocks .rsc-main { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); gap: 1rem; }
  .page-blocks .rsc-stage .rsc-svg { max-height: calc(100svh - 17rem); }
}
@media (prefers-reduced-motion: reduce) {
  .page-blocks .rsc-bloom, .page-blocks .rsc-halo, .page-blocks .rsc-dvband.is-hit rect { animation: none; }
  .page-blocks :is(.rsc-wall, .rsc-wallpill, .rsc-x, .rsc-box, .rsc-knob, .rsc-knob::after, .rsc-e, .rsc-route, .rsc-host, .rsc-step) { transition: none; }
}
html[data-motion="off"] .page-blocks :is(.rsc-bloom, .rsc-halo) { animation: none; }
html[data-motion="off"] .page-blocks :is(.rsc-wall, .rsc-wallpill, .rsc-x, .rsc-box, .rsc-knob, .rsc-knob::after, .rsc-e, .rsc-route, .rsc-host, .rsc-step) { transition: none; }
/* issue 374：起點泡泡掛在疊在圖上的透明框（.rsc-coach，位置由 JS 對準一台主機），泡泡改放主機下方、靠右的主機改右對齊，避免超出舞台。 */
.page-blocks .rsc-stage .rsc-coach { position: absolute; z-index: 3; pointer-events: none; }
.page-blocks .rsc-stage .rsc-coach[hidden] { display: none; }
.page-blocks .rsc-stage .rsc-coach .sg-tip { bottom: auto; top: calc(100% + .375rem); }
.page-blocks .rsc-stage .rsc-coach .sg-tip::after { top: auto; bottom: 100%; border-width: 0 .4375rem .4375rem; border-color: transparent transparent var(--accent-dark); }
.page-blocks .rsc-stage .rsc-coach.is-right .sg-tip { left: auto; right: 0; }
.page-blocks .rsc-stage .rsc-coach.is-right .sg-tip::after { left: auto; right: 1.25rem; }
.page-blocks .rsc-stage .rsc-coach .sg-tap { width: 100%; height: 100%; left: 0; top: 0; margin: 0; border-radius: .75rem; }