:root { --chd-embed-max-width: 94%; }
@media (max-width: 700px) {
  :root { --chd-embed-max-width: 96%; }
}
:is(.wp-block-video, .wp-video, .wp-block-embed.is-type-video,
    :is(.embed-responsive, .ratio, .video-container, .responsive-video):has(> :is(
      video, iframe[src*="youtube.com/embed/"], iframe[src*="youtube-nocookie.com/embed/"], iframe[src*="player.vimeo.com/video/"]
    ))):where(:not(#hd-blog-design *, .wp-block-video *, .wp-video *, .wp-block-embed *, .alignleft, .alignright)) {
  max-inline-size: var(--chd-embed-max-width);
  margin-inline: auto;
}
video:where(:not(#hd-blog-design *, .wp-block-video *, .wp-video *, .ratio *, .embed-responsive *, .video-container *, .responsive-video *, :fullscreen)) {
  display: block;
  max-inline-size: var(--chd-embed-max-width);
  block-size: auto;
  margin-inline: auto;
}
iframe:is(
  [src*="youtube.com/embed/"], [src*="youtube-nocookie.com/embed/"], [src*="player.vimeo.com/video/"]
):where(:not(#hd-blog-design *, .wp-block-embed *, .ratio *, .embed-responsive *, .video-container *, .responsive-video *, :fullscreen)) {
  scale: var(--chd-embed-max-width);
}

/* YouTube-style preview in the site's palette; the real player loads on click. */
#hd-blog-design .chd-yt-preview { position: absolute; inset: 0; display: block; overflow: hidden; color: var(--hd-paper); background: #382424; font-size: 14px; line-height: 1.35; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-preview :is(a,button) { color: inherit; text-decoration: none; margin: 0; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-preview :is(a,button):focus-visible { outline: 2px solid var(--hd-paper); outline-offset: -3px; }
#hd-blog-design .chd-yt-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#hd-blog-design .chd-yt-start::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#382424d9,transparent 35%,transparent 65%,#382424b8); }
#hd-blog-design .hd-article-body .chd-yt-start .chd-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; opacity: 1; }
#hd-blog-design .chd-yt-play { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; filter: drop-shadow(0 1px 2px #38242455); }
#hd-blog-design .chd-yt-play-shape { fill: var(--hd-ink); transition: fill .15s; }
#hd-blog-design .chd-yt-play-triangle { fill: var(--hd-paper); }
#hd-blog-design .chd-yt-start:is(:hover,:focus-visible) .chd-yt-play-shape { fill: #5e3535; }
#hd-blog-design .chd-yt-heading { position: absolute; z-index: 2; inset: 12px 14px auto; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; }
#hd-blog-design .chd-yt-heading a { pointer-events: auto; }
#hd-blog-design .chd-yt-heading-text { display: block; min-width: 0; }
#hd-blog-design .hd-site .hd-article-body .chd-video-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(13px,1.5cqi,18px); font-weight: 700; line-height: 1.35; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-channel { display: block; margin-top: 2px; font-size: clamp(11px,1.1cqi,13px); }
#hd-blog-design .hd-site .hd-article-body .chd-yt-heading a:hover { text-decoration: underline; }
#hd-blog-design .chd-yt-avatar { position: relative; flex: 0 0 36px; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--hd-ink); }
#hd-blog-design .chd-yt-avatar:has(img:not([hidden])) { box-shadow: 0 0 0 1px var(--hd-paper); }
#hd-blog-design .chd-yt-initial { display: grid; width: 100%; height: 100%; place-items: center; font-size: 18px; font-weight: 700; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-avatar img { position: absolute; inset: 0; width: 36px; height: 36px; margin: 0; border-radius: 50%; object-fit: cover; }
#hd-blog-design .chd-yt-actions { position: absolute; z-index: 2; bottom: 12px; left: 12px; display: flex; gap: 4px; padding: 4px 6px; border-radius: 22px; background: #704645cf; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-actions :is(a,button) { display: grid; width: 32px; height: 32px; place-items: center; padding: 4px; border: 0; border-radius: 50%; background: transparent; font: inherit; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-actions :is(a,button):hover { background: #38242488; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-watch { position: absolute; z-index: 2; right: 0; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 4px 0 0 4px; background: #704645df; font-size: clamp(11px,1.2cqi,14px); white-space: nowrap; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-watch img { position: static; display: block; width: 24px; height: 24px; object-fit: contain; margin: 0; }
#hd-blog-design .chd-yt-watch strong { font-size: 1.12em; letter-spacing: -.04em; }
#hd-blog-design .chd-yt-share-panel { position: absolute; z-index: 4; inset: auto 12px 60px; max-width: 380px; display: block; padding: 12px; border: 1px solid var(--hd-ink); background: var(--hd-paper); color: var(--hd-ink); font-size: 14px; box-shadow: 0 3px 14px #38242466; }
#hd-blog-design .chd-yt-share-panel label { display: block; font-weight: 700; }
#hd-blog-design .chd-yt-share-panel input { display: block; width: 100%; padding: 5px; margin: 5px 0 9px; border: 1px solid var(--hd-ink); background: #f6d9ba; color: var(--hd-ink); font: inherit; }
#hd-blog-design .chd-yt-share-panel > span { display: flex; flex-wrap: wrap; gap: 7px; }
#hd-blog-design .hd-site .hd-article-body .chd-yt-share-panel button { padding: 5px 9px; border: 1px solid var(--hd-ink); background: var(--hd-ink); color: var(--hd-paper); font: inherit; }
#hd-blog-design .chd-yt-share-status { margin-top: 6px; font-size: 12px; }
@container hdpage (width <= 480px) {
  #hd-blog-design .chd-yt-heading { inset: 8px 10px auto; gap: 7px; }
  #hd-blog-design .chd-yt-avatar { flex-basis: 28px; width: 28px; height: 28px; }
  #hd-blog-design .hd-site .hd-article-body .chd-yt-avatar img { width: 28px; height: 28px; }
  #hd-blog-design .chd-yt-actions { left: 8px; bottom: 8px; padding: 2px; }
  #hd-blog-design .hd-site .hd-article-body .chd-yt-watch { bottom: 8px; padding: 4px 7px; gap: 3px; }
  #hd-blog-design .chd-yt-share-panel { inset: auto 8px 48px; padding: 8px; font-size: 12px; }
}