:root{
  --ticker-height:40px; --ticker-bg:#E8F4FD; --ticker-text:#111111;
  --size:14px; --gap:48px; --speed-top:20s; --speed-bottom:18s;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:#111;font-family:"Courier New", Courier, monospace;background:#fff;}
.bg{position:relative;margin-top:var(--ticker-height);margin-bottom:var(--ticker-height);z-index:0;}
@supports (margin-top: calc(1px)){
  .bg{margin-top:calc(env(safe-area-inset-top) + var(--ticker-height));
      margin-bottom:calc(env(safe-area-inset-bottom) + var(--ticker-height));}
}
.bg picture, .bg img{width:100vw;height:auto;display:block;max-width:100%;}
.ticker{position:fixed;left:0;right:0;height:var(--ticker-height);line-height:var(--ticker-height);
  background:var(--ticker-bg);color:var(--ticker-text);font-size:var(--size);
  border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);
  z-index:10;overflow:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
.ticker.top{top:0;padding-top:env(safe-area-inset-top);} .ticker.bot{bottom:0;padding-bottom:env(safe-area-inset-bottom);}
.ticker__track{display:flex;width:max-content;white-space:nowrap;}
.ticker__item{padding-right:var(--gap);text-transform:lowercase;letter-spacing:.02em;}
@keyframes move-left{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes move-right{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.ticker--left .ticker__track{animation:move-left var(--speed-bottom) linear infinite;}
.ticker--right .ticker__track{animation:move-right var(--speed-top) linear infinite;}
main{position:relative;z-index:1;}
@media (min-width:768px){:root{--size:16px;--ticker-height:44px;--gap:64px;}}