.revision-demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 48px; margin: 56px 0; padding: 40px 0; border-block: 1px solid var(--border-card); scroll-margin-top: 90px; }
.revision-copy h3 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; margin-bottom: 24px; }
.revision-copy p, .revision-steps, .revision-transcript p { max-width: 70ch; }
.revision-steps { padding-left: 24px; margin-block: 24px; }
.revision-steps li { padding-left: 8px; margin-bottom: 16px; }
.revision-steps strong { color: var(--text-main); }
.revision-context, .revision-source { color: var(--text-muted); }
.revision-player { min-width: 0; }
.revision-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-dark); }
.revision-player video::cue { font-size: 0.95rem; background: #080c10; color: #fff; }
.revision-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.revision-controls[hidden], .revision-quality[hidden] { display: none; }
.revision-controls .btn { font: inherit; min-height: 44px; padding: 8px 14px; }
.revision-controls .btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.revision-quality { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.revision-quality select { font: inherit; min-height: 44px; padding: 8px; color: var(--text-main); background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-sm); }
.revision-status { min-height: 3.2em; margin-top: 16px; margin-bottom: 12px; }
.revision-source, .revision-links { font-size: 0.9375rem; }
.revision-links a, .revision-transcript a { text-decoration: underline; text-underline-offset: 4px; }
.revision-links a { display: inline-block; padding-block: 8px; }
.revision-transcript { grid-column: 1 / -1; border-top: 1px solid var(--border-card); padding-top: 16px; }
.revision-transcript summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 600; }
.revision-transcript blockquote { margin: 24px 0; padding: 20px; background: var(--bg-card); max-width: 65ch; }
@media (max-width: 900px) { .revision-demo { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; } }
@media (prefers-reduced-motion: reduce) { .revision-demo *, .revision-demo *::before, .revision-demo *::after { transition: none !important; animation: none !important; } }