@font-face {
  font-family: 'Prometo';
  src: url('../fonts/Prometo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prometo';
  src: url('../fonts/Prometo_Medium.otf') format('opentype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prometo';
  src: url('../fonts/Prometo_Bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prometo';
  src: url('../fonts/Prometo_XBold.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --red:#d71920;
  --dark:#171717;
  --panel:#202020;
  --panel2:#2c2c2c;
  --white:#ffffff;
  --muted:#d6d6d6;
  --line:rgba(255,255,255,.16);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:transparent;overflow:hidden;font-family:'Prometo',Arial,Helvetica,sans-serif;color:var(--white)}

.overlay{position:fixed;z-index:10;width:min(560px,42vw)}
.pos-br{right:54px;bottom:54px}.pos-bl{left:54px;bottom:54px}.pos-tr{right:54px;top:54px}.pos-tl{left:54px;top:54px}

.card{width:100%;background:linear-gradient(135deg,var(--panel),var(--dark));border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.42);overflow:hidden}
.card.hidden{display:none}.card.neutral{opacity:.88}.empty{padding:24px 26px 28px;margin:0;font-size:23px;line-height:1.15;color:var(--muted);font-weight:700}

.topline{height:74px;display:flex;align-items:center;justify-content:center;background:var(--red);padding:0 22px;overflow:hidden}
.topscroll{height:42px;line-height:42px;overflow:hidden;text-align:center;width:100%}
.topscroll-inner{display:flex;flex-direction:column;align-items:center;animation:topScroll 5.2s cubic-bezier(.7,0,.3,1) infinite}
.topscroll.static .topscroll-inner{animation:none}
.topscroll span{height:42px;line-height:42px;color:#fff;font-weight:900;font-size:30px;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.12)}

@keyframes topScroll{
  0%,36%{transform:translateY(0)}
  46%,82%{transform:translateY(-42px)}
  92%,100%{transform:translateY(-84px)}
}

.bodyrow{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:20px;padding:26px 26px 24px;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.iconbox{width:88px;height:88px;border-radius:18px;background:var(--red);display:flex;align-items:center;justify-content:center;align-self:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.iconbox svg{width:60px;height:60px}.iconbox path:first-child{fill:#fff}.iconbox path:nth-child(2){stroke:var(--red);stroke-width:6;stroke-linecap:round}.iconbox circle{fill:var(--red)}
.content{display:flex;align-items:center;min-height:104px}
.content p{font-size:27px;line-height:1.10;margin:0;font-weight:800;color:#f4f4f4;text-wrap:balance}
.content p.text-small{font-size:23px;line-height:1.08}
.content p.text-xsmall{font-size:20px;line-height:1.07}
.content p.text-tiny{font-size:18px;line-height:1.06}
.footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 22px 12px;background:#121212;border-top:1px solid var(--line);font-size:20px;line-height:1.1;color:#fff;font-weight:900;min-height:58px}
.footer-brand{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:4px;padding:5px 8px;min-width:118px;height:38px;box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.footer-brand img{width:104px;max-height:30px;object-fit:contain;display:block;filter:none}
#time{margin-left:auto;text-align:right}
.separator{display:none}

@media (max-width:1200px){
  .overlay{width:520px}
  .content p{font-size:25px}
  .content p.text-small{font-size:22px}
  .content p.text-xsmall{font-size:19px}
  .content p.text-tiny{font-size:17px}
  .topscroll span{font-size:28px}
}