.native-demo{position:relative;margin:0;aspect-ratio:16/9;background:#080808;overflow:hidden;isolation:isolate}
.native-demo__poster,.native-demo video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.native-demo__poster{object-fit:cover;z-index:1;transition:opacity .15s ease}
.native-demo[data-started="true"] .native-demo__poster{opacity:0;pointer-events:none}
.native-demo__play{position:absolute;z-index:2;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(1);display:grid;place-items:center;width:clamp(70px,9vw,96px);height:clamp(70px,9vw,96px);padding:0;border:1px solid #ffffff70;border-radius:50%;background:#d6fd3a;color:#111;box-shadow:0 6px 28px #0005;cursor:pointer;transition:transform .15s ease,opacity .2s ease,background .15s ease}
.native-demo__play svg{width:38px;height:38px;margin:0;transform:translateX(.5px)}
.native-demo[data-state="playing"] .native-demo__play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.92)}
@media(hover:hover){.native-demo:not([data-state="playing"]):hover .native-demo__play{transform:translate(-50%,-50%) scale(1.07)}}
.native-demo[data-state="playing"] .native-demo__play:focus-visible{opacity:1;outline:3px solid #fff;outline-offset:5px}
.native-demo__play:focus-visible{outline:3px solid #fff;outline-offset:5px}
.native-demo[data-state="loading"] .native-demo__play{background:#d6fd3acc}
.native-demo[data-state="loading"] .native-demo__play svg{opacity:.35}
.native-demo[data-state="loading"] .native-demo__play:after{content:"";position:absolute;inset:8px;border:2px solid transparent;border-top-color:#111;border-radius:50%;animation:native-video-loading .8s linear infinite}
.native-demo__status{position:absolute;z-index:3;bottom:10px;left:12px;right:12px;color:#fff;font-size:12px;text-align:center;text-shadow:0 1px 4px #000}
.native-demo__status:empty{display:none}
@keyframes native-video-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.native-demo__poster,.native-demo__play{transition:none}.native-demo[data-state="loading"] .native-demo__play:after{animation:none}}

.native-demo:is([data-state="idle"],[data-state="paused"],[data-state="ended"]) .native-demo__play{box-shadow:0 0 0 7px #d6fd3a0d,0 0 30px #d6fd3a73,0 0 54px #d6fd3a29,0 6px 28px #0005}