.dc-demo__fig{margin:0}
.dc-demo__stage{position:relative;width:100%;aspect-ratio:100/70;overflow:hidden}
.dc-demo__tv{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;box-sizing:border-box;padding:6px;border-radius:12px;background:#2a2e35}
.dc-demo__scr{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#11162a}
.dc-demo__scr>video,.dc-demo__scr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dc-demo__jsj{position:absolute;left:76.9%;top:36.1%;width:30%;aspect-ratio:2/3;pointer-events:none}
.dc-demo__jsj>video,.dc-demo__jsj>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.dc-demo__stb{position:absolute;left:3%;top:81.5%;width:26%;box-sizing:border-box;padding:0 3%;border-bottom:3px solid #3a3f47;pointer-events:none} 
.dc-demo__stbin{position:relative;aspect-ratio:600/279}
.dc-demo__stbin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.dc-demo__stbin>img+img{visibility:hidden}
.dc-demo__stb.is-on .dc-demo__stbin>img{visibility:hidden}
.dc-demo__stb.is-on .dc-demo__stbin>img+img{visibility:visible}
.dc-demo__cap{margin:8px 0 0;font-size:var(--fs-xs);line-height:1.5;color:#5b6b8f}
@media (min-width:900px){
  .dc-demo{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:48px}
  .dc-demo>.dc-sec__kick{grid-column:1;grid-row:2}
  .dc-demo>h2{grid-column:1;grid-row:3}
  .dc-demo>.dc-sec__lead{grid-column:1;grid-row:4;max-width:520px}
  .dc-demo__fig{grid-column:2;grid-row:1 / 6}
  .dc-demo__stage{aspect-ratio:100/57.5}
  .dc-demo__tv{width:84%;padding:8px;border-radius:14px}
  .dc-demo__jsj{left:71.5%;top:14.4%;width:32%}
  .dc-demo__stb{left:2.5%;top:83.6%;width:20.1%;padding:0 2.5%}
}

.dc-demo__click{position:absolute;right:84%;bottom:36%;z-index:3;font-weight:900;font-size:var(--fs-lead);letter-spacing:-.02em;color:#FFC400;
  -webkit-text-stroke:1px #0b1c4d;paint-order:stroke fill;text-shadow:0 2px 0 #0b1c4d;opacity:0;transform:scale(.4) rotate(-12deg);pointer-events:none}
.dc-demo__click.is-pop{animation:dcClick .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dcClick{0%{opacity:0;transform:scale(.4) rotate(-12deg)}30%{opacity:1;transform:scale(1.15) rotate(-8deg)}70%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1) translateY(-8px) rotate(-8deg)}}
@media (min-width:769px){.dc-demo__click{font-size:var(--fs-title)}}
@media (prefers-reduced-motion:reduce){.dc-demo__click{display:none}}

.dc-demo__sub{position:absolute;left:50%;bottom:10%;z-index:2;transform:translateX(-50%);max-width:88%;padding:4px 12px;border-radius:8px;
  background:rgba(11,28,77,.78);color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:1.4;white-space:nowrap;text-align:center;pointer-events:none}
.dc-demo__sub.is-in{animation:dcSub .35s ease-out both}
@keyframes dcSub{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:769px){.dc-demo__sub{font-size:var(--fs-body);padding:6px 16px}}
@media (prefers-reduced-motion:reduce){.dc-demo__sub{display:none}}