/* Responsive demo columns preserve the authors' videos without cropping. */
.demo-article { max-width: 1440px; margin: 0 auto; padding: 72px 32px 96px; }
.article-heading { text-align: center; margin-bottom: 72px; }
.article-heading h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; letter-spacing: -0.04em; margin: 32px 0 24px; }
.article-prose { max-width: 68ch; margin: 0 auto 64px; font-size: 1.0625rem; line-height: 1.8; }
.article-prose p + p { margin-top: 1.25em; }
.article-prose sup a { text-decoration: underline; text-underline-offset: 0.15em; }
.demo-group + .demo-group { margin-top: 48px; }
.group-heading { margin: 0 0 20px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
.paper-demo { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 6; padding-bottom: 48px; border-top: 1px solid var(--line); padding-top: 20px; }
.paper-demo h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; scroll-margin-top: 72px; }
.demo-links { color: var(--muted); margin: 0 0 20px; padding-top: 8px; }
.demo-links a, .article-heading > a { text-decoration: underline; text-underline-offset: 4px; }
.demo-links a:hover { color: var(--ink); }
.paper-demo video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg-sunken); }
@media (max-width: 1099px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .demo-article { padding: 48px 20px 64px; } .article-heading { margin-bottom: 48px; } .demo-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .demo-article { padding: 0; } .paper-demo { break-inside: avoid; } }

.demo-summary { margin: 18px 0 0; font-size: 0.9375rem; line-height: 1.7; }
.demo-citations { margin: 12px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
.demo-citations a { text-decoration: underline; text-underline-offset: 3px; }

/* Shared row tracks align videos using the actual tallest title in each row. */
.paper-demo > .hud-label { grid-row: 1; }
.paper-demo > h3 { grid-row: 2; }
.paper-demo > .demo-links { grid-row: 3; }
.paper-demo > video { grid-row: 4; }
.paper-demo > .demo-summary { grid-row: 5; }
.paper-demo > .demo-citations { grid-row: 6; }

/* References as footnotes: a rule, then a small numbered list. */
.footnotes { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.footnotes ol { margin: 0; padding-left: 1.25rem; }
.footnotes li { padding-left: 0.25rem; }
.footnotes a { text-decoration: underline; text-underline-offset: 0.15em; }
.footnotes a:hover { color: var(--ink); }