/* Under > Ao vivo (05/10/2026: desenho da referencia do Leo, com o estilo do PWA).
   Toda classe comeca com .unl- para nao bater com as dos outros segmentos.
   Reaproveitadas do styles.css (so leitura): .as-sub, .as-empty, .as-st, .fi-name, .un-sec, .un-sec-h, .un-pills, .btn.ghost.sm.un-btn.
   Tema: variaveis --v-* (claro e escuro); regra so do claro: html.v2:not([data-theme="dark"]) .unl-x { ... }.
   Alvo de toque: 40 px no minimo. Nada aqui cria rolagem lateral em 360, 375, 390 e 430 px (tudo com min-width: 0 e corte de texto). */

.unl { min-width: 0; --unl-blue: #60a5fa; --unl-teal: #2dd4bf; --unl-violet: #a78bfa; --unl-pop: #171b29; --unl-div: rgba(255,255,255,.14); }
html.v2:not([data-theme="dark"]) .unl, html.v2:not([data-theme="dark"]) .unl-sheet { --unl-blue: #2563eb; --unl-teal: #0d9488; --unl-violet: #7c3aed; --unl-pop: #fff; --unl-div: rgba(16,24,40,.13); }
.unl-sheet { --unl-blue: #60a5fa; --unl-teal: #2dd4bf; --unl-violet: #a78bfa; }
.unl-s:empty { display: none; }

/* ---- palco do globo: sem cartao em volta, direto no fundo da tela; legenda e botoes por cima ---- */
.unl-stage { position: relative; min-width: 0; margin: 0 0 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.unl-stage::before { content: ''; display: block; padding-top: calc(86% + 62px); }   /* 42 px da fileira de cima + esfera de 86% da largura + 20 px do carimbo */
.unl-stage canvas { position: absolute; left: -16px; top: 0; width: calc(100% + 32px); height: 100%; border-radius: 18px; display: block; animation: unlInA .3s ease both; }
.unl-stage.unl-flat canvas { animation-name: unlInB; }
@keyframes unlInA { from { opacity: 0; } to { opacity: 1; } }
@keyframes unlInB { from { opacity: 0; } to { opacity: 1; } }
.unl-gfg { touch-action: pan-y; -webkit-tap-highlight-color: transparent; cursor: grab; outline: none; }
.unl-flat .unl-gfg { cursor: default; }
.unl-ov { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }
.unl-ov > * { pointer-events: auto; }
.unl-leg { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-width: 0; padding-top: 5px; pointer-events: none; }
.unl-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px 0 7px; border-radius: 10px; border: 0; box-shadow: inset 0 0 0 1px var(--v-line, var(--line)); background: var(--v-chip, rgba(255,255,255,.9)); color: var(--v-strong, var(--text)); font-family: var(--v-sans, inherit); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -.1px; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.unl-ld { width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--unl-violet) 0 3.4px, color-mix(in srgb, var(--unl-violet) 26%, transparent) 4px 100%); }
.unl-lh { width: 15px; height: 15px; flex: none; fill: var(--unl-blue); }
.unl-lh .h { opacity: .26; }
/* legenda do globo (07/10/2026): o hexagono na cor da marca. o = pedido (azul), v = cliente online (verde). As cores sao as do PAL do un-live.js. */
.unl-lh-o { fill: #3b82f6; }
.unl-lh-v { fill: #39ff14; }
html.v2:not([data-theme="dark"]) .unl-lh-o { fill: #2563eb; }
html.v2:not([data-theme="dark"]) .unl-lh-v { fill: #16a34a; }
.unl-btns { display: flex; gap: 6px; flex: none; margin-left: auto; }
.unl-sq { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border-radius: 12px; border: 1px solid var(--v-cardbd, var(--line)); background: var(--v-card, var(--card)); color: var(--v-strong, var(--text)); box-shadow: 0 1px 2px rgba(16,24,40,.06); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.unl-sq svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unl-sq[aria-pressed="true"], .unl-sq[aria-expanded="true"] { border-color: var(--unl-blue); color: var(--unl-blue); }
/* busca de pais: o campo entra no lugar da legenda */
.unl-finding .unl-leg { display: none; }
.unl-find { position: relative; flex: 1; min-width: 0; }
.unl-find[hidden] { display: none; }
.unl-find-i { display: block; width: 100%; height: 40px; margin: 0; padding: 0 12px; border-radius: 12px; border: 1px solid var(--unl-blue); background: var(--unl-pop); color: var(--v-strong, var(--text)); font-family: var(--v-sans, inherit); font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; -webkit-user-select: text; user-select: text; }
.unl-find-i::-webkit-search-cancel-button { display: none; }
.unl-sug { position: absolute; left: 0; right: 0; top: 46px; z-index: 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--v-cardbd, var(--line)); background: var(--unl-pop); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.unl-sug[hidden] { display: none; }
.unl-sug-b { display: block; width: 100%; min-height: 42px; margin: 0; padding: 0 12px; border: 0; border-top: 1px solid var(--v-line, var(--line)); border-radius: 0; background: none; color: var(--v-strong, var(--text)); font-family: var(--v-sans, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unl-sug-b:first-child { border-top: 0; }
.unl-sug-0 { padding: 12px; font-size: 13px; color: var(--v-muted, var(--muted)); }
/* etiqueta do marcador tocado */
.unl-tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); max-width: 92%; padding: 6px 10px; border-radius: 9px; background: #101828; color: #fff; font-family: var(--v-sans, inherit); font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.unl-tip[hidden] { display: none; }
html.v2[data-theme="dark"] .unl-tip { background: #f1f5f9; color: #0b1020; }
/* linha de estado embaixo do globo: so aparece quando o servidor nao responde ("sem resposta, nova tentativa em Ns"); o "atualizado ha Ns" saiu (pedido do Leo, 05/10/2026) */
.unl-stl { position: absolute; left: 0; right: 0; bottom: 1px; display: none; align-items: center; justify-content: center; gap: 6px; min-height: 16px; pointer-events: none; }
.unl-stale .unl-stl { display: flex; }
.unl-pulse { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--v-muted, #94a3b8); }
.unl-pulse.ok { background: var(--v-ok, #34d399); animation: unlPulse 1.8s infinite; }
.unl-pulse.err { background: var(--v-err, #fb7185); }
@keyframes unlPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.unl-stamp { font-family: var(--v-mono, monospace); font-size: 10.5px; line-height: 1.3; color: var(--v-muted, var(--muted)); text-align: center; overflow-wrap: anywhere; }

/* ---- cartao e titulo com o sublinhado pontilhado da referencia ---- */
.unl-c { position: relative; min-width: 0; margin: 0 0 8px; padding: 14px 14px 13px; border-radius: 14px; border: 1px solid var(--v-cardbd, var(--line)); background: var(--v-card, var(--card)); }
.unl-c.open { z-index: 5; }
.unl-t { display: inline-block; max-width: 100%; padding-bottom: 1px; border-bottom: 2px dotted color-mix(in srgb, var(--v-muted, #94a3b8) 42%, transparent); font-family: var(--v-sans, inherit); font-size: 13.5px; font-weight: 600; line-height: 1.1; letter-spacing: -.1px; color: var(--v-strong, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }   /* pontilhado rente as letras, como na referencia */
.unl-hint { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--v-muted, var(--muted)); }
.unl-sub { margin: 14px 0 5px; font-family: var(--v-mono, monospace); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v-muted, var(--muted)); }
.unl-foot { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--v-muted, var(--muted)); }
.unl-none { padding: 26px 8px 22px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--v-muted, var(--muted)); }
.unl .btn.sm.un-btn.unl-more { display: flex; width: 100%; justify-content: center; margin-top: 12px; }
.unl-off { text-align: center; padding: 24px 14px 16px; }
.unl-off .as-sub { margin-top: 6px; }
.unl .unl-off .btn.sm.un-btn.unl-more { width: auto; display: inline-flex; margin-top: 14px; }
/* botao de informacao no canto de cima do cartao e a explicacao que ele abre */
.unl-i { position: absolute; top: 1px; right: 1px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--v-muted, var(--muted)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unl-i svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unl-i[aria-expanded="true"] { color: var(--unl-blue); }
.unl-pop { position: absolute; z-index: 6; top: 38px; left: 8px; right: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--v-cardbd, var(--line)); background: var(--unl-pop); box-shadow: 0 12px 28px rgba(0,0,0,.2); font-size: 12.5px; line-height: 1.4; color: var(--v-strong, var(--text)); }
.unl-k .unl-pop { right: auto; width: calc(200% - 8px); }

/* ---- os quatro cartoes (2 x 2) ---- */
.unl-kg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.unl-k { margin: 0; min-height: 74px; padding: 13px 12px 11px 13px; }
.unl-k .unl-t { max-width: calc(100% - 4px); }
.unl-k.wi .unl-t { max-width: calc(100% - 30px); }
.unl-loc .unl-t { max-width: calc(100% - 34px); }
.unl-kv { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 24px; margin-top: 8px; }
.unl-kn { flex: none; font-family: var(--v-sans, inherit); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.3px; color: var(--v-strong, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.unl-kn.m { font-size: 14px; }
.unl-kn.s { font-size: 12.5px; letter-spacing: -.2px; }
.unl-dash { flex: none; width: 10px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--v-muted, #94a3b8) 70%, transparent); }
.unl-dl { flex: none; display: inline-flex; align-items: center; gap: 1px; font-family: var(--v-sans, inherit); font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--v-muted, var(--muted)); font-variant-numeric: tabular-nums; }
.unl-dl svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unl-sk { flex: 0 1 54px; min-width: 0; width: 54px; height: 20px; margin-left: auto; overflow: visible; color: var(--unl-blue); }
.unl-sk .l { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.unl-sk .a { fill: currentColor; stroke: none; opacity: .13; }
.unl-sk.flat .l { stroke-width: 2; opacity: .85; }

/* ---- comportamento do cliente: tres colunas com divisoria que some para baixo e o funil (um trecho por coluna, dentro dela) ---- */
.unl-beh { padding-bottom: 0; }
.unl-bg { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); height: 150px; margin-top: 12px; }
.unl-bc { position: relative; min-width: 0; padding: 0 2px 0 10px; }
.unl-bc:first-child { padding: 0 10px 0 0; max-width: 46vw; }
.unl-bc + .unl-bc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--unl-div) 0, var(--unl-div) 42%, transparent 94%); }
.unl-bk { display: block; font-size: 12px; line-height: 1.25; color: var(--v-strong, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unl-bc b { display: block; margin-top: 5px; font-family: var(--v-sans, inherit); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--v-strong, var(--text)); font-variant-numeric: tabular-nums; }
.unl-fn { position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 76px; pointer-events: none; }
.unl-fn path { fill: var(--unl-blue); }
.unl-fn.zero { opacity: .2; }

/* ---- sessoes por local (e vendas por produto): linha cinza do lugar, barra azul grossa, numero no fim da barra ---- */
.unl-loc { --unl-bh: 14px; }
.unl-loc.n1 { --unl-bh: 44px; } .unl-loc.n3 { --unl-bh: 26px; } .unl-loc.n5 { --unl-bh: 22px; } .unl-loc.n8 { --unl-bh: 20px; }
.unl-lr { margin-top: 12px; min-width: 0; }
.unl-loc.n8 .unl-lr { margin-top: 10px; }
.unl-ln { font-size: 12px; line-height: 1.3; color: var(--v-muted, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unl-lb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 5px; }
.unl-lb i { display: block; flex: none; width: calc((100% - 46px) * var(--p, 0)); min-width: 4px; height: var(--unl-bh); border-radius: 4px; background: var(--unl-blue); }
.unl-lb.money i { width: calc((100% - 92px) * var(--p, 0)); }
.unl-lb b { flex: none; font-family: var(--v-sans, inherit); font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--v-muted, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.unl-pn { display: flex; align-items: baseline; gap: 8px; }
.unl-pn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--v-strong, var(--text)); }
.unl-pn em { flex: none; font-style: normal; }

/* ---- clientes novos x recorrentes ---- */
.unl-cu-b { display: flex; gap: 3px; height: 18px; margin: 14px 0 10px; }
.unl-cu-b i { display: block; flex: 1 1 0; min-width: 4px; border-radius: 4px; }
.unl-cu-b .a, .unl-cu-r .a { background: var(--unl-blue); }
.unl-cu-b .b, .unl-cu-r .b { background: var(--unl-violet); }
.unl-cu-r { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; color: var(--v-strong, var(--text)); }
.unl-cu-r i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.unl-cu-r span { flex: 1; min-width: 0; }
.unl-cu-r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.unl-cu-r em { min-width: 38px; text-align: right; font-style: normal; color: var(--v-muted, var(--muted)); font-variant-numeric: tabular-nums; }

/* ---- botoes de troca (metrica do grafico, loja da atividade) ---- */
.unl-tabs { display: flex; gap: 6px; margin: 12px 0; }
.unl-tab { flex: 1 1 0; min-width: 0; min-height: 40px; margin: 0; padding: 0 8px; border-radius: 999px; border: 1px solid var(--v-line, var(--line)); background: transparent; color: var(--v-muted, var(--muted)); font-family: var(--v-sans, inherit); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unl-tabs.unl-auto .unl-tab { flex: 1 1 auto; padding: 0 9px; font-size: 12px; }
.unl-tab.on { color: var(--v-strong, var(--text)); border-color: var(--unl-blue); background: color-mix(in srgb, var(--unl-blue) 14%, transparent); }

/* ---- hoje por hora ---- */
.unl-hrs { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 76px; border-bottom: 1px solid var(--v-line, var(--line)); }
.unl-hr { display: block; min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--unl-blue) 50%, transparent); }
.unl-hr.now { background: var(--unl-blue); }
.unl-hr.fut { background: var(--v-line, var(--line)); }
.unl-hrs-x { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: 4px; font-family: var(--v-mono, monospace); font-size: 9.5px; color: var(--v-muted, var(--muted)); }
.unl-hrs-x span { white-space: nowrap; }
.unl-hrs-x span:nth-child(1) { grid-column: 1; } .unl-hrs-x span:nth-child(2) { grid-column: 7; } .unl-hrs-x span:nth-child(3) { grid-column: 13; }
.unl-hrs-x span:nth-child(4) { grid-column: 19; } .unl-hrs-x span:nth-child(5) { grid-column: 24; justify-self: end; }

/* ---- listas com barra fina (pedidos por local, aparelhos, paginas, folha "todos os paises") ---- */
.unl-cc { flex: none; min-width: 28px; text-align: center; font-family: var(--v-mono, monospace); font-size: 10px; letter-spacing: .5px; line-height: 1; padding: 4px 4px; border-radius: 6px; color: var(--v-gray, var(--muted)); background: var(--v-gray-bg, rgba(255,255,255,.07)); }
.unl-rk { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 0; }
.unl-rk-m { flex: 1; min-width: 0; }
.unl-rk-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--v-strong, var(--text)); }
.unl-rk-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unl-rk-t b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.unl-rk-b { height: 5px; margin-top: 5px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--unl-blue) 12%, transparent); }
.unl-rk-b i { display: block; height: 100%; border-radius: 999px; background: var(--unl-blue); }
.unl-rk.v .unl-rk-b { background: color-mix(in srgb, var(--unl-violet) 12%, transparent); } .unl-rk.v .unl-rk-b i { background: var(--unl-violet); }
.unl-rk.t .unl-rk-b { background: color-mix(in srgb, var(--unl-teal) 12%, transparent); } .unl-rk.t .unl-rk-b i { background: var(--unl-teal); }

/* ---- atividade recente ---- */
.unl-ev { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--v-line, var(--line)); border-radius: 0; text-align: left; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unl-feed .unl-t + .unl-ev { border-top: 0; margin-top: 6px; }
.unl-tabs + .unl-ev { border-top: 0; padding-top: 2px; }
.unl-ev-i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--unl-blue); background: color-mix(in srgb, var(--unl-blue) 14%, transparent); }
.unl-ev-i svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unl-ev-i.order { color: var(--v-ok, #34d399); background: var(--v-ok-bg, rgba(52,211,153,.14)); }
.unl-ev-i.fail { color: var(--v-warn, #f0a850); background: var(--v-warn-bg, rgba(240,168,80,.14)); }
.unl-ev-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.unl-ev-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--v-sans, inherit); font-size: 13.5px; font-weight: 600; color: var(--v-strong, var(--text)); }
.unl-ev-t > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unl-ev-a { flex: none; font-variant-numeric: tabular-nums; }
.unl-ev-s { font-size: 12px; line-height: 1.35; color: var(--v-muted, var(--muted)); overflow-wrap: anywhere; }
.unl-ev .un-pills { margin-top: 2px; }
.unl-ev-w { margin-left: auto; font-family: var(--v-mono, monospace); font-size: 10.5px; color: var(--v-muted, var(--muted)); white-space: nowrap; }

/* ---- notas ---- */
.unl-notes ul { margin: 10px 0 0; padding: 0; list-style: none; }
.unl-notes li { position: relative; padding: 3px 0 3px 12px; font-size: 12px; line-height: 1.4; color: var(--v-muted, var(--muted)); }
.unl-notes li::before { content: ''; position: absolute; left: 1px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--v-muted, #94a3b8) 60%, transparent); }

/* ate 389 px a legenda aperta um pouco para caber numa linha so, ao lado dos dois botoes (como na referencia) */
@media (max-width: 389px) {
  .unl-ov, .unl-leg { gap: 4px; }
  .unl-btns { gap: 5px; }
  .unl-chip { gap: 4px; padding: 0 6px 0 5px; font-size: 11.5px; letter-spacing: -.15px; }
  .unl-ld { width: 13px; height: 13px; }
  .unl-lh { width: 14px; height: 14px; }
  .unl-bc { padding: 0 0 0 8px; }
  .unl-bc:first-child { padding: 0 8px 0 0; }
  .unl-bk { font-size: 11.5px; letter-spacing: -.1px; }
}
@media (max-width: 374px) {
  .unl-t { font-size: 13px; }
  .unl-k { padding-left: 11px; padding-right: 10px; }
  .unl-kn.m { font-size: 13.5px; } .unl-kn.s { font-size: 12px; }
  .unl-bk { font-size: 11px; letter-spacing: -.15px; }
}
@media (prefers-reduced-motion: reduce) { .unl-pulse.ok, .unl-stage canvas { animation: none; } }

/* numero que roda ate o novo, como um odometro (un-live.js bumpKpis): cada algarismo que mudou passa pelos do meio, 1,2 s */
.unl-kn.rolling { display: flex; height: 1.2em; overflow: hidden; }
.unl-kn.rolling .unl-oc { flex: none; white-space: pre; }
.unl-kn.rolling .unl-od { flex: none; height: 1.2em; overflow: hidden; }
.unl-od-s { display: block; animation: unl-od 1.2s cubic-bezier(.45, .05, .25, 1) both; will-change: transform; }
.unl-od-c { display: block; height: 1.2em; line-height: 1.2; }
@keyframes unl-od { from { transform: translateY(var(--from)); } to { transform: translateY(var(--to)); } }