.dw-trailer { margin: 36px 0; }
.dw-trailer-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #477c6e; border-radius: 18px; background: radial-gradient(ellipse at center, #234f49, #061b20 75%); }
.dw-trailer-stage > img, .dw-trailer-stage > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.dw-trailer-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; min-height: 64px; max-width: 90%; padding: 16px 24px; border: 2px solid #e3fff1; border-radius: 999px; background: #123c35; color: #fff; font: 700 18px/1.3 system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 24px #0009; }
.dw-trailer-play:hover { background: #245d4e; }
.dw-trailer-play:focus-visible, .dw-trailer-stage > video:focus-visible { outline: 4px solid #ffd56b; outline-offset: -6px; }
.dw-trailer-play[hidden], .dw-trailer-status[hidden] { display: none; }
.dw-trailer figcaption, .dw-trailer-status { margin-top: 12px; color: #d2e9de; font-size: 15px; line-height: 1.6; }
.dw-trailer { container-type: inline-size; }
@container (max-width: 600px) { .dw-trailer-stage { aspect-ratio: 9 / 16; } }
@supports not (container-type: inline-size) { @media (max-width: 650px) { .dw-trailer-stage { aspect-ratio: 9 / 16; } } }