.mp4-guide h1 { font-size: clamp(2.3rem, 4.7vw, 3.9rem); }
.mp4-guide .article-answer { max-width: 65ch; }
.skip-article { position: absolute; top: 8px; left: 16px; transform: translateY(-150%); z-index: 10; padding: 12px; background: var(--panel); }
.skip-article:focus { transform: none; }
.mp4-guide a:focus-visible, .result-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.track-diagram { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 28px 0; }
.track-diagram > div { padding: 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.track-diagram span { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .08em; }
.track-diagram strong { display: block; margin: 12px 0 6px; font-size: 1.15rem; }
.track-diagram small { color: var(--muted); line-height: 1.5; }
.result-table-wrap { max-width: 100%; overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); border-radius: 12px; }
.result-table-wrap table { width: 100%; min-width: 550px; margin: 0; border-collapse: collapse; font-size: .92rem; }
.result-table-wrap caption { padding: 16px; text-align: left; color: var(--muted); font-size: .8rem; }
.result-table-wrap th, .result-table-wrap td { padding: 16px; vertical-align: top; border-top: 1px solid var(--line); text-align: left; }
.result-table-wrap tbody th { color: var(--ink); }
.result-table-wrap small { display: inline-block; margin-top: 5px; font-weight: 400; color: var(--muted); }
.mp4-guide article code { overflow-wrap: anywhere; }
.mp4-guide .export-command code { overflow-wrap: normal; }
@media(max-width:540px) {
  .mp4-guide h1 { font-size: 2.3rem; }
  .track-diagram { grid-template-columns: 1fr; gap: 8px; }
  .track-diagram > div { padding: 16px; }
  .track-diagram strong { margin-top: 6px; }
}
@media(prefers-reduced-motion:reduce) { .mp4-guide .article-jumps a { transition: none; } }