.demo-page { background: var(--ink); color: var(--paper); }
.demo-page :focus-visible { outline-color: var(--lime); }
.demo-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.demo-header img { width: 220px; }
.demo-back { font-size: 14px; color: rgb(242 245 252 / 80%); text-decoration: none; }
.demo-back:hover { color: var(--lime); }
.demo-main { padding-block: 56px 64px; }
.demo-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
.demo-heading .micro { color: var(--lime); }
.demo-heading h1 { margin-top: 14px; font-size: clamp(48px, 6vw, 84px); }
.demo-heading p { max-width: 340px; color: rgb(242 245 252 / 75%); }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #081225; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius); box-shadow: 0 24px 80px -32px rgb(0 0 0 / 60%); }
.demo-player figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 12px; color: rgb(242 245 252 / 65%); }
.demo-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 16%); }
.demo-next p { color: rgb(242 245 252 / 75%); }
.demo-next strong { color: var(--paper); }
@media (max-width: 760px) {
  .demo-header img { width: 165px; }
  .demo-back { font-size: 12px; }
  .demo-main { padding-top: 36px; }
  .demo-heading { display: grid; gap: 20px; }
  .demo-heading p { max-width: 100%; }
  .demo-player figcaption { flex-wrap: wrap; gap: 4px 16px; }
  .demo-next { align-items: start; flex-direction: column; }
}