.demo-section { padding: 72px 0; }
.demo-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.demo-heading h2 { margin: 0 0 12px; }
.demo-heading p { max-width: 660px; margin: 0; color: var(--muted); }
.demo-heading > a { flex-shrink: 0; font-size: 15px; }
.demo-stage { position: relative; aspect-ratio: 16 / 9; background: #071219; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.demo-poster { position: absolute; inset: 0; }
.demo-poster[hidden], .demo-footer button[hidden] { display: none; }
.demo-poster img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .5; }
.demo-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(transparent, #071219b3); }
.demo-start .solid-link { font: inherit; cursor: pointer; background: var(--paper); color: var(--ink); border: 1px solid var(--paper); }
.demo-start p { max-width: 400px; text-align: center; color: #fff; font-size: 14px; margin: 18px 0 0; }
.demo-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; color: var(--muted); }
.demo-footer button { font: inherit; color: var(--ink); background: transparent; border: 0; text-decoration: underline; cursor: pointer; padding: 12px 0; }
.demo-mobile-link { display: none !important; }
@media (max-width: 899px) {
  .demo-heading { display: block; }
  .demo-heading > a { display: inline-block; margin-top: 16px; }
  .demo-run { display: none !important; }
  .demo-mobile-link { display: inline-flex !important; }
  .demo-stage { min-height: 240px; }
  .demo-section { padding: 44px 0; }
}
.demo-heading h2 { font-family: inherit; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.demo-start .solid-link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 14px 26px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.demo-start .solid-link:hover { background: #fff; }
.demo-start .solid-link:focus-visible, .demo-footer button:focus-visible { outline: 3px solid #55bfb3; outline-offset: 5px; }
.demo-footer { padding-top: 12px; }
.demo-stage { width: 100%; min-width: 0; }
@media (max-width: 899px) {
  .demo-stage { aspect-ratio: auto; height: 240px; }
  .demo-start .solid-link { width: auto; max-width: 100%; }
  .demo-start p { max-width: 100%; }
}

/* Touch devices open the mobile player with the full browser viewport. */
.mobile-demo-device .demo-run { display: none !important; }
.mobile-demo-device .demo-mobile-link { display: inline-flex !important; }