.demo-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
}

.demo-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: #0f0f0f;
}

.demo-poster:focus-visible {
  outline-offset: -4px;
}

.demo-poster img,
.demo-poster svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.demo-poster svg {
  font-family: system-ui, "Noto Sans", "Noto Sans CJK SC", "PingFang SC", sans-serif;
}

.demo-poster svg text:lang(ja) {
  font-family: "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
}

.demo-poster svg text:lang(ko) {
  font-family: "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
}

.demo-poster svg text:lang(zh-Hant) {
  font-family: "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
}

.demo-play-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: clamp(46px, 7vw, 72px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #172232cc;
  box-shadow: 0 3px 12px #0005;
}

.demo-play-icon::after {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: 4px;
  border-block: 9px solid transparent;
  border-inline-start: 14px solid white;
}

.demo-poster:hover .demo-play-icon,
.demo-poster:focus-visible .demo-play-icon,
.obs-play:hover,
.obs-play:focus-visible {
  background: #344e70;
}

.demo-poster-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 620px) {
  .demo-poster-summary {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 12px;
    margin: 0;
    overflow: visible;
    clip-path: none;
    background: #172232;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
  }

  .demo-poster-summary p {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .demo-poster-summary p + p {
    margin-block-start: 3px;
    color: #bbffda;
  }
}