/* 2026-10-05 場景 sentinelone-mitre：評測四個數字。兩欄格線（窄螢幕一欄），每格大字＋說明＋貼底的圖。
   沒有 JS 或減少動態：圖是最終狀態。有 JS（.is-live）：捲到時加 .in，點與格子逐欄亮起、長條長出、年份依序點亮、數字跳動。 */
.page-blocks .sm-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--on-dark-line); overflow: hidden; }
.page-blocks .sm-num { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: clamp(1.5rem, 3.4vw, 3rem); background: var(--deeper); }
.page-blocks .sm-v { margin: 0; color: var(--paper); font-family: "Inter Tight", var(--font-body); font-size: clamp(3.25rem, 7.4vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; font-feature-settings: "palt", "tnum"; white-space: nowrap; }
.page-blocks .sm-v i { color: var(--accent); font-size: .42em; font-style: normal; font-weight: 700; letter-spacing: -.01em; }
.page-blocks .sm-num:not(:has(.sm-v span)) .sm-v { font-family: var(--font-body); letter-spacing: -.02em; }
.page-blocks .sm-l { max-width: 26em; margin: 0 0 1.5rem; color: var(--muted-on-dark); font-size: 1rem; }
.page-blocks :is(.sm-matrix, .sm-lanes, .sm-bars, .sm-years) { margin-top: auto; }
.page-blocks .sm-matrix { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(3px, .5vw, 6px); }
.page-blocks .sm-matrix[data-rows="1"] { grid-template-rows: repeat(1, auto); }
.page-blocks .sm-matrix[data-rows="2"] { grid-template-rows: repeat(2, auto); }
.page-blocks .sm-matrix[data-rows="3"] { grid-template-rows: repeat(3, auto); }
.page-blocks .sm-matrix[data-rows="4"] { grid-template-rows: repeat(4, auto); }
.page-blocks .sm-matrix[data-rows="5"] { grid-template-rows: repeat(5, auto); }
.page-blocks .sm-matrix[data-rows="6"] { grid-template-rows: repeat(6, auto); }
.page-blocks .sm-matrix[data-rows="7"] { grid-template-rows: repeat(7, auto); }
.page-blocks .sm-matrix[data-rows="8"] { grid-template-rows: repeat(8, auto); }
.page-blocks .sm-matrix i { aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.page-blocks .sm-axis { display: flex; justify-content: space-between; margin: .5rem 0 0; color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .sm-lanes { display: grid; gap: .5rem; }
.page-blocks .sm-lanes p { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .75rem; margin: 0; color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .sm-lanes b { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(3px, .5vw, 6px); }
.page-blocks .sm-lanes i { height: 1.75rem; border-radius: 3px; background: var(--on-dark-line); }
.page-blocks .sm-lanes p:last-child i { background: var(--accent); }
.page-blocks .sm-bars { display: grid; gap: .625rem; }
.page-blocks .sm-bars p { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .75rem; margin: 0; color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .sm-bar { display: block; height: .75rem; border-radius: var(--r-pill); background: var(--on-dark-line); }
.page-blocks .sm-bars p:last-child .sm-bar { background: var(--accent); }
.page-blocks .sm-bar[data-w="0"] { width: 0%; }
.page-blocks .sm-bar[data-w="5"] { width: 5%; }
.page-blocks .sm-bar[data-w="10"] { width: 10%; }
.page-blocks .sm-bar[data-w="15"] { width: 15%; }
.page-blocks .sm-bar[data-w="20"] { width: 20%; }
.page-blocks .sm-bar[data-w="25"] { width: 25%; }
.page-blocks .sm-bar[data-w="30"] { width: 30%; }
.page-blocks .sm-bar[data-w="35"] { width: 35%; }
.page-blocks .sm-bar[data-w="40"] { width: 40%; }
.page-blocks .sm-bar[data-w="45"] { width: 45%; }
.page-blocks .sm-bar[data-w="50"] { width: 50%; }
.page-blocks .sm-bar[data-w="55"] { width: 55%; }
.page-blocks .sm-bar[data-w="60"] { width: 60%; }
.page-blocks .sm-bar[data-w="65"] { width: 65%; }
.page-blocks .sm-bar[data-w="70"] { width: 70%; }
.page-blocks .sm-bar[data-w="75"] { width: 75%; }
.page-blocks .sm-bar[data-w="80"] { width: 80%; }
.page-blocks .sm-bar[data-w="85"] { width: 85%; }
.page-blocks .sm-bar[data-w="90"] { width: 90%; }
.page-blocks .sm-bar[data-w="95"] { width: 95%; }
.page-blocks .sm-bar[data-w="100"] { width: 100%; }
.page-blocks .sm-years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .375rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .sm-years li { padding-top: .625rem; border-top: 3px solid var(--accent); color: var(--muted-on-dark); font-size: .8125rem; font-feature-settings: "tnum"; }
.page-blocks .sm-years li:last-child { color: var(--paper); font-weight: 700; }
/* issue 218：場景說明在全寬區段下，46rem 會把一句話折成兩行、右側空白；放寬到 68rem。 */
.page-blocks .sm-note { max-width: 68rem; margin: 1.5rem 0 0; color: var(--muted-on-dark); font-size: .9375rem; }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .sm-nums { border-color: var(--line); background: var(--line); }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .sm-num { background: var(--paper); }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .sm-v { color: var(--ink); }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) :is(.sm-l, .sm-axis, .sm-lanes p, .sm-bars p, .sm-years li, .sm-note) { color: var(--muted); }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) :is(.sm-v i, .sm-matrix i) { color: var(--accent-ink); background-color: var(--accent-ink); }
.page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .sm-v i { background: none; }
@media (max-width: 47.99rem) { .page-blocks .sm-nums { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live:not(.in) .sm-matrix i { opacity: .14; transform: scale(.6); }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live:not(.in) .sm-lanes i { opacity: .2; transform: scaleY(.2); }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live:not(.in) .sm-bar { width: 0; }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live:not(.in) .sm-years li { border-top-color: var(--on-dark-line); }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live :is(.sm-matrix i, .sm-lanes i) { transition: opacity .4s var(--ease), transform .4s var(--ease); transform-origin: 50% 100%; }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live .sm-bar { transition: width 1.2s var(--ease); }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live .sm-bars p:last-child .sm-bar { transition-delay: .5s; }
  html:not([data-motion="off"]) .page-blocks .sm-nums.is-live .sm-years li { transition: border-color .4s var(--ease); }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="1"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="1"] { transition-delay: 0.05s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="2"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="2"] { transition-delay: 0.10s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="3"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="3"] { transition-delay: 0.15s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="4"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="4"] { transition-delay: 0.20s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="5"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="5"] { transition-delay: 0.25s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="6"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="6"] { transition-delay: 0.30s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="7"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="7"] { transition-delay: 0.35s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="8"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="8"] { transition-delay: 0.40s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="9"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="9"] { transition-delay: 0.45s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="10"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="10"] { transition-delay: 0.50s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="11"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="11"] { transition-delay: 0.55s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="12"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="12"] { transition-delay: 0.60s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="13"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="13"] { transition-delay: 0.65s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="14"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="14"] { transition-delay: 0.70s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="15"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="15"] { transition-delay: 0.75s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="16"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="16"] { transition-delay: 0.80s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="17"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="17"] { transition-delay: 0.85s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="18"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="18"] { transition-delay: 0.90s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="19"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="19"] { transition-delay: 0.95s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="20"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="20"] { transition-delay: 1.00s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="21"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="21"] { transition-delay: 1.05s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="22"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="22"] { transition-delay: 1.10s; }
  .page-blocks .sm-nums.is-live .sm-matrix i[data-c="23"], .page-blocks .sm-nums.is-live .sm-lanes i[data-c="23"] { transition-delay: 1.15s; }
  .page-blocks .sm-nums.is-live .sm-years li:nth-child(2) { transition-delay: .15s; } .page-blocks .sm-nums.is-live .sm-years li:nth-child(3) { transition-delay: .3s; }
  .page-blocks .sm-nums.is-live .sm-years li:nth-child(4) { transition-delay: .45s; } .page-blocks .sm-nums.is-live .sm-years li:nth-child(n + 5) { transition-delay: .6s; }
}

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