@font-face{font-family:"Nunito";font-weight:900;font-display:swap;src:url(/nunito-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";font-weight:900;font-display:swap;src:url(/nunito-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{--ink:#141414;--cream1:#f6f2de;--cream2:#dcd5bb;--red:#b50000;--b:0;--bar:0;--tile:clamp(40px,9.2vw,104px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff;overflow:hidden}
body{font-family:"Nunito",system-ui,sans-serif;font-weight:900;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

.stage{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.2vh,34px);padding:4vh 4vw}

.logo{width:min(620px,78vw);height:auto;display:block;will-change:transform;
  transform:translateY(calc(var(--b) * -7px)) rotate(calc(var(--bar) * -1.2deg)) scale(calc(1 + var(--b) * .018));
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.08))}

.title{margin:0;font-size:clamp(24px,4.4vw,48px);letter-spacing:.02em;line-height:1}

.counter{display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,2.2vw,28px);will-change:transform;
  transform:scale(calc(1 + var(--bar) * .012))}
.unit{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vw,14px)}

.tile{position:relative;padding:.12em .2em .08em;font-size:var(--tile);line-height:1;border-radius:.2em;border:.055em solid var(--ink);
  background:linear-gradient(180deg,var(--cream1),var(--cream2));color:var(--ink);
  transform:translateY(calc(var(--b) * .045em));
  box-shadow:0 calc(.08em - var(--b) * .045em) 0 var(--ink)}
.unit.hot .tile{background:linear-gradient(180deg,#d40a0a,var(--red));color:var(--cream1)}

.digits{display:inline-flex}
.digit{position:relative;display:inline-block;width:.64em;height:1.1em;line-height:1.1em;text-align:center;overflow:hidden;font-variant-numeric:tabular-nums}
.digit>span{position:absolute;left:0;right:0;top:0;display:block}
.digit .new{animation:rollIn .52s cubic-bezier(.2,1.5,.35,1) both}
.digit .old{animation:rollOut .34s cubic-bezier(.5,0,1,.6) both}
@keyframes rollIn{from{transform:translateY(105%) scale(.8);opacity:0;filter:blur(3px)}55%{opacity:1;filter:blur(0)}to{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}}
@keyframes rollOut{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-105%) scale(.8);opacity:0;filter:blur(3px)}}

.label{font-size:clamp(11px,1.5vw,18px);letter-spacing:.14em;text-transform:uppercase;color:#6d6a5b}

@media (prefers-reduced-motion:reduce){.digit .new,.digit .old{animation-duration:.01s}}