/* issue 193 場景 trellix-four：先問四件事。左：編號問句與收束句；右：四格屬性。只讀官網 token 與 --accent*。 */
.page-blocks .tf { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
@media (min-width: 62rem) { .page-blocks .tf { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.page-blocks .tf-qs { margin: 0; padding: 0; list-style: none; }
.page-blocks .tf-qs li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: baseline; padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--ink); font-size: clamp(1.1875rem, 2vw, 1.625rem); font-weight: 500; line-height: 1.5; transition: padding var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.page-blocks .tf-qs li:last-child { border-bottom: 1px solid var(--line); }
.page-blocks .tf-qs li:hover { padding-left: .875rem; color: var(--accent-ink); }
.page-blocks .tf-n { color: var(--accent-ink); font-size: .9375rem; font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.page-blocks .tf-close { margin: 1.75rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--accent); color: var(--muted); font-size: 1.125rem; line-height: 1.7; }
.page-blocks .tf-attrs { display: grid; gap: .875rem; margin: 0; grid-auto-rows: 1fr; }
@media (min-width: 40rem) { .page-blocks .tf-attrs { grid-template-columns: 1fr 1fr; } }
.page-blocks .tf-attr { display: flex; flex-direction: column; justify-content: flex-start; padding: 2.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); transition: border-color var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
.page-blocks .tf-attr:hover { border-color: var(--accent-ink); translate: 0 -4px; }
.page-blocks .tf-attr dt { margin: 0 0 .625rem; color: var(--accent-ink); font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.page-blocks .tf-attr dd { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.page-blocks :is(.pp-section--band, .pp-section--image) .tf-qs li { color: var(--paper); border-color: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tf-n, .page-blocks :is(.pp-section--band, .pp-section--image) .tf-attr dt { color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tf-close, .page-blocks :is(.pp-section--band, .pp-section--image) .tf-attr dd { color: var(--muted-on-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .tf-attr { background: transparent; border-color: var(--on-dark-line); }
@media (prefers-reduced-motion: reduce) { .page-blocks :is(.tf-qs li, .tf-attr) { transition: none; } .page-blocks .tf-attr:hover { translate: 0 0; } }
html[data-motion="off"] .page-blocks :is(.tf-qs li, .tf-attr) { transition: none; }
html[data-motion="off"] .page-blocks .tf-attr:hover { translate: 0 0; }