/* /app: the perp dashboard, in the site's own materials — the dotted paper of the template, hairline panels
   with dot captions, mint spheres for the field behind the coin, the slider thumb and the meter's joints. */
.hx { padding-top: 5rem; }
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hx-lbl { display: block; font: 400 1.1rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(17, 17, 17, .55); }
.hl-up { color: var(--hl-teal); }
.hl-down { color: #b3261e; }
/* a mint sphere, the site's one material */
.hx-sphere, .hx-dot::before, .hx-wire i, .hx-tape__in .sep {
  background: radial-gradient(circle at 34% 30%, #effef8 0, #9ff5dc 34%, #4ec4a3 78%, #0f6e5c 100%);
}

/* ---- the band: the coin as the title, the mark price, search */
.hx-band { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--hl-line); }
.hx-band__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hx-band__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; padding-top: 5rem; padding-bottom: 3.6rem; }
.hx-band__main { min-width: 0; flex: 1; }
.hx-kicker { display: block; margin: 0 0 1.4rem; font: 400 1.2rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(17, 17, 17, .6); }
.hx-ca { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; text-transform: none; }
.hx-ident { display: flex; align-items: center; gap: 1.8rem; min-width: 0; }
.hx-ident img { flex: none; width: 6.4rem; height: 6.4rem; border-radius: 50%; object-fit: cover; background: var(--hl-teal-10); }
.hx-ident img:not([src]) { display: none; }
.hx-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(5.2rem, 9vw, 13.6rem); line-height: .95; font-weight: 600; letter-spacing: -.045em; }
.hx-name { margin: 1rem 0 0; font-size: clamp(1.8rem, 2vw, 2.4rem); color: #3b4744; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-band__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: min(44rem, 40%); }
.hx-big { font: 500 clamp(3.4rem, 3.8vw, 5.4rem)/1 var(--font-mono); letter-spacing: -.04em; transition: color .6s; }
.hx-big.flash-up { color: var(--hl-teal); transition: none; }
.hx-big.flash-down { color: #b3261e; transition: none; }
.hx-chg { margin-top: .8rem; font: 400 1.4rem/1.2 var(--font-mono); }
.hx-search { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; height: 4.6rem; margin-top: 2.4rem; padding: 0 1.2rem 0 1.4rem; border-radius: .4rem; background: rgba(246, 247, 245, .86); border: 1px solid var(--hl-line); text-align: left; }
.hx-search:focus-within { border-color: var(--hl-teal); background: var(--hl-bg); }
.hx-search svg { flex: none; width: 1.6rem; height: 1.6rem; opacity: .5; }
.hx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 1.5rem; color: var(--hl-ink); }
.hx-search input::-webkit-search-cancel-button { display: none; }
.hx-search kbd { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .4rem; border: 1px solid var(--hl-line); font: 400 1.1rem/1 var(--font-mono); opacity: .6; }
.hx-results { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; z-index: 30; max-height: 36rem; overflow-y: auto; background: var(--hl-bg); border: 1px solid var(--hl-line); border-radius: .4rem; }
.hx-results button { cursor: pointer; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; width: 100%; padding: 1rem 1.2rem; border: 0; border-bottom: 1px solid var(--hl-line); background: none; text-align: left; color: inherit; font: inherit; }
.hx-results button:hover, .hx-results button.on { background: var(--hl-teal-10); }
.hx-results img, .hx-results i, .hx-list img, .hx-list i, .hx-coin img, .hx-coin i, .hx-tape img, .hx-tape i { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; background: var(--hl-teal-10); display: block; }
.hx-results b, .hx-list b { display: block; font-weight: 500; }
.hx-results small, .hx-list small { display: block; font-size: 1.2rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-results .r { font: 400 1.2rem/1.4 var(--font-mono); text-align: right; }
.hx-results p { margin: 0; padding: 1.4rem; opacity: .7; }

/* ---- the tape */
.hx-tape { overflow: hidden; border-bottom: 1px solid var(--hl-line); background: rgba(159, 245, 220, .35); -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hx-tape__in { display: flex; width: max-content; animation: hx-tape 90s linear infinite; }
.hx-tape:hover .hx-tape__in { animation-play-state: paused; }
@keyframes hx-tape { to { transform: translateX(-50%); } }
.hx-tape button { cursor: pointer; display: flex; align-items: center; gap: 1rem; height: 5rem; padding: 0 2.2rem; border: 0; background: none; white-space: nowrap; color: inherit; font: inherit; }
.hx-tape button:hover { background: rgba(246, 247, 245, .7); }
.hx-tape img, .hx-tape i { width: 2.2rem; height: 2.2rem; }
.hx-tape b { font-weight: 500; }
.hx-tape .hx-mono { font-size: 1.2rem; }
.hx-tape svg { width: 5.4rem; height: 1.8rem; }
.hx-tape__in .sep { flex: none; align-self: center; width: .7rem; height: .7rem; border-radius: 50%; }

/* ---- the terminal: lists | chart + table | ticket */
.hx-desk { display: grid; grid-template-columns: 32rem minmax(0, 1fr) 36rem; grid-template-areas: "lists centre ticket" "lists table ticket"; gap: 2rem; padding-top: 2.4rem; align-items: start; }
.hx-lists { grid-area: lists; position: sticky; top: 6rem; max-height: calc(100vh - 8rem); display: flex; flex-direction: column; }
.hx-centre { grid-area: centre; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; min-width: 0; }
.hx-centre > *, .hx-table, .hx-lists, .hx-ticket { min-width: 0; }
.hx-canvas { max-width: 100%; }
.hx-ticket { grid-area: ticket; position: sticky; top: 6rem; }
.hx-table { grid-area: table; min-width: 0; }
.hx-panel { position: relative; background: rgba(246, 247, 245, .92); border: 1px solid var(--hl-line); border-radius: .4rem; }
.hx-panel.hx-lists, .hx-panel.hx-ticket { position: sticky; }
.hx-ph { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; height: 3.8rem; padding: 0 1.4rem; border-bottom: 1px solid var(--hl-line); font: 400 1.1rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.hx-ph > :last-child:not(:first-child) { opacity: .55; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
.hx-dot { display: inline-flex; align-items: center; gap: .7rem; }
.hx-dot::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; flex: none; }

/* lists */
.hx-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.2rem 1.4rem 0; }
.hx-tabs button { cursor: pointer; font: 400 1.25rem/1 var(--font-mono); padding: .7rem 1rem; border-radius: .4rem; background: var(--hl-teal-10); color: var(--hl-ink); border: 0; }
.hx-tabs button[aria-selected="true"] { background: var(--hl-teal); color: var(--hl-bg); }
.hx-drop { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hx-drop > summary { display: none; }
.hx-note { margin: 1rem 1.4rem .4rem; font-size: 1.25rem; opacity: .6; }
.hx-list { overflow-y: auto; min-height: 0; flex: 1; }
.hx-list button { cursor: pointer; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; width: 100%; padding: .9rem 1.4rem; border: 0; border-bottom: 1px solid var(--hl-line); background: none; text-align: left; color: inherit; font: inherit; animation: hx-in .35s ease both; }
.hx-list button:hover { background: rgba(15, 110, 92, .05); }
.hx-list button[aria-current="true"] { background: var(--hl-teal-10); box-shadow: inset .3rem 0 0 var(--hl-teal); }
.hx-list button > span:not(.r) { min-width: 0; overflow: hidden; }
.hx-list .r { white-space: nowrap; font: 400 1.2rem/1.35 var(--font-mono); text-align: right; }
.hx-list .empty { margin: 0; padding: 2rem 1.4rem; opacity: .6; font-size: 1.4rem; }

/* centre */
.hx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--hl-line); border-bottom: 1px solid var(--hl-line); }
.hx-stats > div { display: grid; gap: .6rem; padding: 1.2rem 1.2rem 1.2rem 0; }
.hx-stats > div + div { padding-left: 1.2rem; border-left: 1px solid var(--hl-line); }
.hx-stats b { font-size: 1.6rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-frame { position: relative; height: min(52rem, 58vh); min-height: 36rem; overflow: hidden; border-radius: 0 0 .4rem .4rem; }
.hx-frame canvas, .hx-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hx-frame iframe:not([src]) { display: none; }
.hx-depth canvas { width: 100%; height: 22rem; display: block; }

/* ticket */
.hx-t { padding: .6rem 1.8rem 2rem; }
.hx-sides { position: relative; display: flex; gap: 2.4rem; margin: 1rem 0 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--hl-line); }
.hx-sides button { cursor: pointer; border: 0; background: none; padding: 0; font-size: 2.6rem; font-weight: 500; letter-spacing: -.02em; color: rgba(17, 17, 17, .35); transition: color .25s; }
.hx-sides button[data-side="long"][aria-selected="true"] { color: var(--hl-teal); }
.hx-sides button[data-side="short"][aria-selected="true"] { color: var(--hl-ink); }
.hx-ink { position: absolute; left: 0; bottom: -1px; height: .3rem; width: 4rem; background: var(--hl-teal); transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s, background .35s; }
.hx-field { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; border-bottom: 1px solid var(--hl-line); }
.hx-field:focus-within { border-bottom-color: var(--hl-teal); }
.hx-field input { flex: 1; min-width: 0; height: 5.2rem; border: 0; outline: 0; background: none; font: 400 2.6rem/1 var(--font-mono); letter-spacing: -.03em; color: var(--hl-ink); }
.hx-field span { font: 400 1.4rem/1 var(--font-mono); opacity: .6; }
.hx-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1rem; }
.hx-chips button { cursor: pointer; height: 3rem; border: 0; border-radius: .4rem; background: var(--hl-teal-10); font: 400 1.25rem/1 var(--font-mono); color: var(--hl-ink); }
.hx-chips button.on { background: var(--hl-teal); color: var(--hl-bg); }
.hx-levhead { display: flex; align-items: flex-end; justify-content: space-between; margin: 2.6rem 0 1rem; }
.hx-levhead b { font: 500 5.2rem/.85 var(--font-mono); letter-spacing: -.05em; }
.hx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.4rem; margin: 0; background: transparent; cursor: pointer; --fill: 20%; --tone: var(--hl-teal); }
.hx-range::-webkit-slider-runnable-track { height: .3rem; background: linear-gradient(90deg, var(--tone) var(--fill), rgba(17, 17, 17, .14) var(--fill)); }
.hx-range::-moz-range-track { height: .3rem; background: rgba(17, 17, 17, .14); }
.hx-range::-moz-range-progress { height: .3rem; background: var(--tone); }
.hx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2.2rem; height: 2.2rem; margin-top: -.95rem; border-radius: 50%; border: 0; background: radial-gradient(circle at 34% 30%, #effef8 0, #9ff5dc 34%, #4ec4a3 78%, #0f6e5c 100%); }
.hx-range::-moz-range-thumb { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #effef8 0, #9ff5dc 34%, #4ec4a3 78%, #0f6e5c 100%); }
.hx-ticks { display: flex; justify-content: space-between; margin-top: .4rem; }
.hx-ticks button { cursor: pointer; border: 0; background: none; padding: .2rem 0; font: 400 1.15rem/1 var(--font-mono); opacity: .55; color: inherit; }
.hx-ticks button:hover { opacity: 1; }
.hx-meter { margin-top: 2.6rem; }
.hx-meter__head { display: flex; justify-content: space-between; align-items: baseline; }
.hx-meter__head b { font-size: 1.35rem; font-weight: 400; }
.hx-wire { position: relative; height: 1px; margin: 3.4rem .6rem 1.2rem; background: rgba(17, 17, 17, .18); }
.hx-wire::before { content: ''; position: absolute; top: -1px; height: .3rem; left: var(--from, 0); width: var(--span, 0); background: linear-gradient(90deg, #b3261e, rgba(179, 38, 30, .12)); transition: left .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1); }
.hx-wire.short::before { background: linear-gradient(90deg, rgba(179, 38, 30, .12), #b3261e); }
.hx-wire i { position: absolute; top: 50%; width: 1.2rem; height: 1.2rem; margin: -.6rem 0 0 -.6rem; border-radius: 50%; transition: left .4s cubic-bezier(.2, .8, .2, 1); }
.hx-wire i.liq { background: radial-gradient(circle at 34% 30%, #fde9e7 0, #e0796f 40%, #b3261e 100%); }
.hx-wire .tag { position: absolute; bottom: 1.2rem; transform: translateX(-50%); font: 400 1.05rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .55; white-space: nowrap; transition: left .4s cubic-bezier(.2, .8, .2, 1); }
.hx-wire .liq-tag { color: #b3261e; opacity: 1; }
.hx-wire .entry-tag { bottom: auto; top: 1.2rem; transform: translateX(-100%); }
.hx-wire.short .entry-tag { transform: none; }
.hx-sum { margin: 2.2rem 0 0; }
.hx-sum > div { display: flex; justify-content: space-between; gap: 1.2rem; padding: .9rem 0; border-top: 1px solid var(--hl-line); font-size: 1.4rem; }
.hx-sum dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.hx-go { display: flex; width: 100%; height: 4.8rem; margin-top: 1.8rem; }
.hx-go .btn__text { justify-content: center; font-size: 1.6rem; }
.hx-go .btn__icon { width: 4.8rem; }
.hx-go.short .btn__text, .hx-go.short .btn__icon, .hx-go.short .btn__text:before, .hx-go.short .btn__icon:before { background-color: var(--hl-ink); }
.hx-go[disabled] { opacity: .45; cursor: default; }
.hx-term { border-top: 1px solid var(--hl-line); min-height: 12rem; padding: 1.4rem 1.8rem; font: 400 1.25rem/1.9 var(--font-mono); background: rgba(159, 245, 220, .18); }
.hx-term p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: hx-in .35s ease both; }
.hx-term .cmd::before { content: '$ '; opacity: .5; }
.hx-term .step { color: #3b4744; }
.hx-term .step::before { content: '\2713  '; color: var(--hl-teal); }
.hx-term .ok { color: var(--hl-teal); }
.hx-term .ok::before { content: '\2713  '; }
.hx-term .bad { color: #b3261e; }
.hx-term .bad::before { content: '\2717  '; }
.hx-term .wait { opacity: .6; }
.hx-term .wait::after { content: ''; display: inline-block; width: .7rem; height: 1.3rem; margin-left: .4rem; vertical-align: -.2rem; background: currentColor; animation: hx-blink 1s steps(1) infinite; }
@keyframes hx-in { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
@keyframes hx-blink { 50% { opacity: 0; } }

/* every market */
.hx-table__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--hl-line); }
.hx-table__head .hx-mono { font-size: 1.25rem; opacity: .6; }
.hx-tr { display: grid; grid-template-columns: minmax(16rem, 1.6fr) 1fr .6fr .6fr .7fr .9fr .9fr .9fr 9.6rem; gap: 1.2rem; align-items: center; }
.hx-th { height: 3.8rem; border-bottom: 1px solid var(--hl-line); font: 400 1.05rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.hx-th span:not(:first-child), #rows .hx-tr > :not(:first-child) { text-align: right; justify-self: end; }
#rows .hx-tr { cursor: pointer; width: 100%; height: 5.6rem; border: 0; border-bottom: 1px solid var(--hl-line); background: none; text-align: left; font: inherit; color: inherit; animation: hx-in .4s ease both; }
#rows .hx-tr:hover { background: rgba(15, 110, 92, .05); }
#rows .hx-tr[aria-current="true"] { background: var(--hl-teal-10); }
#rows .num { font: 400 1.3rem/1 var(--font-mono); }
.hx-coin { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.hx-coin span { min-width: 0; }
.hx-coin b { display: block; font-weight: 500; font-size: 1.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-coin small { display: block; font-size: 1.2rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { width: 9.2rem; height: 2.8rem; }
.hx-skel { height: 5.6rem; border-bottom: 1px solid var(--hl-line); background: linear-gradient(90deg, transparent, rgba(15, 110, 92, .08), transparent) 0 0 / 40% 100% no-repeat; animation: hx-scan 1.4s ease-in-out infinite; }
@keyframes hx-scan { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.hx-table .empty { margin: 0; padding: 2.4rem 0; opacity: .6; }

/* positions */
.hx-positions { margin-top: 6rem; padding-bottom: 2rem; }
.hx-pos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 16rem; text-align: center; border-bottom: 1px solid var(--hl-line); }
.hx-pos-empty b { font-size: 2.6rem; font-weight: 500; letter-spacing: -.02em; opacity: .3; }
.hx-pos-empty small { font-size: 1.35rem; opacity: .6; max-width: 46rem; }
.hx-pos { font: 400 1.3rem/1.4 var(--font-mono); }
.hx-pos > div { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) 7rem; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--hl-line); animation: hx-in .35s ease both; }
.hx-pos .h { font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; animation: none; }
.hx-pos button { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: var(--hl-teal); text-decoration: underline; text-underline-offset: .2em; justify-self: end; }
.hx-positions ~ footer, .hx ~ footer { margin-top: 8rem; }

/* ---- smaller screens */
@media (max-width: 1279px) {
  .hx-desk { grid-template-columns: minmax(0, 1fr) 34rem; grid-template-areas: "lists lists" "centre ticket" "table table"; }
  .hx-panel.hx-lists { position: relative; top: 0; max-height: none; }
  .hx-list { max-height: 32rem; }
  .hx-tr { grid-template-columns: minmax(16rem, 1.6fr) 1fr .6fr .7fr .9fr .9fr 9.2rem; }
  .hx-tr > :nth-child(3), .hx-tr > :nth-child(8) { display: none; }
}
@media (max-width: 1023px) {
  .hx-band__in { flex-direction: column; align-items: stretch; gap: 2.4rem; padding-top: 3rem; }
  .hx-band__price { width: 100%; align-items: flex-start; text-align: left; }
  .hx-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lists" "centre" "ticket" "table"; gap: 1.6rem; }
  .hx-panel.hx-ticket { position: relative; top: 0; }
  /* the lists collapse into a dropdown */
  .hx-drop > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; padding: 1.2rem 1.4rem; margin-top: 1rem; border-top: 1px solid var(--hl-line); font-size: 1.5rem; font-weight: 500; }
  .hx-drop > summary::-webkit-details-marker { display: none; }
  .hx-drop > summary::after { content: ''; width: .9rem; height: .9rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.3rem); transition: transform .2s; }
  .hx-drop[open] > summary::after { transform: rotate(-135deg) translateY(-.1rem); }
  .hx-drop > summary .hx-mono { margin-left: auto; font-size: 1.25rem; font-weight: 400; opacity: .6; }
  .hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-stats > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .hx-stats > div:nth-child(n + 4) { border-top: 1px solid var(--hl-line); }
  .hx-frame { height: 36rem; min-height: 0; }
}
@media (max-width: 767px) {
  .hx-ident { gap: 1.2rem; }
  .hx-ident img { width: 4.4rem; height: 4.4rem; }
  .hx-search kbd { display: none; }
  .hx-tr { grid-template-columns: minmax(0, 1fr) 8.4rem 6.4rem; gap: 1rem; }
  .hx-tr > :nth-child(n + 2):not(:nth-child(2)):not(:nth-child(5)) { display: none; }
  .hx-pos > div { grid-template-columns: 1.4fr 1fr 1fr 5.6rem; }
  .hx-pos > div > :nth-child(3), .hx-pos > div > :nth-child(4) { display: none; }
  .hx-table__head { flex-direction: column; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .hx-tape__in { animation: none; } }