/* 2026-10-05 場景 sentinelone-ransom：加密勒索三個動作。左欄步驟、右欄舞台（窄螢幕舞台在上）。
   沒有 JS（沒有 .is-live）：三個步驟排成三欄配圖卡片，舞台與按鈕不顯示。有 JS：步驟變按鈕，只展開目前步驟；舞台以 class 驅動：
   .spread（攔截後仍往外連）、.cut（已隔離）、.back（還原時收起隔離標籤）、.noroll（不支援還原）、data-score（0–5）。
   動作不只靠顏色：加密＝虛線框＋✕＋刪除線、切斷＝連線上 ✕＋對象虛線框＋「已阻擋」、隔離＝收攏的虛線框＋標籤。 */
.page-blocks .sr :is(.sr-btn, .sr-os, .sr-stage, .sr-say, .sr-replay)[hidden] { display: none; }
.page-blocks .sr { --sr-panel: color-mix(in srgb, var(--paper) 6%, var(--deeper)); --sr-dim: color-mix(in srgb, var(--muted-on-dark) 82%, var(--deeper)); --sr-glow: color-mix(in srgb, var(--accent-spark, var(--accent)) 38%, transparent);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: clamp(2rem, 5vw, 3.5rem); color: var(--paper); }
/* 兩欄頂端對齊：左欄只展開目前步驟，高度會隨步驟變；置中的話舞台會跟著上下跳。 */
.page-blocks .sr:not(.is-live) { grid-template-columns: minmax(0, 1fr); }
.page-blocks .sr-steps { display: grid; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--on-dark-line); }
.page-blocks .sr-step { padding: 1.25rem 0; border-bottom: 1px solid var(--on-dark-line); }
.page-blocks .sr-step:last-child { border-bottom: 0; }
.page-blocks .sr-step-h { display: flex; gap: .75rem; margin: 0 0 .5rem; color: var(--paper); font-size: clamp(1.25rem, 2vw, 1.625rem); }
.page-blocks :is(.sr-step-h, .sr-btn) b { color: var(--accent); font-family: "Inter Tight", var(--font-body); }
.page-blocks .sr-step p { margin: 0; color: var(--muted-on-dark); }
.page-blocks .sr-step-img { display: block; width: 100%; height: auto; margin-bottom: 1.25rem; border-radius: var(--r-card); }
.page-blocks .sr:not(.is-live) .sr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); border: 0; }
.page-blocks .sr:not(.is-live) .sr-step { padding: 0; border: 0; }
.page-blocks .sr.is-live :is(.sr-step-h, .sr-step-img) { display: none; }
.page-blocks .sr-btn { display: flex; width: 100%; gap: .75rem; align-items: baseline; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--paper); font: inherit; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; text-align: left; cursor: pointer; }
.page-blocks .sr-btn:hover span { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--accent); }
.page-blocks .sr-btn[aria-disabled="true"] { color: var(--sr-dim); cursor: default; }
.page-blocks .sr-btn[aria-disabled="true"]:hover span { text-decoration: none; }
.page-blocks .sr-btn:focus-visible, .page-blocks .sr-os button:focus-visible, .page-blocks .sr-replay:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-blocks .sr.is-live .sr-step p { display: none; margin-top: .5rem; }
.page-blocks .sr.is-live .sr-step.on p { display: block; }
.page-blocks .sr.is-live .sr-step.on .sr-btn span { color: var(--accent); }
.page-blocks .sr.is-live .sr-step.done .sr-btn b::after { content: " ✓"; }
.page-blocks .sr.is-live .sr-step.on:not(.done) .sr-btn::after { content: attr(data-cue); align-self: center; margin-left: auto; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: .8125rem; font-weight: 700; }
.page-blocks .sr-oscue { display: none; margin-left: .5rem; padding: .125rem .5rem; border: 1px solid var(--sr-dim); border-radius: var(--r-pill); color: var(--muted-on-dark); font-size: .8125rem; font-style: normal; font-weight: 600; vertical-align: middle; }
.page-blocks .sr.is-live[data-restore="0"] .sr-oscue { display: inline-block; }
.page-blocks .sr-os { display: inline-flex; gap: .25rem; margin-bottom: 1.25rem; padding: .25rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); }
.page-blocks .sr-os button { min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted-on-dark); font: inherit; font-size: .875rem; cursor: pointer; }
.page-blocks .sr-os button[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); font-weight: 700; }
.page-blocks .sr-say { margin: 1.25rem 0 0; padding: .875rem 1.125rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-spark, var(--accent)) 12%, transparent); color: var(--paper); }
.page-blocks .sr-replay { margin-top: 1.25rem; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); background: none; color: var(--muted-on-dark); font: inherit; cursor: pointer; }
.page-blocks .sr-replay:hover { border-color: var(--accent); color: var(--paper); }
.page-blocks .sr-note { margin: 1.25rem 0 0; color: var(--sr-dim); font-size: .8125rem; }
/* 舞台 */
.page-blocks .sr-stage { position: relative; display: grid; gap: .75rem; align-content: start; }
.page-blocks .sr-pc { position: relative; z-index: 1; border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--sr-panel); overflow: hidden; outline: 2px dashed transparent; outline-offset: 2.25rem; transition: outline-offset .8s var(--ease), outline-color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.page-blocks .sr-bar { display: flex; align-items: center; gap: .375rem; padding: .75rem 1rem; border-bottom: 1px solid var(--on-dark-line); font-size: .8125rem; }
.page-blocks .sr-bar > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--on-dark-line); }
.page-blocks .sr-bar b { margin-left: .5rem; }
.page-blocks .sr-bar em { margin-left: auto; padding: .125rem .625rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--muted-on-dark); font-style: normal; }
/* issue 329：檔案改為「方塊＋檔名」同一列的矮列（原本 4:5 直式格每格約 160px、大半空白），寬螢幕三欄、手機兩欄。 */
.page-blocks .sr-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; margin: 0; padding: .75rem 1rem; list-style: none; transition: opacity .4s var(--ease); }
.page-blocks .sr-file { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 2.125rem; padding: .3125rem .625rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent-on) 60%, transparent); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.page-blocks .sr-file::before { content: ""; flex: none; display: grid; place-items: center; width: .875rem; height: .875rem; border-radius: 3px; background: var(--on-dark-line); }
.page-blocks .sr-file span { overflow: hidden; color: var(--muted-on-dark); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.page-blocks .sr-file.enc { border-style: dashed; border-color: var(--sr-dim); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sr-dim) 22%, transparent) 0 6px, transparent 6px 12px); }
.page-blocks .sr-file.enc::before { content: "✕"; background: none; color: var(--paper); font-size: .9375rem; font-weight: 800; line-height: 1; }
.page-blocks .sr-file.enc span { color: var(--sr-dim); text-decoration: line-through; }
.page-blocks .sr-file.back { border-color: var(--accent); background: color-mix(in srgb, var(--accent-spark, var(--accent)) 26%, transparent); }
.page-blocks .sr-file.back::before { background: var(--accent); }
.page-blocks .sr-score { display: grid; grid-template-columns: auto minmax(0, 1fr) 2.5rem; align-items: center; gap: .75rem; padding: .375rem 1rem .875rem; color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .sr-score-fill { position: relative; height: .5rem; border-radius: var(--r-pill); background: var(--on-dark-line); overflow: hidden; }
.page-blocks .sr-score-fill::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-spark, var(--accent)), var(--accent)); transition: width .3s linear; }
.page-blocks .sr-stage[data-score="1"] .sr-score-fill::after { width: 20%; } .page-blocks .sr-stage[data-score="2"] .sr-score-fill::after { width: 40%; }
.page-blocks .sr-stage[data-score="3"] .sr-score-fill::after { width: 60%; } .page-blocks .sr-stage[data-score="4"] .sr-score-fill::after { width: 80%; }
.page-blocks .sr-stage[data-score="5"] .sr-score-fill::after { width: 100%; }
.page-blocks .sr-score em { color: var(--paper); font-style: normal; font-weight: 700; text-align: right; font-feature-settings: "tnum"; }
.page-blocks .sr-iso { position: absolute; z-index: 3; top: 50%; left: 50%; padding: .625rem 1.125rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: .9375rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .4s var(--ease), transform .4s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
/* 連線與對象 */
.page-blocks .sr-net { position: relative; height: 6rem; margin-top: .75rem; }
.page-blocks .sr-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-blocks .sr-links line { stroke: var(--on-dark-line); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity .4s var(--ease), stroke .4s var(--ease); }
.page-blocks .sr-peer { position: absolute; z-index: 1; display: grid; justify-items: center; gap: .125rem; padding: .375rem .75rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); background: var(--sr-panel); color: var(--muted-on-dark); font-size: .8125rem; white-space: nowrap; transform: translate(-50%, -50%); transition: border-color .4s var(--ease), color .4s var(--ease); }
.page-blocks .sr-p1 { left: 12%; top: 22%; } .page-blocks .sr-p2 { left: 88%; top: 22%; } .page-blocks .sr-p3 { left: 50%; top: 78%; }
.page-blocks .sr-peer small { display: none; font-size: .8125rem; font-weight: 700; }
.page-blocks .sr-cut { position: absolute; z-index: 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--accent); border-radius: 50%; background: var(--accent-on); color: var(--paper); font-size: .8125rem; font-weight: 800; transform: translate(-50%, -50%) scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.page-blocks .sr-c1 { left: 31%; top: 11%; } .page-blocks .sr-c2 { left: 69%; top: 11%; } .page-blocks .sr-c3 { left: 50%; top: 39%; }
.page-blocks .sr-cut.on { transform: translate(-50%, -50%) scale(1); }
.page-blocks .sr-stage.spread .sr-links line { stroke: var(--accent); stroke-dasharray: 6 6; }
.page-blocks .sr-stage.spread .sr-peer { border-color: var(--accent); color: var(--paper); }
.page-blocks .sr-stage.spread .sr-try { display: block; color: var(--accent); }
.page-blocks .sr-stage.cut .sr-links line { stroke: var(--on-dark-line); stroke-dasharray: 2 6; opacity: .5; }
.page-blocks .sr-stage.cut .sr-peer { border-style: dashed; border-color: var(--sr-dim); color: var(--sr-dim); }
.page-blocks .sr-stage.cut .sr-stop { display: block; color: var(--paper); }
.page-blocks .sr-stage.cut .sr-pc { border-color: var(--accent); outline-color: var(--accent); outline-offset: .5rem; box-shadow: 0 0 3rem -.5rem var(--sr-glow); }
.page-blocks .sr-stage.cut:not(.back, .noroll) .sr-iso { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.page-blocks .sr-stage.cut:not(.back, .noroll) .sr-files { opacity: .55; }
.page-blocks .sr-story { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .sr-story li { padding: .375rem .75rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--sr-dim); font-size: .8125rem; transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.page-blocks .sr-story li:not(:last-child)::after { content: " →" / ""; }
.page-blocks .sr-story li.on { border-color: var(--accent); color: var(--paper); }
.page-blocks .sr-story li.on:last-child { background: var(--accent); color: var(--accent-on); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .sr-stage.spread .sr-links line { animation: sr-flow .8s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .sr.is-live .sr-step.on:not(.done) .sr-btn::after { animation: sr-ping 1.8s var(--ease) infinite; }
}
@keyframes sr-flow { to { stroke-dashoffset: -12; } }
@keyframes sr-ping { 0%, 100% { box-shadow: 0 0 0 0 var(--sr-glow); } 50% { box-shadow: 0 0 0 .5rem transparent; } }
/* 減少動態或動態關閉：所有過渡歸零（選擇器權重高於上方各元件的過渡；循環動畫本來就只在允許動態時套用）。 */
@media (prefers-reduced-motion: reduce) { html .page-blocks .sr :is(*, *::after) { transition: none; } }
html[data-motion="off"] .page-blocks .sr :is(*, *::after) { transition: none; }
@media (max-width: 61.99rem) { .page-blocks .sr { grid-template-columns: minmax(0, 1fr); } .page-blocks .sr.is-live .sr-stage { order: -1; } }
@media (max-width: 47.99rem) {
  .page-blocks .sr:not(.is-live) .sr-steps { grid-template-columns: minmax(0, 1fr); }
  .page-blocks .sr-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-blocks .sr-file:nth-child(n + 13) { display: none; }
  /* issue 288：外圍節點貼場景左右緣、不超出；步驟標題列允許換行，作業系統徽章排在標題下方。 */
  .page-blocks .sr-p1 { left: 0; transform: translate(0, -50%); }
  .page-blocks .sr-p2 { left: auto; right: 0; transform: translate(0, -50%); }
  .page-blocks .sr-btn { flex-wrap: wrap; row-gap: .25rem; }
  .page-blocks .sr-btn b { flex: none; white-space: nowrap; }
  .page-blocks .sr-btn span { flex: 1 1 0; min-width: 0; }
  .page-blocks .sr-oscue { order: 1; flex: 0 0 100%; width: fit-content; max-width: fit-content; margin: 0; }
}

/* 段落換行更平均，窄螢幕不留一兩個字的短尾行。 */
.page-blocks [data-scene] p { text-wrap: pretty; }