/* Logical 390 × 844 device; its full diagonal fits inside the reserved square. */
.timer4-demo {
  position: relative;
  display: block;
  width: min(100%, 620px);
  aspect-ratio: 1;
  container-type: inline-size;
  isolation: isolate;
}
.timer4-demo__stage { position: absolute; inset: 0; }
.timer4-demo__device {
  position: absolute;
  top: 50%; left: 50%;
  box-sizing: border-box;
  width: 390px; height: 844px;
  padding: 10px;
  border: 2px solid #777875;
  border-radius: 64px;
  background: #171817;
  box-shadow: 0 0 0 2px #3a3b38, inset 0 0 0 2px #9d9e98, 0 12px 30px #24282424;
  transform: translate(-50%, -50%) scale(var(--device-scale, .32)) rotate(var(--device-angle, 0deg));
  will-change: transform;
}
.timer4-demo__screen { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 52px; background: #dedee0; }
.timer4-demo__island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; border-radius: 22px; background: #050505; }
.timer4-demo__island i { position: absolute; width: 10px; height: 10px; right: 13px; top: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1e3048, #080b12 70%); }
.timer4-demo__side { position: absolute; width: 4px; background: #555651; border-radius: 3px; }
.timer4-demo__side--left { left: -5px; top: 170px; height: 55px; box-shadow: 0 68px #555651; }
.timer4-demo__side--right { right: -5px; top: 214px; height: 90px; }
.timer4-demo__arena { position: absolute; top: 78px; left: 4px; right: 4px; bottom: 10px; }
.timer4-demo__card { position: absolute; top: 0; left: 0; width: 358px; height: 358px; transform: translateY(var(--card-y, 553px)) translateY(-50%) rotate(var(--card-angle, 0deg)); will-change: transform; }
.timer4-demo__panel { position: absolute; inset: 0; padding: 32px; box-sizing: border-box; border-radius: 62px; background: var(--timer-border); color: var(--timer-ink); opacity: 0; }
.timer4-demo__panel[data-active="true"] { opacity: 1; }
.timer4-demo__face { position: relative; width: 100%; height: 100%; border-radius: 31px; background: var(--timer-face); }
.timer4-demo__digits { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: auto; }
.timer4-demo__number, .timer4-demo__more { position: absolute; top: 22px; opacity: .5; font-size: 14px; }
.timer4-demo__number { left: 24px; }
.timer4-demo__more { right: 24px; letter-spacing: 2px; }
.timer4-demo__stop { position: absolute; left: 25px; bottom: 22px; width: 12px; height: 12px; border-radius: 2px; background: currentColor; opacity: .2; }
.timer4-demo__start { position: absolute; right: 25px; bottom: 22px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.kv__copy-link { color: inherit; text-decoration: none; display: block; }
.kv[data-app-id="timi"] .kv__media { width: min(calc(100% - 32px), 620px); }
.kv[data-app-id="timi"] { padding-bottom: 20px; }