/* issue 193 場景 trellix-wise：AI 調查舞台。只讀官網 token 與 --accent*；沒有 JS 時舞台停在 data-step="4"。
   issue 325：不釘住、左四段右舞台、step-player 輪播（.is-armed／.is-auto／.is-run／.is-on）。 */
/* issue 325：不再釘住捲動；寬螢幕左四段、右舞台，垂直置中。 */
.page-blocks .tw { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 62rem) {
  .page-blocks .tw { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .page-blocks .tw .tw-stage { order: 2; aspect-ratio: 6 / 5; }
  .page-blocks .tw-steps { order: 1; }
}
.page-blocks .tw-steps { margin: 0; padding: 0; list-style: none; }
.page-blocks .tw-steps { display: grid; gap: .25rem; }
.page-blocks .tw-step { position: relative; padding: 1rem 1.25rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-l); transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
.page-blocks .tw-step:hover { border-color: var(--line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tw-step:hover { border-color: var(--on-dark-line); }
.page-blocks .tw-step.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* 未啟用的步驟用 --muted（淺底）／--muted-on-dark（深底）降階，不用透明度：兩者都過 AA 4.5:1。 */
.page-blocks .tw.is-armed .tw-step:not(.is-on) .tw-title button { color: var(--muted); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tw.is-armed .tw-step:not(.is-on) .tw-title button { color: var(--muted-on-dark); }
.page-blocks .tw-title button { transition: color var(--dur-slow) var(--ease); }
.page-blocks .tw-title { margin: 0; }
.page-blocks .tw-title button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 1rem; padding: .125rem 0; border-radius: var(--radius-m); color: inherit; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1.25; cursor: pointer; }
.page-blocks .tw-title button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 6px; }
.page-blocks .tw-num { color: var(--accent-ink); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .tw-step p { max-width: 32rem; margin: .375rem 0 0 calc(clamp(2rem, 3vw, 2.75rem) * 1.55 + 1rem); color: var(--muted); line-height: 1.8; }
/* 目前段落下緣的倒數細線（step-player 加 is-run 時跑一次 3.4 秒）。 */
.page-blocks .tw-timer { position: absolute; left: 1.25rem; right: 1.25rem; bottom: .5rem; height: 2px; border-radius: 2px; background: var(--accent-dark); opacity: 0; transform: scaleX(0); transform-origin: left; }
/* v85：深色區段編號用實心強調色（issue 258 起不再描邊），目前這一步為完整強調色，其餘為淡色。 */
.page-blocks :is(.pp-section--band, .pp-section--image) .tw-num { color: color-mix(in srgb, var(--accent-dark) 55%, transparent); transition: color var(--dur-base) var(--ease); }
/* 範例站：未選中的編號較淡，選中的步驟換成完整強調色。 */
.page-blocks :is(.pp-section--band, .pp-section--image) .tw-step.is-on .tw-num { color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tw-step p { color: var(--muted-on-dark); }

.page-blocks .tw-stage { position: relative; container-type: size; aspect-ratio: 1 / 1; overflow: clip; border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--deeper); color: var(--paper); isolation: isolate; box-shadow: var(--elevation-card); }
/* 窄螢幕：舞台在上（不釘住）、四段在下；輪播時只展開目前這段的說明。 */
@media (max-width: 61.99rem) {
  .page-blocks .tw .tw-stage { order: -1; aspect-ratio: 1 / 1; max-height: 34rem; }
  .page-blocks .tw.is-armed .tw-step:not(.is-on) p { display: none; }
  .page-blocks .tw-step { padding: .75rem .875rem 1rem; }
  .page-blocks .tw-cap { top: auto; bottom: .625rem; right: .75rem; }
  /* 行動與提問面板貼舞台底部，不壓在告警晶片上；出現時角落標籤讓位。 */
  .page-blocks .tw .tw-act { top: auto; bottom: .625rem; left: .625rem; right: .625rem; max-width: none; padding: .625rem .75rem; gap: .375rem .5rem; font-size: .75rem; }
  .page-blocks .tw .tw-act b { font-size: .6875rem; }
  .page-blocks .tw .tw-acts i { padding: .125rem .5rem; }
  /* 第 3 步顯示行動面板、第 4 步改顯示提問面板（同一個底部位置）；面板出現時核心晶片上移，不被蓋住。 */
  .page-blocks .tw .tw-ask { top: auto; bottom: .625rem; left: .625rem; right: .625rem; padding: .625rem .75rem; gap: .375rem; font-size: .75rem; }
  .page-blocks .tw .tw-stage[data-step="4"] .tw-act { opacity: 0; }
  .page-blocks .tw-stage:is([data-step="3"], [data-step="4"]) .tw-path path { display: none; }
  .page-blocks .tw-stage:is([data-step="3"], [data-step="4"]) .tw-path .tw-up { display: inline; }
  .page-blocks .tw .tw-stage:is([data-step="3"], [data-step="4"]) .tw-c1 { --x: 14; --y: 40; }
  .page-blocks .tw .tw-stage:is([data-step="3"], [data-step="4"]) .tw-c2 { --x: 36; --y: 22; }
  .page-blocks .tw .tw-stage:is([data-step="3"], [data-step="4"]) .tw-c3 { --x: 60; --y: 34; }
  .page-blocks .tw .tw-stage:is([data-step="3"], [data-step="4"]) .tw-c4 { --x: 84; --y: 14; }
  .page-blocks .tw-stage:is([data-step="3"], [data-step="4"]) .tw-cap { opacity: 0; }
}
.page-blocks .tw-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 46%, transparent, var(--deeper) 100%); }
.page-blocks .tw-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .6; scale: 1.04; transition: opacity 1s var(--ease), scale 1.6s var(--ease); }
.page-blocks .tw-stage:not([data-step="1"]) .tw-bg { opacity: .42; scale: 1.12; }
.page-blocks .tw-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-blocks .tw-path path { fill: none; stroke: var(--accent-dark); filter: drop-shadow(0 0 3px var(--accent)); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease); }
.page-blocks .tw-stage:not([data-step="1"]) .tw-path path { stroke-dashoffset: 0; }
/* 手機第 3、4 步晶片上移時，改用對應位置的折線。 */
.page-blocks .tw-path .tw-up { display: none; }
.page-blocks .tw-chip { position: absolute; left: 0; top: 0; z-index: 1; padding: .5rem .875rem; border: 1px solid var(--accent-dark); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, var(--deeper)); color: var(--paper); font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqh - 50%)); box-shadow: 0 0 1rem color-mix(in srgb, var(--accent) 38%, transparent); transition: transform 1.3s var(--ease), opacity .8s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.page-blocks .tw-chip::before { content: ""; display: inline-block; width: .4375rem; height: .4375rem; margin-right: .5rem; border-radius: 50%; background: var(--accent-dark); }
.page-blocks .tw-chip--noise { border-color: var(--on-dark-line); color: var(--muted-on-dark); box-shadow: none; }
.page-blocks .tw-chip--noise::before { background: var(--muted-on-dark); }
.page-blocks .tw-stage[data-step="1"] .tw-chip--noise { opacity: .4; text-decoration: line-through; }
.page-blocks .tw-stage:not([data-step="1"]) .tw-chip--noise { opacity: .1; }
.page-blocks .tw-stage .tw-chip--core { background: color-mix(in srgb, var(--accent) 22%, var(--deeper)); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 .75rem color-mix(in srgb, var(--accent) 25%, transparent); }
.page-blocks .tw-c1 { --x: 24; --y: 24; } .page-blocks .tw-stage:not([data-step="1"]) .tw-c1 { --x: 14; --y: 62; }
.page-blocks .tw-c2 { --x: 72; --y: 18; } .page-blocks .tw-stage:not([data-step="1"]) .tw-c2 { --x: 36; --y: 42; }
.page-blocks .tw-c3 { --x: 26; --y: 66; } .page-blocks .tw-stage:not([data-step="1"]) .tw-c3 { --x: 58; --y: 56; }
.page-blocks .tw-c4 { --x: 76; --y: 66; } .page-blocks .tw-stage:not([data-step="1"]) .tw-c4 { --x: 84; --y: 32; }
/* 第 2 步起雜訊退到舞台內緣（座標留在 12–88％，晶片半寬不會超出框被切字）。 */
.page-blocks .tw-n1 { --x: 12; --y: 12; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n1 { --x: 12; --y: 6; }
.page-blocks .tw-n2 { --x: 48; --y: 10; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n2 { --x: 50; --y: 5; }
.page-blocks .tw-n3 { --x: 88; --y: 40; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n3 { --x: 88; --y: 42; }
.page-blocks .tw-n4 { --x: 50; --y: 86; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n4 { --x: 50; --y: 94; }
.page-blocks .tw-n5 { --x: 10; --y: 46; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n5 { --x: 12; --y: 48; }
.page-blocks .tw-n6 { --x: 86; --y: 84; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n6 { --x: 88; --y: 92; }
.page-blocks .tw-n7 { --x: 52; --y: 40; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n7 { --x: 70; --y: 6; }
.page-blocks .tw-n8 { --x: 14; --y: 82; } .page-blocks .tw-stage:not([data-step="1"]) .tw-n8 { --x: 12; --y: 92; }
.page-blocks :is(.tw-act, .tw-ask) { position: absolute; z-index: 2; left: 6%; right: 6%; padding: .875rem 1.125rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-l); background: color-mix(in srgb, var(--deeper) 88%, transparent); color: var(--muted-on-dark); font-size: .8125rem; opacity: 0; translate: 0 .875rem; transition: opacity .7s var(--ease) .35s, translate .7s var(--ease) .35s; }
.page-blocks .tw-act { top: 6%; right: auto; max-width: 80%; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .75rem; border-color: var(--accent-dark); }
.page-blocks .tw-act b { color: var(--accent-dark); font-size: .75rem; letter-spacing: .1em; }
.page-blocks .tw-acts { display: flex; gap: .375rem; }
.page-blocks :is(.tw-acts, .tw-who) i { padding: .25rem .625rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-style: normal; }
.page-blocks :is(.tw-act, .tw-ask) em { color: var(--muted-on-dark); font-style: normal; }
.page-blocks .tw-ask { bottom: 7%; display: grid; gap: .625rem; }
.page-blocks .tw-q { display: block; padding: .625rem .875rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-m); background: var(--deeper); color: var(--paper); font-weight: 700; }
/* 打字游標：閃爍只在允許動態時；減少動態或暫停動態時是靜止的細線。 */
.page-blocks .tw-q::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: .25rem; vertical-align: text-bottom; background: var(--accent-dark); animation: tw-caret 1.1s steps(1) infinite; }
@keyframes tw-caret { 50% { opacity: 0; } }
.page-blocks .tw-who { display: flex; flex-wrap: wrap; gap: .375rem; }
.page-blocks .tw-stage:is([data-step="3"], [data-step="4"]) .tw-act, .page-blocks .tw-stage[data-step="4"] .tw-ask { opacity: 1; translate: 0 0; }
.page-blocks :is(.tw-cnt, .tw-story) { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .625rem .875rem; border: 1px solid var(--accent-dark); border-radius: var(--radius-l); background: color-mix(in srgb, var(--deeper) 90%, transparent); color: var(--muted-on-dark); font-size: .8125rem; opacity: 0; translate: 0 .5rem; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.page-blocks .tw-cnt { top: 5%; left: 5%; }
.page-blocks .tw-cnt b { color: var(--accent-dark); font-size: 1.125em; font-weight: 900; margin-inline: .2em; font-variant-numeric: tabular-nums; }
.page-blocks .tw-story { left: 50%; bottom: 6%; translate: -50% .5rem; border-style: dashed; white-space: nowrap; max-width: 92%; }
.page-blocks .tw-story b { color: var(--accent-dark); }
.page-blocks .tw-stage[data-step="1"] .tw-cnt { opacity: 1; translate: 0 0; }
.page-blocks .tw-stage[data-step="2"] .tw-story { opacity: 1; translate: -50% 0; }
/* 第 3 步的行動依序亮起；第 4 步（最終構圖）直接全亮。 */
.page-blocks .tw-stage:is([data-step="3"], [data-step="4"]) .tw-acts i { border-color: var(--accent-dark); background: var(--accent-dark); color: var(--deeper); }
.page-blocks .tw-acts i:nth-child(2) { --tw-d: .45s; } .page-blocks .tw-acts i:nth-child(3) { --tw-d: .9s; } .page-blocks .tw-acts i:nth-child(4) { --tw-d: 1.35s; }
.page-blocks .tw-cap { position: absolute; top: .875rem; right: 1rem; z-index: 3; margin: 0; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .1em; }
@media (max-width: 40rem) { .page-blocks .tw-chip { padding: .375rem .625rem; font-size: .6875rem; } .page-blocks .tw-act { max-width: 92%; }
  /* issue 288：窄舞台把晶片位置夾在舞台內（左右各留 .25rem），背景圖不放大，邊緣不被切。 */
  .page-blocks .tw-chip { transform: translate(clamp(.25rem, calc(var(--x) * 1cqw - 50%), calc(100cqw - 100% - .25rem)), calc(var(--y) * 1cqh - 50%)); }
  .page-blocks .tw-bg, .page-blocks .tw-stage:not([data-step="1"]) .tw-bg { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .tw.is-auto.is-run .tw-step.is-on .tw-timer { opacity: .75; animation: tw-timer 3.4s linear forwards; }
  html.js:not([data-motion="off"]) .page-blocks .tw.is-armed .tw-stage[data-step="3"] .tw-acts i { animation: tw-lit .4s var(--ease) calc(.6s + var(--tw-d, 0s)) both; }
}
@keyframes tw-timer { to { transform: scaleX(1); } }
@keyframes tw-lit { from { border-color: var(--on-dark-line); background: transparent; color: var(--paper); } }
@media (prefers-reduced-motion: reduce) {
  .page-blocks .tw-q::after { animation: none; }
  .page-blocks :is(.tw-bg, .tw-path path, .tw-chip, .tw-act, .tw-ask, .tw-cnt, .tw-story, .tw-step) { transition: none; }
}
html[data-motion="off"] .page-blocks :is(.tw-bg, .tw-path path, .tw-chip, .tw-act, .tw-ask, .tw-cnt, .tw-story) { transition: none; }
html[data-motion="off"] .page-blocks .tw-q::after { animation: none; }