.dsm-counter{
  --dsm-ink:#10233f;
  --dsm-muted:#7c8798;
  --dsm-mint:#49d9ae;
  --dsm-cyan:#73d7f3;
  --dsm-pink:#df2b68;
  --dsm-yellow:#ffc928;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  margin:28px 0;
  padding:1px;
  border-radius:30px;
  background:linear-gradient(125deg,rgba(73,217,174,.72),rgba(115,215,243,.34) 45%,rgba(223,43,104,.30));
  box-shadow:0 24px 65px rgba(16,35,63,.10);
  font-family:inherit;
  box-sizing:border-box;
}
.dsm-counter::before{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-95px;
  top:-115px;
  border-radius:50%;
  background:rgba(73,217,174,.13);
  z-index:-1;
}
.dsm-counter::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-95px;
  bottom:-125px;
  border-radius:50%;
  background:rgba(115,215,243,.13);
  z-index:-1;
}
.dsm-counter-inner{
  position:relative;
  z-index:2;
  min-height:285px;
  padding:34px 42px 32px;
  border-radius:29px;
  background:
    radial-gradient(circle at 88% 20%,rgba(73,217,174,.10),transparent 28%),
    radial-gradient(circle at 8% 95%,rgba(115,215,243,.10),transparent 30%),
    #fff;
  box-sizing:border-box;
}
.dsm-counter-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.dsm-counter-kicker{
  display:inline-block;
  color:var(--dsm-pink);
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
  max-width:65%;
}
.dsm-counter-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  padding:9px 13px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  color:#167f65;
  background:#edfff9;
  border:1px solid rgba(73,217,174,.22);
}
.dsm-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 5px rgba(73,217,174,.14);
}
.dsm-counter-focus{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:34px 12px 26px;
}
.dsm-counter-focus::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-1.5deg);
  width:min(620px,84%);
  height:118px;
  border-radius:48% 52% 46% 54% / 60% 43% 57% 40%;
  background:#f7f9fb;
  z-index:-1;
}
.dsm-counter-focus-label{
  margin-bottom:9px;
  color:var(--dsm-muted);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dsm-counter-date{
  position:relative;
  z-index:2;
  color:var(--dsm-ink);
  font-size:clamp(31px,4.2vw,52px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.dsm-marker{
  display:block;
  width:min(280px,56%);
  height:10px;
  margin-top:-1px;
  border-radius:999px 36% 999px 44%;
  background:linear-gradient(90deg,var(--dsm-mint),#64e1c0);
  transform:rotate(-1deg);
  opacity:.96;
}
.dsm-counter-meta{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:min(650px,100%);
  margin:0 auto;
  border:1px solid #edf0f4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,35,63,.05);
  overflow:hidden;
}
.dsm-counter-meta-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:72px;
  padding:12px 18px;
}
.dsm-meta-label{
  color:#99a2af;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dsm-counter-meta-item strong{
  color:var(--dsm-ink);
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  text-align:center;
}
.dsm-counter-arrow{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  color:var(--dsm-ink);
  background:#f2fbff;
  font-size:20px;
  font-weight:800;
}
.dsm-scribble{
  position:absolute;
  z-index:3;
  pointer-events:none;
  opacity:.95;
}
.dsm-scribble-one{
  right:28px;
  bottom:18px;
  width:55px;
  height:22px;
  border-top:4px solid var(--dsm-pink);
  border-radius:50%;
  transform:rotate(14deg);
}
.dsm-scribble-one::after{
  content:"";
  position:absolute;
  left:8px;
  top:7px;
  width:47px;
  height:13px;
  border-top:3px solid var(--dsm-pink);
  border-radius:50%;
}
.dsm-scribble-two{
  left:25px;
  top:25px;
  width:34px;
  height:34px;
  border-left:4px solid var(--dsm-cyan);
  border-bottom:4px solid var(--dsm-cyan);
  transform:rotate(34deg) skew(-10deg);
  border-radius:0 0 0 60%;
}
.dsm-counter-future .dsm-counter-status{
  color:#247b96;
  background:#effaff;
  border-color:rgba(115,215,243,.28);
}
.dsm-counter-future .dsm-dot{box-shadow:0 0 0 5px rgba(115,215,243,.17)}
.dsm-counter-live .dsm-counter-status{
  color:#167f65;
  background:#edfff9;
  border-color:rgba(73,217,174,.25);
}
.dsm-counter-past .dsm-counter-status{
  color:#697386;
  background:#f5f6f8;
  border-color:#e7e9ed;
}
.dsm-counter-past .dsm-dot{box-shadow:0 0 0 5px rgba(105,115,134,.11)}
.dsm-counter-past .dsm-marker{background:#cbd2db}
.dsm-counter-pending .dsm-counter-status{
  color:#8a6200;
  background:#fff8df;
  border-color:rgba(255,201,40,.30);
}
.dsm-counter-pending .dsm-dot{box-shadow:0 0 0 5px rgba(255,201,40,.15)}
.dsm-counter-pending .dsm-marker{background:var(--dsm-yellow)}
@media (max-width:680px){
  .dsm-counter{margin:22px 0;border-radius:24px}
  .dsm-counter-inner{min-height:auto;padding:24px 18px 20px;border-radius:23px}
  .dsm-counter-topline{align-items:flex-start;flex-direction:column;gap:10px}
  .dsm-counter-kicker{max-width:100%;font-size:14px}
  .dsm-counter-status{font-size:11px;padding:8px 11px}
  .dsm-counter-focus{padding:28px 2px 22px}
  .dsm-counter-focus::before{width:96%;height:104px}
  .dsm-counter-date{font-size:clamp(27px,8.5vw,38px);letter-spacing:-.035em}
  .dsm-marker{width:min(220px,70%);height:8px}
  .dsm-counter-meta{grid-template-columns:1fr auto 1fr;border-radius:15px}
  .dsm-counter-meta-item{padding:10px 8px;min-height:66px}
  .dsm-counter-meta-item strong{font-size:13px}
  .dsm-counter-arrow{width:30px;height:30px;font-size:16px}
  .dsm-scribble-one{right:13px;bottom:8px;transform:scale(.8) rotate(14deg)}
  .dsm-scribble-two{left:10px;top:15px;transform:scale(.8) rotate(34deg) skew(-10deg)}
}