.homepage-demo { width: min(calc(100% - 48px), 52rem); margin: 24px auto 40px; scroll-margin-top: 1rem; }
.homepage-demo h2 { margin: 0 0 14px; color: #f5f8fc; font-size: 1.25rem; text-align: center; }
.homepage-demo-window { border: 1px solid #36576b; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px #0005; }
.homepage-demo-chrome { padding: 10px 14px; color: #b9cbd8; background: #102335; font-size: .75rem; }
.homepage-demo-chrome::before { content: '● ● ●'; margin-right: 18px; color: #668397; letter-spacing: 2px; }
.homepage-demo-stage { position: relative; aspect-ratio: 1320 / 760; background: #0c2b3d; overflow: hidden; }
.homepage-demo-stage video, .homepage-demo-launch { width: 100%; height: 100%; }
.homepage-demo-stage video { display: block; object-fit: contain; }
.homepage-demo-launch { position: relative; display: block; border: 0; padding: 0; color: #04151f; background: #0c2b3d; cursor: pointer; font: inherit; }
.homepage-demo-launch img { display: block; width: 100%; height: 100%; object-fit: contain; }
.homepage-demo-play { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; background: #32d5dc; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 20px #0006; }
.homepage-demo-play small { font-size: .75rem; border-left: 1px solid #12545f; padding-left: 12px; }
.homepage-demo-launch:hover .homepage-demo-play { background: #71edf0; }
.homepage-demo [hidden] { display: none; }
.homepage-demo :focus-visible { outline: 3px solid #f7c66c; outline-offset: -4px; }
.homepage-demo-toolbar { display: flex; align-items: center; justify-content: center; }
.homepage-demo-toolbar:has([data-demo-close][hidden]) { display: none; }
.homepage-demo-status { margin: 0; font-size: .9rem; text-align: center; }
.homepage-demo-status:not(:empty) { margin-top: .5rem; }