/* A single on-demand player, with separate real-world and simulation selectors. */
.passage-project .project-content { min-width: 0; }
.passage-project .project-heading { flex-direction: column; gap: 8px; }
.passage-project .project-heading h3 { max-width: none; }
.passage-demos { max-width: 800px; margin: 26px auto 0; }
.passage-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--border); border-radius: 7px; background: #151719; }
.passage-caption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 11px; }
.passage-caption strong { color: var(--ink); font-size: .94rem; font-weight: 600; }
.passage-caption p { flex-basis: 100%; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.passage-scene-groups { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.passage-scene-group { min-width: 0; }
.passage-scene-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.passage-scene-heading h4 { font-size: .9rem; font-weight: 600; }
.passage-scene-heading > span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.passage-scene-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.passage-sim-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.passage-scene { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; text-align: left; }
.passage-thumbnail { position: relative; display: block; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: var(--soft); transition: border-color .18s ease; }
.passage-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.passage-duration { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, .76); font-size: .7rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.passage-scene-name { font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--body); }
.passage-scene:hover .passage-thumbnail { border-color: var(--border-strong); }
.passage-scene[aria-pressed="true"] .passage-thumbnail { border-color: var(--accent); }
.passage-scene[aria-pressed="true"] .passage-scene-name { color: var(--accent); font-weight: 650; }
.passage-scene:disabled { cursor: default; opacity: .6; }
.passage-playback-status { margin-top: 10px; color: var(--muted); font-size: .86rem; }
.passage-more { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: .92rem; }
.passage-project-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 4px; }
.passage-project-link:hover { color: var(--accent-hover); }
.passage-project-link .icon { width: 14px; height: 14px; flex-basis: 14px; }
@media (max-width: 800px) {
    .passage-scene-groups { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .passage-sim-scenes { max-width: calc(50% - 5px); }
}
@media (max-width: 500px) {
    .passage-scene-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .passage-sim-scenes { max-width: none; }
    .passage-demos { margin-top: 22px; }
    .passage-caption strong { font-size: .94rem; }
    .passage-scene-name { font-size: .86rem; }
}
@media print {
    .passage-demos { display: none; }
    .passage-project { break-inside: auto; }
}