/* Karumy 首頁 demo 內嵌元件
   為什麼不用 MP4：10 支影片 89MB，首頁扛不動。deck 的 HTML 每份 25–45KB，
   而且是 seek-safe 動畫，內嵌後還能定格、還能互動。封面圖先擋著，
   使用者按了才載 iframe —— 沒人按就一毛頻寬都不花。 */
.kdemo{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;background:#efe9dc;border:1px solid rgba(25,26,28,.12);
  box-shadow:0 10px 30px rgba(25,26,28,.10)}
.kdemo.portrait{aspect-ratio:9/16;max-width:min(340px,100%);margin-inline:auto}
@media(max-width:700px){.kdemo.portrait{max-width:100%}}
.kdemo img.kposter{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .45s ease}
.kdemo .kplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;border:0;cursor:pointer;background:transparent;color:#fffdf7;font:inherit}
.kdemo .kplay:focus-visible{outline:3px solid #ec4842;outline-offset:-3px}
.kdemo .kplay span{display:inline-flex;align-items:center;gap:9px;
  background:rgba(28,26,23,.82);backdrop-filter:blur(6px);
  padding:11px 19px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.02em}
.kdemo .kplay span::before{content:"";width:0;height:0;
  border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.kdemo .kplay:hover span{background:#1c1a17}
.kdemo iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;
  width:1920px;height:1080px}
.kdemo.portrait iframe{width:1080px;height:1920px}
.kdemo .kbadge{position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(28,26,23,.78);color:#fffdf7;font-size:12px;font-weight:700;
  letter-spacing:.08em;padding:5px 10px;border-radius:6px;pointer-events:none}
.kdemo.is-live .kbadge{background:#d9392e}
@media (prefers-reduced-motion:reduce){.kdemo .kplay span::before{border-left-color:currentColor}}

/* 正在播放的那一個稍微突出，讓「現在該看這裡」是看得見的 */
.kdemo{transition:box-shadow .35s ease}
.kdemo.is-playing{box-shadow:0 14px 40px rgba(28,26,23,.20)}
.kdemo .kbadge{opacity:0;transition:opacity .3s}
.kdemo.is-playing .kbadge{opacity:1;background:#d9392e}