/* BrawlTools Live overlay (OBS browser source): transparent background, LilitaOne, colours as CSS tokens that
   Premium users override from the dashboard (applied at runtime from the report's overlaySettings). */
@font-face { font-family: "LilitaOne"; src: url("/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: dark;
  --bb-text: #f5f7ff;
  --bb-muted: #b9c2d6;
  --bb-accent: #ffc83d;
  --bb-positive: #3dff91;
  --bb-negative: #ff6060;
  --bb-neutral: #b6b6b6;
  --bb-stroke-width: 1px;
  --bb-stroke-color: rgba(0, 0, 0, 0.35);
  --bb-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  --bb-font: "LilitaOne", "Trebuchet MS", sans-serif;
  --bb-size: clamp(28px, 3.3vw, 44px);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; background: transparent; }
body { margin: 0; padding: 16px; font-family: var(--bb-font); color: var(--bb-text); }
.lv-content { width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; }
.lv-content.is-hidden { display: none; }
.lv-text { font-family: var(--bb-font); font-size: var(--bb-size); font-weight: 400; line-height: 1.1;
  -webkit-text-stroke: var(--bb-stroke-width) var(--bb-stroke-color); text-shadow: var(--bb-text-shadow); }
.lv-white { color: var(--bb-text); }
.lv-won { color: var(--bb-positive); }
.lv-lost { color: var(--bb-negative); }
.lv-drew { color: var(--bb-neutral); }
.lv-muted { color: var(--bb-muted); }

.lv-msg { font-size: clamp(22px, 2.6vw, 34px); color: var(--bb-accent); padding: 6px 4px; -webkit-text-stroke: var(--bb-stroke-width) var(--bb-stroke-color); text-shadow: var(--bb-text-shadow); }
.lv-msg:empty { display: none; }
.lv-msg small { display: block; font-size: 0.6em; color: var(--bb-muted); }

.lv-stats { display: flex; flex-direction: column; gap: 14px; }
.lv-block { display: flex; flex-direction: column; gap: 2px; }
.lv-line { display: flex; align-items: center; gap: 8px; margin: 2px 0; white-space: nowrap; }
.lv-line--head { flex-wrap: nowrap; }
.lv-line--head .lv-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-line--sub .lv-text { font-size: calc(var(--bb-size) * 0.78); }
.lv-emoji { font-size: 32px; padding-right: 8px; position: relative; bottom: 4px; text-shadow: var(--bb-text-shadow); }
.lv-streak { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lv-streak img { width: 2.4em; height: 2em; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }

/* ticker bar: one line, items separated by a dot */
.lv-bar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; white-space: nowrap; }
.lv-bar__item { display: inline-flex; align-items: center; gap: 6px; }
.lv-bar__item + .lv-bar__item::before { content: "·"; color: var(--bb-muted); margin: 0 12px; font-size: var(--bb-size); }
.lv-bar .lv-text { font-size: calc(var(--bb-size) * 0.85); }
.lv-bar .lv-emoji { font-size: 26px; padding-right: 2px; bottom: 2px; }
.lv-view-bar .lv-content { width: auto; max-width: none; }
/* ?layout=row: blocks side by side instead of stacked */
.lv-layout-row .lv-content { width: auto; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.lv-layout-row .lv-stats { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.lv-layout-row .lv-matches { align-self: center; }

.lv-matches { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.lv-matches:empty { display: none; }
.lv-circle { position: relative; width: 38px; height: 38px; margin: 0 4px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35); display: grid; place-items: center; font-size: 24px; animation: lv-pop 0.35s ease-out; }
.lv-circle--won { background: var(--bb-positive); }
.lv-circle--lost { background: var(--bb-negative); }
.lv-circle--drew { background: var(--bb-neutral); }
.lv-circle__star { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.lv-circle__pl { position: absolute; bottom: 20px; left: -4px; width: 52%; }
@keyframes lv-pop { from { transform: scale(0.6); } to { transform: scale(1); } }

.lv-promo { font-size: clamp(20px, 2.4vw, 30px); color: var(--bb-accent); text-align: center; width: min(420px, 100%); padding: 14px 8px;
  -webkit-text-stroke: var(--bb-stroke-width) var(--bb-stroke-color); text-shadow: var(--bb-text-shadow); animation: lv-promo-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.lv-promo[hidden] { display: none; }
.lv-promo.is-leaving { animation: lv-promo-out 0.35s ease-in forwards; }
.lv-promo__brand { animation: lv-pulse 2s ease-in-out infinite; }
.lv-promo small { display: block; font-size: 0.7em; color: var(--bb-muted); margin-top: 4px; }
@keyframes lv-pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.04); } }
@keyframes lv-promo-in { from { transform: translateY(12px) scale(0.9); } to { transform: none; } }
@keyframes lv-promo-out { from { transform: none; opacity: 1; } to { transform: translateY(-8px) scale(0.95); opacity: 0; } }
.lv-theme-brawl .lv-promo { border-radius: 16px; background: linear-gradient(180deg, rgba(40, 32, 68, 0.92), rgba(18, 14, 34, 0.92)); border: 3px solid #15121c;
  box-shadow: 0 6px 0 #15121c, 0 14px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.18); text-transform: uppercase; letter-spacing: 0.5px; }

/* profile card */
/* Sized for a 420 px browser source: two tile columns, values never wrap or clip. */
.lv-profile { width: 100%; max-width: 420px; position: relative; padding: 12px; border-radius: 18px; background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); display: grid; gap: 10px; }
.lv-profile[hidden] { display: none; }
.lv-profile__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lv-profile__identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.lv-profile__identity > div { min-width: 0; }
.lv-profile__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; object-fit: cover; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.lv-profile__icon[hidden] { display: none; }
.lv-profile__name { margin: 0; font-size: clamp(22px, 6vw, 28px); text-shadow: var(--bb-text-shadow); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-profile__tag, .lv-profile__club { color: var(--bb-muted); font-size: 14px; }
.lv-profile__club { max-width: 42%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lv-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.lv-tile[hidden] { display: none; }
.lv-tile--wide { grid-column: 1 / -1; }
.lv-tile__label { font-size: 12px; color: var(--bb-muted); white-space: nowrap; }
.lv-tile__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-tile__icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.lv-tile__icon[hidden] { display: none; }
.lv-tile__value { font-size: clamp(16px, 4.6vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-variant-numeric: tabular-nums; }
.lv-tile--wide .lv-tile__value { font-size: clamp(20px, 6vw, 26px); }
.lv-profile__section { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lv-profile__section[hidden] { display: none; }
.lv-profile__section h2 { margin: 0 0 6px; font-size: 16px; font-weight: 400; letter-spacing: 0.3px; }
.lv-profile__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lv-profile__grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-stat__label { color: var(--bb-muted); font-size: 12px; white-space: nowrap; }
.lv-stat__value { font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-session h2 { display: flex; justify-content: space-between; align-items: baseline; }
.lv-session__type { color: var(--bb-accent); font-size: 13px; }
.lv-session__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.lv-session__grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-session__grid > div[hidden] { display: none; }
.lv-delta--up { color: var(--bb-positive); }
.lv-delta--down { color: var(--bb-negative); }
.lv-delta--flat { color: var(--bb-neutral); }

@media (max-width: 520px) {
  body { padding: 12px; }
  .lv-emoji { font-size: 28px; bottom: 3px; }
}

/* ------------------------------------------------------------------ Brawl Stars theme (?theme=brawl, always on the card)
   Chunky outlined type, bevelled tiles, yellow accent, animated numbers. Colours still follow the dashboard tokens. */
.lv-theme-brawl { --bb-stroke-width: 2.5px; --bb-stroke-color: #15121c; --bb-text-shadow: 0 4px 0 #15121c, 0 8px 14px rgba(0, 0, 0, 0.55); }
.lv-theme-brawl .lv-text, .lv-theme-brawl .lv-msg { letter-spacing: 0.5px; text-transform: uppercase; }
.lv-theme-brawl .lv-block { padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bb-box, rgba(28, 20, 50, 0.9)) 100%, #fff 12%), var(--bb-box, rgba(28, 20, 50, 0.9)));
  border: 3px solid #15121c; box-shadow: 0 6px 0 #15121c, 0 14px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.lv-theme-brawl .lv-matches { padding: 12px 14px 10px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bb-box, rgba(28, 20, 50, 0.9)) 100%, #fff 12%), var(--bb-box, rgba(28, 20, 50, 0.9)));
  border: 3px solid #15121c; box-shadow: 0 6px 0 #15121c, 0 14px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.18); width: fit-content; max-width: 100%; margin-top: 0; }
.lv-theme-brawl .lv-matches:empty { display: none; }
.lv-theme-brawl .lv-circle__pl { bottom: auto; top: -8px; left: -6px; width: 46%; filter: drop-shadow(0 2px 0 #15121c); }
/* boxes off (Premium setting): the brawl type without the tiles behind it */
.lv-theme-brawl.lv-boxes-off .lv-block, .lv-theme-brawl.lv-boxes-off .lv-promo, .lv-theme-brawl.lv-boxes-off .lv-matches { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.lv-theme-brawl.lv-boxes-off .lv-bar { padding: 0; }
.lv-theme-brawl .lv-line--head .lv-text { color: var(--bb-accent); }
.lv-theme-brawl .lv-bar { padding: 8px 18px; border-radius: 999px; }
.lv-theme-brawl .lv-circle { border: 3px solid #15121c; box-shadow: 0 4px 0 #15121c, 0 8px 12px rgba(0, 0, 0, 0.4); }
.lv-theme-brawl .lv-profile { border: 3px solid #15121c; background: linear-gradient(180deg, rgba(40, 32, 68, 0.94), rgba(18, 14, 34, 0.94)); box-shadow: 0 6px 0 #15121c, 0 16px 28px rgba(0, 0, 0, 0.5); }
.lv-theme-brawl .lv-tile { border: 2px solid #15121c; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12); }
.lv-theme-brawl .lv-tile__label, .lv-theme-brawl .lv-stat__label, .lv-theme-brawl .lv-profile__section h2 { text-transform: uppercase; letter-spacing: 0.6px; color: var(--bb-accent); }
.lv-theme-brawl .lv-tile__value, .lv-theme-brawl .lv-stat__value, .lv-theme-brawl .lv-profile__name { -webkit-text-stroke: 1.5px #15121c; text-shadow: 0 3px 0 #15121c; }
.lv-num-bump { animation: lv-bump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); display: inline-block; }
@keyframes lv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------------ session card (view=card)
   420 px wide, about 560 px tall: tier badge, name ribbon, tier + points, three tiles, form, mode badge. */
.lv-view-card .lv-content { width: min(420px, 100%); }
.lv-card { --card-edge: #15121c; --card-top: #5a3fb8; --card-bottom: #2a1b63; --card-accent: var(--bb-accent);
  position: relative; display: grid; gap: 10px; justify-items: center; padding: 72px 18px 16px; margin-top: 64px; border-radius: 26px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 4px solid var(--card-edge);
  box-shadow: 0 8px 0 var(--card-edge), 0 24px 40px rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.25);
  animation: lv-card-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); overflow: visible; }
.lv-card[hidden] { display: none; }
.lv-card--ladder { --card-top: #2f6fd6; --card-bottom: #163a7a; }
.lv-card--duels { --card-top: #c0392b; --card-bottom: #5e1410; }
.lv-card__glow { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; overflow: hidden; }
.lv-card__glow::before { content: ""; position: absolute; top: -40%; left: -60%; width: 60%; height: 180%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); animation: lv-shine 7s ease-in-out infinite; }
.lv-card.is-updated .lv-card__glow::before { animation: lv-shine 1.2s ease-out 1; }
@keyframes lv-shine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
@keyframes lv-card-in { from { transform: translateY(24px) scale(0.92); } to { transform: none; } }
.lv-card__badge { position: absolute; top: -64px; left: 50%; transform: translateX(-50%); width: 128px; height: 128px; display: grid; place-items: center;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); animation: lv-float 3.6s ease-in-out infinite; }
.lv-card__badge-img { width: 128px; height: 128px; object-fit: contain; }
.lv-card__badge-img[hidden], .lv-card__badge-fallback[hidden] { display: none; }
.lv-card__badge-fallback { font-size: 84px; line-height: 1; filter: drop-shadow(0 6px 0 var(--card-edge)); }
@keyframes lv-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.lv-card__name { max-width: 100%; padding: 4px 22px; transform: skewX(-8deg); background: linear-gradient(180deg, #ffe08a, #f6a800); border: 3px solid var(--card-edge);
  box-shadow: 0 4px 0 var(--card-edge); }
.lv-card__name-text { display: block; transform: skewX(8deg); font-size: 20px; color: #2b1b06; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.lv-card__tier { font-size: clamp(30px, 8.5vw, 38px); line-height: 1; text-transform: uppercase; letter-spacing: 1px; color: var(--card-accent);
  -webkit-text-stroke: 2.5px var(--card-edge); text-shadow: 0 4px 0 var(--card-edge), 0 8px 16px rgba(0, 0, 0, 0.5); text-align: center; max-width: 100%; }
.lv-card__points { display: flex; align-items: center; gap: 8px; }
.lv-card__points-icon { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 3px 0 var(--card-edge)); }
.lv-card__points-icon[hidden] { display: none; }
.lv-card__points-value { font-size: 30px; color: #fff; -webkit-text-stroke: 2px var(--card-edge); text-shadow: 0 3px 0 var(--card-edge); font-variant-numeric: tabular-nums; }
.lv-card__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.lv-card__tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 14px; min-width: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)); border: 3px solid var(--card-edge); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 4px 0 var(--card-edge); }
.lv-card__tile-label { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--card-accent); -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--card-edge); white-space: nowrap; }
.lv-card__tile-value { display: inline-flex; align-items: baseline; gap: 3px; font-size: 22px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px var(--card-edge); text-shadow: 0 3px 0 var(--card-edge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-card__tile-unit { font-size: 13px; color: var(--bb-muted); -webkit-text-stroke: 0; }
.lv-card__tile-sep { font-size: 16px; color: var(--bb-muted); -webkit-text-stroke: 0; margin: 0 2px; }
.lv-card__flame { width: 26px; height: 22px; align-self: center; filter: drop-shadow(0 2px 0 var(--card-edge)); }
.lv-card__tile-value.lv-delta--up { color: var(--bb-positive); }
.lv-card__tile-value.lv-delta--down { color: var(--bb-negative); }
.lv-card__tile-value.lv-delta--flat { color: var(--bb-neutral); }
.lv-card__form { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 3px solid var(--card-edge); }
.lv-card__form-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--card-accent); text-shadow: 0 2px 0 var(--card-edge); }
.lv-card__form-row { display: flex; gap: 5px; flex: 1; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
.lv-card__chip { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; border: 2px solid var(--card-edge); display: grid; place-items: center; font-size: 14px; color: #15121c;
  box-shadow: 0 2px 0 var(--card-edge); animation: lv-pop 0.35s ease-out; }
.lv-card__chip--won { background: var(--bb-positive); }
.lv-card__chip--lost { background: var(--bb-negative); }
.lv-card__chip--drew { background: var(--bb-neutral); }
.lv-card__chip--empty { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.lv-card__chip-star { position: absolute; top: -9px; right: -7px; font-size: 11px; filter: drop-shadow(0 1px 0 #15121c); }
.lv-card__foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2px; }
.lv-card__mode { padding: 3px 14px; border-radius: 999px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: #e03b3b; border: 3px solid var(--card-edge); box-shadow: 0 3px 0 var(--card-edge); -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--card-edge); }
.lv-card__mode--ladder { background: #2b9df0; }
.lv-card__mode--duels { background: #f08c2b; }
.lv-card__mode--other { background: #7a7a8c; }
.lv-card__credit { font-size: 11px; color: rgba(255, 255, 255, 0.55); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0.3px; }

/* dashboard preview (?preview=1): the overlay keeps its real size and is scaled down to the frame */
.lv-preview-mode { padding: 8px; overflow: hidden; }
.lv-preview-mode .lv-content { width: 420px; max-width: none; transform: scale(var(--lv-fit, 1)); transform-origin: top left; }
.lv-preview-mode.lv-layout-row .lv-content { width: max-content; }
.lv-preview-mode.lv-view-bar .lv-content { width: 100%; }
.lv-preview-mode .lv-promo { width: 420px; max-width: none; transform-origin: top left; animation: none; transform: scale(var(--lv-fit, 1)); }

/* The promo box is not called "ad" anywhere: content blockers hide #ad-box / .lv-ad with display:none !important.
/* Entrance animations move only (no opacity, no fill mode) on purpose: a browser that stalls the animation at its
   first frame (hidden window, throttled tab) still shows the element.
/* ------------------------------------------------------------------ motion in the block views
   blocks rise in, changed values flash (and count up, see overlay.js), the flame breathes */
.lv-block { animation: lv-rise 0.45s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes lv-rise { from { transform: translateY(10px); } to { transform: none; } }
.lv-flash { animation: lv-flash 0.9s ease-out; display: inline-block; }
@keyframes lv-flash { 0% { transform: scale(1); filter: brightness(1); } 25% { transform: scale(1.12); filter: brightness(1.8); } 100% { transform: scale(1); filter: brightness(1); } }
.lv-streak img, .lv-card__flame { animation: lv-flame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes lv-flame { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }

/* ticker bar as a marquee: the row scrolls through the browser source and loops seamlessly (&scroll=0 turns it off) */
.lv-view-bar .lv-content { width: 100%; max-width: none; }
.lv-bar--scroll { overflow: hidden; width: 100%; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.lv-marquee { display: flex; width: max-content; animation: lv-marquee linear infinite; animation-duration: 20s; }
.lv-marquee__row { display: inline-flex; align-items: center; white-space: nowrap; padding-right: 48px; }
.lv-marquee__row .lv-bar__item + .lv-bar__item::before { content: "·"; color: var(--bb-muted); margin: 0 12px; font-size: var(--bb-size); }
@keyframes lv-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--lv-marquee-w, 50%))); } }
.lv-preview-mode .lv-marquee { animation-play-state: running; }