.technology-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); list-style: none; cursor: pointer; }
.technology-heading::-webkit-details-marker { display: none; }
.technology-heading h2 { font-size: var(--text-lg); font-weight: 500; letter-spacing: -.03em; }
.technology-subtitle { font-size: var(--text-xs); }
.technology-indicator { position: relative; width: 24px; height: 24px; }
.technology-indicator::before, .technology-indicator::after { content: ""; position: absolute; inset: 11px 4px; height: 2px; background: var(--color-ink); }
.technology-indicator::after { transform: rotate(90deg); }
#technology-details[open] .technology-indicator::after { transform: none; }
.pipeline-film { margin: var(--space-xl) 0 var(--space-lg); overflow-x: clip; }
.pipeline-narration { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xl); min-height: 75px; }
.pipeline-narration h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.5; letter-spacing: -.035em; min-width: 0; flex: 0 1 42%; }
.pipeline-narration p { min-width: 0; flex: 1; font-size: var(--text-sm); line-height: 1.8; max-width: 45ch; }
.pipeline-stage { margin-block: var(--space-lg); }
#pipeline-canvas { width: 100%; height: auto; color: var(--color-ink); fill: var(--color-ink); }
.pipeline-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
#pipeline-caption { font-size: var(--text-xs); white-space: nowrap; }
.pipeline-controls { display: flex; align-items: center; gap: var(--space-lg); width: 45%; }
#pipeline-play { min-height: 44px; min-width: 70px; border: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); cursor: pointer; text-align: left; white-space: nowrap; }
#pipeline-play:hover { text-decoration: underline; text-underline-offset: .3em; }
#pipeline-seek { display: block; appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0; background: var(--color-paper); cursor: ew-resize; accent-color: var(--color-ink); border-radius: 0; }
#pipeline-seek::-webkit-slider-runnable-track { height: 1px; background: var(--color-ink); }
#pipeline-seek::-moz-range-track { height: 1px; background: var(--color-ink); }
#pipeline-seek::-webkit-slider-thumb { appearance: none; width: 8px; height: 17px; background: var(--color-ink); border: 0; border-radius: 0; margin-top: calc(-1 * var(--space-xs)); }
#pipeline-seek::-moz-range-thumb { width: 8px; height: 16px; background: var(--color-ink); border: 0; border-radius: 0; }
.pipeline-controls :focus-visible { outline: var(--rule-bar) solid var(--color-ink); outline-offset: 4px; }
@media (max-width: 600px) {
  .technology-heading { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-xs) var(--space-md); }
  .technology-heading h2 { font-size: var(--text-md); }
  .technology-subtitle { grid-column: 1; }
  .technology-indicator { grid-column: 2; grid-row: 1 / 3; }
  .pipeline-film { margin-block-start: var(--space-xl); }
  .pipeline-narration { display: block; min-height: 120px; }
  .pipeline-narration h3 { font-size: var(--text-lg); }
  .pipeline-narration p { margin-block-start: var(--space-sm); font-size: var(--text-xs); max-width: 45ch; }
  .pipeline-stage { margin-inline: calc(-1 * var(--space-md)); margin-block: var(--space-lg); }
  .pipeline-bottom { gap: var(--space-md); }
  .pipeline-controls { width: 60%; gap: var(--space-xs); }
  #pipeline-play { min-width: 60px; }
}