#dwyc-m4{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:#333;
  line-height:1.6;
}
#dwyc-m4 *{box-sizing:border-box;}

/* layout */
#dwyc-m4 .wrap{max-width:1100px;margin:0 auto;padding:0 40px;}
#dwyc-m4 .sec{padding:56px 0;}
#dwyc-m4 .center{text-align:center;}

#dwyc-m4 h2{
  margin:0 0 18px;
  font-size:32px;
  font-weight:700;
  line-height:1.25;
  color:#1a2530;
  letter-spacing:-0.01em;
}

#dwyc-m4 .p{
  margin:0 auto 26px;
  max-width:70ch;
  font-size:18px;
  line-height:1.8;
  color:#495057;
}

#dwyc-m4 .flex{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:stretch;
}
#dwyc-m4 .col{flex:1;min-width:260px;}

/* viewer */
#dwyc-m4 .viewer{
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  padding:14px;
}

#dwyc-m4 .frame{
  width:100%;
  aspect-ratio:3/4;
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

#dwyc-m4 .main{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:8px;
  background:#fff;
}

/* nav buttons (still visible, but not required) */
#dwyc-m4 .navbtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
#dwyc-m4 .navbtn.prev{left:10px;}
#dwyc-m4 .navbtn.next{right:10px;}

#dwyc-m4 .navbtn i{
  width:10px;height:10px;
  border-right:2px solid #1a2530;
  border-bottom:2px solid #1a2530;
}
#dwyc-m4 .navbtn.prev i{transform:rotate(135deg);}
#dwyc-m4 .navbtn.next i{transform:rotate(-45deg);}

/* right card */
#dwyc-m4 .card{
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  padding:26px;
}
#dwyc-m4 .card h3{
  margin:0 0 10px;
  font-size:19px;
  font-weight:600;
  color:#1a2530;
}
#dwyc-m4 .card p{
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:#495057;
}

#dwyc-m4 .divider{
  height:1px;
  background:#f0f0f0;
  max-width:1200px;
  margin:0 auto;
}

/* mobile */
@media(max-width:768px){
  #dwyc-m4 .wrap{padding:0 20px;}
  #dwyc-m4 .sec{padding:44px 0;}
  #dwyc-m4 h2{font-size:24px;}
  #dwyc-m4 .p{font-size:17px;}
}