.viz{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  overflow:hidden;
}

.viz__top{
  display:flex; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.viz__top span{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.20);
}

.viz__body{
  position:relative;
  padding:16px;
  min-height: 360px;
}
.gridlines{
  position:absolute;
  inset:12px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: 14px;
  opacity: .35;
}

.chart{
  position:relative;
  height: 140px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
  overflow:hidden;
}
.chart__glow{
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(47,107,255,.10), transparent);
  opacity:.8;
}

.chart__bars{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  height:90px;
  display:flex; gap:10px; align-items:flex-end;
}
.chart__bars i{
  flex:1;
  display:block;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}
.chart__bars i:nth-child(1){height:26%}
.chart__bars i:nth-child(2){height:52%}
.chart__bars i:nth-child(3){height:40%}
.chart__bars i:nth-child(4){height:70%}
.chart__bars i:nth-child(5){height:58%}
.chart__bars i:nth-child(6){height:78%}

.world{
  position:relative;
  margin-top:14px;
  height: 150px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
  overflow:hidden;
}
.world__ring{
  position:absolute;
  inset:-30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  opacity:.35;
}
.world__ring--2{ inset:-10px; opacity:.22; }
.world__ring--3{ inset:14px; opacity:.18; }

.pin{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 8px rgba(255,255,255,.06);
}
.pin--1{ top:44px; left:58px; }
.pin--2{ top:74px; left:128px; background: rgba(47,107,255,.70); box-shadow: 0 0 0 8px rgba(47,107,255,.08); }
.pin--3{ top:58px; right:62px; }

.barrels{
  display:flex; gap:12px;
  margin-top:14px;
}
.barrel{
  flex:1;
  height:70px;
  border-radius: 14px;
  background: rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.barrel::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 12px;
  border:1px dashed rgba(255,255,255,.12);
}

.viz__bottom{
  display:flex; gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.ticker{
  flex:1;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:10px 12px;
  background: rgba(255,255,255,.02);
  display:flex; gap:10px; justify-content:space-between; align-items:baseline;
}
.ticker__k{font-weight:900}
.ticker__h{color: rgba(255,255,255,.55); font-size:12px}