/* An invitation to watch, within the existing night-carriage design. */
.demo-preview { position: relative; display: block; border-radius: 32px; overflow: hidden; }
.demo-preview img { display: block; }
.demo-preview__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9, 20, 16, .12) 65%, rgba(9, 20, 16, .94)); }
.demo-preview__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; display: grid; place-items: center; color: var(--night); background: var(--cream); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 8px 36px rgba(0,0,0,.28); transition: background .2s, scale .2s; }
.demo-preview:hover .demo-preview__play { background: var(--brass-3); scale: 1.07; }
.demo-preview__label { position: absolute; left: 12px; right: 12px; bottom: 23px; text-align: center; color: var(--cream); font-size: 15px; font-weight: 600; }
.demo-preview__label small { display: block; margin-top: 4px; font-size: 11px; color: var(--cream-2); font-weight: 400; letter-spacing: .06em; }
.demo-preview:focus-visible, [data-demo]:focus-visible { outline: 3px solid var(--brass-3); outline-offset: 5px; }
html.demo-open { overflow: hidden; }
.demo-dialog { width: min(540px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--night-line); border-radius: 24px; background: var(--night); color: var(--cream); box-shadow: 0 30px 100px rgba(0,0,0,.5); overflow: auto; }
.demo-dialog[open] { display: flex; flex-direction: column; }
.demo-dialog::backdrop { background: rgba(3, 9, 7, .82); }
.demo-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 20px; }
.demo-dialog__title { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.demo-dialog__close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--night-line); border-radius: 50%; color: var(--cream); background: var(--night-3); cursor: pointer; }
.demo-dialog__close:focus-visible { outline: 2px solid var(--brass-3); outline-offset: 3px; }
.demo-dialog__stage { display: flex; justify-content: center; background: #070e0b; }
.demo-dialog video { display: block; width: auto; max-width: 100%; height: min(72vh, 760px); height: min(72dvh, 760px); object-fit: contain; }
.demo-dialog__foot { padding: 12px 20px 16px; color: var(--cream-2); font-size: 13px; line-height: 1.5; }
.demo-dialog__foot p { margin: 0; }
.demo-dialog__foot a { color: var(--brass-3); text-decoration: underline; text-underline-offset: 3px; }
.demo-dialog__foot [hidden] { display: none; }
@media (max-width: 720px) {
  .demo-dialog { border-radius: 18px; }
  .demo-dialog__title { font-size: 18px; }
  .demo-dialog video { height: min(70vh, 680px); height: min(70dvh, 680px); }
  .device__caption { letter-spacing: .04em; }
}
@media (max-height: 520px) { .demo-dialog video { height: 58vh; height: 58dvh; } }
@media (prefers-reduced-motion: reduce) { .demo-preview__play { transition: none; } }