/* The preview's own layer over the app's stylesheet: a still page, a pointer,
   and the app's hover states as classes, since a script cannot set :hover. */
html, body { overflow: hidden; }
body { user-select: none; }
/* The phone layout's tab bar is pinned to the frame's bottom edge, which the
   coming-soon page fades out: half-faded over the chart it reads as noise. */
.tabbar { display: none !important; }

.trend li a.pv-hover .trend__t { color: var(--accent-text); }
.feat__title.pv-hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-3); }
.feat__pager button.pv-press { transform: scale(.8); }

/* A price that just moved, green or red for a moment, as on a live board. */
.tick__row b { transition: color .5s ease; }
.tick__row b.pv-up { color: var(--buy); }
.tick__row b.pv-down { color: var(--sell); }

.pv-cursor {
  position: absolute; left: 0; top: 0; z-index: 50;
  width: 18px; height: 26px;
  opacity: 0; pointer-events: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .3s;
  will-change: transform;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'><path d='M1 1l12 9.5-5 .6 3 5.8-2.4 1.2-3-5.8L1 15z' fill='%23fff' stroke='%23000' stroke-width='1'/></svg>") no-repeat;
}
.pv-cursor.is-on { opacity: 1; }
.pv-cursor.is-press { transition-duration: .12s; }