.scc-wrap{
  max-width:900px;
  margin:10px 0 18px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
.scc-headline{
  font-size:34px;
  line-height:1.15;
  margin:0 0 18px;
  color:var(--scc-headline-color,#222);font-size:var(--scc-headline-size,34px);}
.scc-clock{display:flex;align-items:flex-start;gap:var(--scc-gap,18px);flex-wrap:wrap}
.scc-unit{position:relative;width:var(--scc-card-size,92px);display:flex;flex-direction:column;align-items:center}
.scc-label{text-align:center;margin-top:10px;font-size:var(--scc-label-size,16px);line-height:1.2;min-height:calc(var(--scc-label-size,16px)*1.4);letter-spacing:.18em;text-transform:uppercase;color:var(--scc-label-color,#111);width:100%}
.scc-card{position:relative;width:var(--scc-card-size,92px);height:var(--scc-card-size,92px);border-radius:var(--scc-radius,10px);overflow:hidden;background:#2a2a2a;box-shadow:var(--scc-shadow, none)}
.scc-card-top,.scc-card-bottom{
  position:absolute;left:0;right:0;height:50%;
  display:grid;place-items:center;
  color:var(--scc-digit-color,#fff);font-size:calc(var(--scc-digit-size,56px) * var(--scc-digit-scale,1));font-weight:800;letter-spacing:.5px;
  overflow:hidden
}
.scc-card-top{
  top:0;
  background:var(--scc-top-bg,#3a3a3a);
  border-bottom:1px solid var(--scc-border-color,rgba(255,255,255,.08))
}
.scc-card-bottom{bottom:0;
  background:var(--scc-bottom-bg,#0e0e0e)}

.scc-flip{position:absolute;inset:0;perspective:900px;pointer-events:none}
.scc-flip-front,.scc-flip-back{
  position:absolute;left:0;right:0;height:50%;
  display:grid;place-items:center;
  color:var(--scc-digit-color,#fff);font-size:calc(var(--scc-digit-size,56px) * var(--scc-digit-scale,1));font-weight:800;
  backface-visibility:hidden;transform-style:preserve-3d;overflow:hidden
}
.scc-flip-front{top:0;transform-origin:bottom;transform:rotateX(0deg);
  background:var(--scc-top-bg,#3a3a3a)}
.scc-flip-back{bottom:0;transform-origin:top;transform:rotateX(90deg);
  background:var(--scc-bottom-bg,#0e0e0e)}

.scc-unit.is-flipping .scc-flip-front{animation:sccFlipFront 520ms ease-in forwards}
.scc-unit.is-flipping .scc-flip-back{animation:sccFlipBack 520ms ease-in forwards}
@keyframes sccFlipFront{to{transform:rotateX(-90deg)}}
@keyframes sccFlipBack{to{transform:rotateX(0deg)}}

@media (max-width:520px){
  .scc-headline{font-size:24px}
  .scc-clock{gap:14px}
  .scc-unit,.scc-card{width:76px;height:76px}
  .scc-card-top,.scc-card-bottom,.scc-flip-front,.scc-flip-back{font-size:46px}
}

.scc-val{display:block;line-height:1;transform:translateY(0)}
.scc-card-top .scc-val,.scc-flip-front .scc-val{transform:translateY(25%)}
.scc-card-bottom .scc-val,.scc-flip-back .scc-val{transform:translateY(-55%)}

.scc-wrap .scc-val{font-weight: var(--scc-digit-weight,700);}

.scc-wrap .scc-card, .scc-wrap .scc-min-box, .scc-wrap .scc-ring-box, .scc-wrap .tick{box-shadow: var(--scc-shadow, none);}

.scc-sep{height:calc(var(--scc-card-size,92px));
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 calc(var(--scc-gap,18px) * 0.35);
  color: var(--scc-label-color,#111);
  opacity: .9;
  user-select:none;
}
.scc-sep--text{
  font-size: calc(var(--scc-digit-size,56px) * 0.42);
  line-height: 1;
}
.scc-sep--text[data-sep="dots"]{
  font-size: calc(var(--scc-digit-size,56px) * 0.5);
}
.scc-sep--icon svg{
  width: calc(var(--scc-digit-size,56px) * 0.45);
  height: calc(var(--scc-digit-size,56px) * 0.45);
  fill: currentColor;
  display:block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}

.scc-label{display:block;text-align:center;min-height:1.6em;line-height:1.6em;}