/* 独立第二帧：采用集合版第二帧的媒体容器、2vw 横移及 3.35s 定格，不增加缩放。 */
:root { --family-nav-height: 52px; }
.portrait-layer { position: fixed; inset: var(--header-height) 0 auto; height: calc(100svh - var(--header-height)); }
.portrait-video { position: static; width: 100%; height: 100%; aspect-ratio: auto; display: block; object-fit: contain; object-position: center; transform: translate3d(2vw, 0, 0); transform-origin: center; mask-image: none; -webkit-mask-image: none; }
.portrait-blend { inset: 0 auto 0 0; width: 58%; background: linear-gradient(90deg, var(--canvas-media) 0 48%, rgba(247,241,237,.94) 61%, rgba(247,241,237,.34) 79%, transparent 100%); }
/* 导航占一行，章节仍在正文流中；不新增左右说明栏。 */
.family-nav { position: sticky; top: var(--header-height); z-index: 7; display: flex; flex-wrap: wrap; gap: 0 22px; padding: 4px 0; background: rgba(247,241,237,.98); border-bottom: 1px solid var(--line); }
.family-nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.family-nav a[aria-current] { color: var(--ink-primary); font-weight: 650; border-color: var(--accent); }
.family-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-intro { padding-bottom: 30px; }
#ability-groups { padding-top: 0; }
#ability-groups::before { content: none; }
.ability-family { margin: 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + var(--family-nav-height) + 8px); }
.family-heading { top: calc(var(--header-height) + var(--family-nav-height)); grid-template-columns: 20px minmax(0,1fr); column-gap: 12px; min-height: 94px; padding: 18px 0; background: rgba(247,241,237,.97); color: var(--ink-primary); }
.family-heading.is-stuck { background: rgba(247,241,237,.98); box-shadow: none; backdrop-filter: none; }
.family-toggle { width: 20px; height: 24px; margin: 0; color: var(--ink-secondary); }
.family-heading-copy { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.family-title-row { display: flex; align-items: baseline; gap: 12px; }
.family-heading-label { font-size: 20px; font-weight: 650; }
.family-count { font-size: 12px; font-weight: 400; }
.family-summary { color: var(--ink-secondary); font-size: 13px; font-weight: 400; line-height: 1.6; }
.ability-entry { --number-column: 32px; --column-gap: 12px; width: 100%; margin: 0; padding: 24px 0 30px; border-radius: 0; background: none; scroll-margin-top: calc(var(--header-height) + var(--family-nav-height) + 100px); }
.ability-entry::after { content: none; }
.ability-entry + .ability-entry::before { left: 44px; right: 0; width: auto; background: var(--line); opacity: .65; }
.ability-entry:hover, .ability-entry:focus-within, .ability-entry.is-visible:hover, .ability-entry.is-visible:focus-within { transform: none; }
.ability-entry:hover::before, .ability-entry:focus-within::before { opacity: .65; }
.ability-number { min-height: 0; padding: 3px 0 0; }
.ability-number strong { font-size: 14px; color: var(--ink-tertiary); font-weight: 500; }
.ability-number small { display: none; }
.ability-title { font-size: clamp(23px, 1.9vw, 27px); line-height: 1.3; }
.ability-content { padding-top: 12px; }
.ability-judgment { width: 100%; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink-primary); font-size: 17px; line-height: 1.65; font-weight: 550; }
.ability-body { margin-top: 12px; }
.case-footer { margin-top: 16px; }
@media (max-width: 767px) {
  .portrait-layer { position: fixed; inset: var(--header-height) 0 auto; height: calc(100svh - var(--header-height)); margin: 0; aspect-ratio: auto; }
  .portrait-video { object-position: center; }
  .ability-stage { padding-top: calc(var(--header-height) + 20px); }
  .family-nav { gap: 0 16px; }
  .family-nav a { font-size: 13px; }
  .family-heading { display: grid; min-height: 94px; }
  .family-heading-label { font-size: 18px; }
  .family-title-row { flex-wrap: wrap; }
  .ability-entry { display: block; }
  .ability-number { display: none; }
  .ability-title { font-size: 24px; }
  .ability-entry + .ability-entry::before { left: 0; }
  .portrait-blend { width: 100%; background: rgba(247,241,237,.88); }
}
@media (prefers-reduced-motion: reduce) { .family-content-shell { transition: none; } }
@media print {
  .portrait-layer, .family-nav { display: none; }
  .family-heading { position: static; }
  .family-content-shell { display: block !important; opacity: 1 !important; }
  .family-content { overflow: visible; }
}