.cd-public .cd-video-create{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 17px;background:linear-gradient(135deg,#fff,#eef5f0);border:1px solid #c7dbcc;border-radius:999px;color:#25513b;font-weight:700;font-size:13px;box-shadow:0 7px 18px rgba(17,35,26,.06);transition:transform .2s,box-shadow .2s}.cd-public .cd-video-create:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(17,35,26,.11)}@media(max-width:640px){.cd-public .cd-video-create{font-size:12px;min-height:42px;padding:0 12px}}
/* Video v1.3: preserve the 9:16 video frame within the layout and keep captions legible. */
.cd-public .cd-video{align-items:center;gap:clamp(25px,4vw,65px)}
.cd-public .cd-video video{display:block;width:auto;max-width:100%;max-height:76vh;height:auto;aspect-ratio:9/16;object-fit:contain;margin-inline:auto;border-radius:20px;background:#13231c;box-shadow:0 18px 45px rgba(0,0,0,.19)}
.cd-public .cd-video video::cue{color:#fff;background:rgba(14,29,22,.82);font-family:system-ui,sans-serif;font-size:80%;text-shadow:0 1px 2px #000}
@media(max-width:750px){.cd-public .cd-video{display:grid;grid-template-columns:1fr}.cd-public .cd-video video{max-height:68vh}}

/* Five-track music library */
.cd-music-library{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:16px;margin:20px 0 24px}
.cd-music-track{border:1px solid #dbe7de;border-radius:20px;padding:18px;background:linear-gradient(150deg,#fff,#f4f8f4);box-shadow:0 10px 26px rgba(20,50,38,.035)}
.cd-music-track strong{font-size:16px;color:#214635}
.cd-music-track p{font-size:13px;line-height:1.5;color:#667a6e;min-height:38px;margin:10px 0}
.cd-music-track audio{width:100%;height:40px}
.cd-music-inline-label{display:block;margin:0 0 8px;color:#426453;font-size:13px}
.cd-music-inline-label select{display:block;max-width:270px;min-height:38px;padding:6px 12px;border:1px solid #d4e3d8;border-radius:12px;background:#fff;color:#234335;margin-top:4px}

/* v2.2: larger recipe video without cropping (desktop/mobile). */
@media (min-width: 821px){
  .cd-public .cd-video{width:min(1480px,calc(100vw - 44px));margin-left:50%;transform:translateX(-50%);grid-template-columns:minmax(235px,.62fr) minmax(0,1.38fr);padding:clamp(28px,3vw,54px);min-height:min(92vh,950px);align-items:center}
  .cd-public .cd-video video{max-height:88vh;max-width:100%;width:auto;object-fit:contain}
}
@media (max-width:820px){
  .cd-public .cd-video{padding:clamp(18px,4vw,32px);grid-template-columns:1fr}
  .cd-public .cd-video video{max-height:79vh;max-width:100%;width:auto;object-fit:contain}
}

/* v2.3: wider Web 4:5 player, timed captions in their own accessible panel. */
.cd-public .cd-video .cd-video-player{width:min(100%,660px);margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.cd-public .cd-video .cd-video-player video{width:100%;height:auto;aspect-ratio:4/5;max-height:none;object-fit:contain;margin:0;border-radius:18px;background:#14251d}
.cd-public .cd-video .cd-video-caption{box-sizing:border-box;min-height:78px;padding:18px 22px;border-radius:16px;background:#f6f7f2;color:#173328;text-align:center;font-size:clamp(16px,1.5vw,21px);line-height:1.45;font-weight:600}
.cd-public .cd-video .cd-video-caption:empty::after{content:' ';white-space:pre}
@media(min-width:821px){.cd-public .cd-video{grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);min-height:0;padding:32px 44px}.cd-public .cd-video .cd-video-player{width:min(100%,680px)}}
@media(max-width:820px){.cd-public .cd-video .cd-video-player{width:min(100%,560px)}.cd-public .cd-video .cd-video-caption{min-height:72px;padding:15px}}

/* v2.4: Compact web video section. Keep MP4 aspect 4:5, but prevent a 680px player from making an 850px-high hero. */
@media (min-width: 821px) {
  .cd-public .cd-video {
    min-height: 0;
    padding: 24px clamp(24px,3vw,42px);
    gap: clamp(20px,3vw,44px);
    grid-template-columns: minmax(210px,.8fr) minmax(0,1.2fr);
  }
  .cd-public .cd-video .cd-video-player {width: min(100%, 420px); gap: 9px;}
  .cd-public .cd-video .cd-video-player video {width:100%; aspect-ratio:4/5; height:auto; max-height: 525px; object-fit:contain;}
  .cd-public .cd-video .cd-video-caption {min-height:56px; padding:12px 16px; font-size:clamp(14px,1.15vw,17px); line-height:1.3;}
}
@media (max-width: 820px) {
  .cd-public .cd-video {padding: 20px 18px; gap:18px;}
  .cd-public .cd-video .cd-video-player {width:min(100%, 390px);gap:9px;}
  .cd-public .cd-video .cd-video-player video {width:100%;height:auto;max-height:none;aspect-ratio:4/5;}
  .cd-public .cd-video .cd-video-caption {min-height:54px;padding:12px 14px;font-size:15px;line-height:1.3;}
}
@media (max-width: 420px) {
  .cd-public .cd-video {padding:15px 12px;}
  .cd-public .cd-video .cd-video-player {width:min(100%,330px);}
}

/* v2.5: wide WEB player for legacy 4:5 MP4.
   MP4 contains a centered landscape photo strip; cover crops only upper/lower
   padding in the vertical composition. The video file remains unchanged. */
.cd-public .cd-video {
  box-sizing: border-box;
  width: min(1180px, 100%);
  margin: 0 auto 48px;
  transform: none;
  min-height: 0;
  padding: 26px clamp(22px, 3.3vw, 44px);
  display: grid;
  grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 48px);
}
.cd-public .cd-video > div { min-width: 0; }
.cd-public .cd-video .cd-video-player {
  box-sizing: border-box;
  width: 100%;
  max-width: 710px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cd-public .cd-video .cd-video-player video {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
  background: #13231c;
  border-radius: 14px;
  margin: 0;
  box-shadow: none;
}
.cd-public .cd-video .cd-video-caption {
  position: static;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 18px;
  border-radius: 13px;
  background: #f6f7f2;
  color: #173328;
  text-align: center;
  font: 600 clamp(13px, 1.25vw, 17px)/1.35 "Open Sans", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 820px) {
  .cd-public .cd-video {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    margin-bottom: 34px;
  }
  .cd-public .cd-video .cd-video-player { width: 100%; max-width: none; gap: 10px; }
  .cd-public .cd-video .cd-video-player video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .cd-public .cd-video .cd-video-caption { min-height: 52px; padding: 11px 14px; font-size: 14px; }
}
@media (max-width: 420px) {
  .cd-public .cd-video { padding: 18px 14px; }
  .cd-public .cd-video .cd-video-player { width: 100%; }
}

/* v2.6: ACTUAL WIDE VIDEO ELEMENT / native controls stay inside viewport.
   Previous v2.5 used height:auto, which preserves the video's native 4:5
   aspect and defeats aspect-ratio:16/9. A fixed-ratio stage solves it. */
.cd-public .cd-video {
  width:min(1120px,100%)!important; margin:0 auto 36px!important;
  padding:24px clamp(18px,3vw,38px)!important;
  min-height:0!important; transform:none!important;
  display:grid!important; grid-template-columns:minmax(190px,.75fr) minmax(0,1.25fr)!important;
  gap:clamp(18px,3vw,38px)!important; align-items:center!important;
}
.cd-public .cd-video .cd-video-player {
  width:100%!important; max-width:660px!important; min-width:0!important;
  display:flex!important; flex-direction:column!important; gap:10px!important;
}
.cd-public .cd-video .cd-video-stage {
  position:relative; width:100%; aspect-ratio:16 / 9; height:auto;
  overflow:hidden; border-radius:15px; background:#13231c; isolation:isolate;
}
.cd-public .cd-video .cd-video-stage video {
  display:block!important; position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  min-height:0!important; max-height:none!important; max-width:none!important;
  aspect-ratio:auto!important; object-fit:cover!important; object-position:center!important;
  margin:0!important; padding:0!important; border-radius:0!important; box-shadow:none!important;
}
.cd-public .cd-video .cd-video-caption {
  position:static!important; width:100%!important; margin:0!important;
  min-height:48px!important; padding:11px 16px!important;
  font-size:clamp(13px,1.1vw,16px)!important; line-height:1.4!important;
  box-sizing:border-box; border-radius:12px;
}
@media(max-width:820px){
  .cd-public .cd-video{grid-template-columns:1fr!important; padding:18px!important;}
  .cd-public .cd-video .cd-video-player{max-width:100%!important;}
  .cd-public .cd-video .cd-video-caption{min-height:46px!important;}
}

/* v2.7: Full-bleed dark background, content keeps the compact v2.6 grid.
   Spread only the background across the viewport, not the video/player.
   box-shadow does not affect document layout; clip-path trims its top/bottom
   so the dark strip remains exactly as tall as the video section. */
.cd-public .cd-detail-wrap > section.cd-video {
  background:#17231f!important;
  box-shadow:0 0 0 100vmax #17231f;
  clip-path:inset(0 -100vmax);
}