/* Features bento: animated UI mockups (pure CSS, no images) */
@property --pts{syntax:'<integer>';inherits:true;initial-value:0}
.bg-glass.is-live{padding:0;background:rgba(10,14,26,.55);overflow:hidden}
.bv{position:relative;height:236px;padding:16px;color:#fff;font-size:13px;line-height:1.3;overflow:hidden;--loop:7s}
.bv small{color:rgba(230,236,255,.62);font-size:11.5px}
.bv-dim{color:rgba(230,236,255,.65)}
.bv-row{display:flex;justify-content:space-between;align-items:center}
.bv-pill{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px}

/* 1. loyalty */
.bv-pop{background:#2ec777;border-color:#2ec777;color:#02200f;font-weight:700;animation:bv-pop var(--loop) ease-in-out infinite}
@keyframes bv-pop{0%,40%{opacity:0;transform:translateY(8px) scale(.8)}48%,60%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-6px)}}
.bv-pts{display:flex;align-items:baseline;gap:8px;margin-top:8px;animation:bv-count var(--loop) ease-in-out infinite}
.bv-pts b{font-size:46px;letter-spacing:-.04em;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.bv-pts b::after{counter-reset:pts var(--pts);content:counter(pts)}
.bv-pts em{font-style:normal;color:rgba(230,236,255,.6)}
@keyframes bv-count{0%{--pts:0}55%,100%{--pts:100}}
.bv-bar{height:8px;margin:12px 0 14px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.bv-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3b8cff,#7ab8ff);width:0;animation:bv-fill var(--loop) ease-in-out infinite}
@keyframes bv-fill{0%{width:0}55%,92%{width:100%}100%{width:0}}
.bv-stars{display:flex;gap:6px;font-size:22px}
.bv-stars i{font-style:normal;color:#394152;animation:bv-star var(--loop) ease-in-out infinite}
.bv-stars i:nth-child(2){animation-delay:.18s}.bv-stars i:nth-child(3){animation-delay:.36s}.bv-stars i:nth-child(4){animation-delay:.54s}.bv-stars i:nth-child(5){animation-delay:.72s}
@keyframes bv-star{0%,6%{color:#394152;transform:scale(1)}14%{color:#ffc13d;transform:scale(1.35)}20%,92%{color:#ffc13d;transform:scale(1)}100%{color:#394152}}
.bv-reward{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(46,199,119,.16);border:1px solid rgba(46,199,119,.5);color:#8bf0b8;font-weight:500;opacity:0;animation:bv-reward var(--loop) ease-in-out infinite}
@keyframes bv-reward{0%,52%{opacity:0;transform:translateY(10px)}60%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 2. QR menu */
.bv-qr{display:flex;gap:14px;align-items:center}
.bv-qrbox{position:relative;flex:none;background:#fff;padding:8px;border-radius:12px;overflow:hidden}
.bv-qrbox img{display:block}
.bv-scan{position:absolute;left:0;right:0;top:0;height:3px;background:#e5484d;box-shadow:0 0 12px #e5484d;animation:bv-scan var(--loop) ease-in-out infinite}
@keyframes bv-scan{0%{top:0;opacity:1}30%{top:calc(100% - 3px)}38%{top:0}55%,100%{top:calc(100% - 3px);opacity:0}}
.bv-menu{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.bv-ok{align-self:flex-start;padding:4px 10px;border-radius:999px;background:rgba(46,199,119,.18);border:1px solid rgba(46,199,119,.5);color:#8bf0b8;font-size:12px;opacity:0;animation:bv-in var(--loop) ease-out infinite;animation-delay:.1s}
.bv-item{display:flex;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);opacity:0;animation:bv-in var(--loop) ease-out infinite}
.bv-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bv-item:nth-of-type(2){animation-delay:.2s}.bv-item:nth-of-type(3){animation-delay:.4s}.bv-item:nth-of-type(4){animation-delay:.6s}
@keyframes bv-in{0%,32%{opacity:0;transform:translateY(12px)}42%,88%{opacity:1;transform:none}100%{opacity:0}}

/* 3. themes */
.bv-theme{display:flex;flex-direction:column;align-items:center;gap:14px;--loop:9s}
.bv-phone{width:78%;padding:12px;border-radius:16px;animation:bv-bg var(--loop) steps(1,end) infinite;border:1px solid rgba(255,255,255,.2)}
.bv-phone-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bv-phone-top i{width:22px;height:22px;border-radius:7px;animation:bv-accent var(--loop) steps(1,end) infinite}
.bv-phone-top span{flex:1;height:8px;border-radius:9px;opacity:.35;animation:bv-ink var(--loop) steps(1,end) infinite}
.bv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bv-tiles div{padding:8px;border-radius:10px;animation:bv-tile var(--loop) steps(1,end) infinite}
.bv-tiles u{display:block;height:46px;border-radius:7px;background:linear-gradient(135deg,#e9a45b,#c96a2b);margin-bottom:7px}
.bv-tiles s{display:block;height:7px;width:70%;border-radius:9px;opacity:.5;animation:bv-ink var(--loop) steps(1,end) infinite}
.bv-phone,.bv-phone-top i,.bv-phone-top span,.bv-tiles div,.bv-tiles s{transition:none}
@keyframes bv-bg{0%{background:#fff;color:#111}33%{background:#121a26;color:#fff}66%{background:#e9f0e6;color:#1d2b20}}
@keyframes bv-ink{0%{background:#111}33%{background:#fff}66%{background:#1d2b20}}
@keyframes bv-accent{0%{background:#111}33%{background:#3b8cff}66%{background:#4f7a58}}
@keyframes bv-tile{0%{background:#f4f2ee}33%{background:#1d2735}66%{background:#fff}}
.bv-dots{display:flex;gap:9px}
.bv-dots i{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.4);animation:bv-dot var(--loop) steps(1,end) infinite}
.bv-dots i:nth-child(1){animation-delay:0s}.bv-dots i:nth-child(2){animation-delay:calc(var(--loop)/3)}.bv-dots i:nth-child(3){animation-delay:calc(var(--loop)*2/3)}
@keyframes bv-dot{0%{outline:2px solid #fff;outline-offset:2px}33%{outline:0 solid transparent}}

/* 4. management */
.bv-manage{display:flex;flex-direction:column;gap:12px;--loop:8s}
.bv-field small{display:block;margin-bottom:5px}
.bv-input{display:flex;align-items:center;height:38px;padding:0 12px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);position:relative}
.bv-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:bv-typing var(--loop) steps(16,end) infinite}
@keyframes bv-typing{0%,6%{width:0}30%,92%{width:11.5em}100%{width:0}}
.bv-caret{width:2px;height:18px;margin-left:2px;background:#7ab8ff;animation:bv-blink 1s steps(1) infinite}
@keyframes bv-blink{50%{opacity:0}}
.bv-old,.bv-new{position:absolute;left:12px}
.bv-old{animation:bv-oldp var(--loop) ease-in-out infinite}
.bv-new{color:#8bf0b8;opacity:0;animation:bv-newp var(--loop) ease-in-out infinite}
@keyframes bv-oldp{0%,48%{opacity:1;transform:none}56%,92%{opacity:0;transform:translateY(-8px)}100%{opacity:1}}
@keyframes bv-newp{0%,48%{opacity:0;transform:translateY(8px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
.bv-cursor{position:absolute;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 5px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;box-shadow:0 8px 20px -8px #000}
.bv-c1{background:#ff7a1a;left:12px;top:30px;animation:bv-c1 var(--loop) ease-in-out infinite}
.bv-c2{background:#1e90ff;left:46%;top:128px;animation:bv-c2 var(--loop) ease-in-out infinite}
@keyframes bv-c1{0%{transform:translate(0,0)}35%{transform:translate(150px,6px)}60%{transform:translate(40px,92px)}100%{transform:translate(0,0)}}
@keyframes bv-c2{0%{transform:translate(0,0)}40%{transform:translate(-70px,-40px)}70%{transform:translate(20px,-76px)}100%{transform:translate(0,0)}}
.bv-toast{position:absolute;right:14px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(46,199,119,.18);border:1px solid rgba(46,199,119,.5);color:#8bf0b8;font-size:12px;opacity:0;animation:bv-toast var(--loop) ease-in-out infinite}
@keyframes bv-toast{0%,60%{opacity:0;transform:translateY(8px)}68%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 5. campaigns */
.bv-camp{display:flex;flex-direction:column;gap:9px;--loop:7s}
.bv-note{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);opacity:0;animation:bv-slide var(--loop) ease-out infinite}
.bv-note.n2{animation-delay:.35s}
.bv-note i{flex:none;width:9px;height:9px;border-radius:50%;background:#2ec777;box-shadow:0 0 0 4px rgba(46,199,119,.22);animation:bv-pulse 1.6s ease-in-out infinite}
.bv-note div{flex:1;min-width:0}.bv-note b{display:block;font-weight:600}
@keyframes bv-slide{0%,6%{opacity:0;transform:translateY(-16px)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bv-pulse{50%{box-shadow:0 0 0 8px rgba(46,199,119,0)}}
.bv-switch{flex:none;width:34px;height:20px;border-radius:99px;background:rgba(255,255,255,.2);position:relative;animation:bv-sw var(--loop) ease-in-out infinite}
.bv-switch u{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;animation:bv-knob var(--loop) ease-in-out infinite}
@keyframes bv-sw{0%,30%{background:rgba(255,255,255,.2)}40%,90%{background:#2ec777}100%{background:rgba(255,255,255,.2)}}
@keyframes bv-knob{0%,30%{transform:none}40%,90%{transform:translateX(14px)}100%{transform:none}}
.bv-bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:auto}
.bv-bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7ab8ff,#2f6bff);height:0;animation:bv-bar var(--loop) cubic-bezier(.2,.8,.2,1) infinite}
.bv-bars i:nth-child(2){animation-delay:.08s}.bv-bars i:nth-child(3){animation-delay:.16s}.bv-bars i:nth-child(4){animation-delay:.24s}.bv-bars i:nth-child(5){animation-delay:.32s}.bv-bars i:nth-child(6){animation-delay:.4s}
@keyframes bv-bar{0%,10%{height:0}35%,88%{height:var(--h)}100%{height:0}}

@media (prefers-reduced-motion:reduce){
  .bv *{animation:none!important}
  .bv-pop,.bv-reward,.bv-ok,.bv-item,.bv-note,.bv-toast,.bv-new{opacity:1}
  .bv-old,.bv-toast{display:none}
  .bv-type{width:auto}.bv-bar i{width:100%}.bv-bars i{height:var(--h)}.bv-stars i{color:#ffc13d}.bv-pts b::after{content:"100"}
  .bv-reward{position:static;margin-top:10px}
}

/* 1b. loyalty: sectors orbiting a points badge */
.bv-orbit{display:grid;place-items:center;--loop:7s}
.bv-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.bv-ring.r1{width:116px;height:116px}.bv-ring.r2{width:196px;height:196px;border-style:dashed;border-color:rgba(255,255,255,.12)}
.bv-sat{position:absolute;left:50%;top:50%;width:0;height:0;animation:bv-orbit 16s linear infinite}
.bv-sat>span{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;translate:var(--r) 0;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);animation:bv-unorbit 16s linear infinite}
.bv-sat i{font-style:normal;font-size:17px;line-height:1}
.bv-sat.s1{--r:58px}.bv-sat.s2{--r:98px;animation-delay:-3s}.bv-sat.s3{--r:58px;animation-delay:-8s}.bv-sat.s4{--r:98px;animation-delay:-9.5s}.bv-sat.s5{--r:98px;animation-delay:-14s}
.bv-sat.s2>span{animation-delay:-3s}.bv-sat.s3>span{animation-delay:-8s}.bv-sat.s4>span{animation-delay:-9.5s}.bv-sat.s5>span{animation-delay:-14s}
@keyframes bv-orbit{to{rotate:360deg}}
@keyframes bv-unorbit{to{rotate:-360deg}}
.bv-center{position:relative;z-index:2;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5aa2ff,#1f55d6 70%);box-shadow:0 0 0 6px rgba(70,130,255,.22),0 0 40px rgba(60,120,255,.6)}
.bv-num{display:block;height:28px;overflow:hidden;margin-top:-8px}
.bv-num b{display:block;animation:bv-roll var(--loop) steps(4,end) infinite}
.bv-num i{display:block;height:28px;line-height:28px;text-align:center;font-style:normal;font-size:24px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@keyframes bv-roll{0%{transform:none}55%,92%{transform:translateY(-112px)}100%{transform:none}}
.bv-center em{position:absolute;bottom:13px;font-style:normal;font-size:11px;color:#ffe08a}
.bv-orbit .bv-pop{position:absolute;right:22%;top:20%;z-index:3}
@media (prefers-reduced-motion:reduce){.bv-sat.s1>span{translate:58px 0}}

@media (prefers-reduced-motion:reduce){.bv-num b{transform:translateY(-112px)}}

/* ===== extra feature visuals ===== */
.bv-roll{display:inline-block;height:20px;overflow:hidden;vertical-align:bottom}
.bv-roll b{display:block;animation:bv-rollx var(--loop) step-end infinite}
.bv-roll i{display:block;height:20px;line-height:20px;font-style:normal;font-weight:600}
@keyframes bv-rollx{0%{transform:none}18%{transform:translateY(-20px)}38%{transform:translateY(-40px)}58%{transform:translateY(-60px)}92%{transform:translateY(-60px)}100%{transform:none}}
.bv-roll.big{height:40px}.bv-roll.big i{height:40px;line-height:40px;font-size:34px;letter-spacing:-.04em}
.bv-roll.big b{animation-name:bv-rolly}
@keyframes bv-rolly{0%{transform:none}22%{transform:translateY(-40px)}42%{transform:translateY(-80px)}62%{transform:translateY(-120px)}92%{transform:translateY(-120px)}100%{transform:none}}

/* analytics */
.bv-an{display:flex;flex-direction:column;gap:8px;--loop:8s}
.bv-live{display:inline-flex;align-items:center;gap:7px}
.bv-live>i{width:8px;height:8px;border-radius:50%;background:#2ec777;animation:bv-pulse 1.6s ease-in-out infinite}
.bv-chart{width:100%;height:112px;overflow:visible}
.bv-chart line{stroke:rgba(255,255,255,.08);stroke-dasharray:3 4}
.bv-chart .ln{fill:none;stroke:#7ab8ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bv-draw var(--loop) ease-in-out infinite}
.bv-chart .area{opacity:0;animation:bv-areafade var(--loop) ease-in-out infinite}
.bv-chart .dot{fill:#fff;stroke:#3b8cff;stroke-width:3;offset-distance:0%;animation:bv-follow var(--loop) ease-in-out infinite}
@keyframes bv-draw{0%{stroke-dashoffset:1}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes bv-areafade{0%,10%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@keyframes bv-follow{0%{offset-distance:0%;opacity:1}50%,90%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
.bv-chips{display:flex;gap:6px;flex-wrap:wrap}
.bv-chips span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);font-size:11.5px;color:rgba(230,236,255,.85)}

/* drag and drop */
.bv-dnd{--loop:8s}
.bv-list{position:relative;height:150px;margin-top:4px}
.bv-ri{position:absolute;left:0;right:0;height:42px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.bv-ri .grip{font-style:normal;color:rgba(255,255,255,.45);letter-spacing:-2px;font-size:14px}
.bv-ri u{width:24px;height:24px;border-radius:7px;flex:none}
.bv-ri span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bv-ri.ra{top:0;animation:bv-ra var(--loop) ease-in-out infinite}
.bv-ri.rb{top:50px;animation:bv-rb var(--loop) ease-in-out infinite}
.bv-ri.rc{top:100px;animation:bv-rc var(--loop) ease-in-out infinite}
@keyframes bv-ra{0%,18%{translate:0 0;scale:1;box-shadow:none;z-index:1}26%{scale:1.04;box-shadow:0 14px 30px -10px #000;background:rgba(80,140,255,.28);z-index:3}56%{translate:0 100px;scale:1.04;box-shadow:0 14px 30px -10px #000;background:rgba(80,140,255,.28);z-index:3}64%,88%{translate:0 100px;scale:1;box-shadow:none;background:rgba(255,255,255,.09);z-index:1}100%{translate:0 0;scale:1}}
@keyframes bv-rb{0%,26%{translate:0 0}56%,88%{translate:0 -50px}100%{translate:0 0}}
@keyframes bv-rc{0%,26%{translate:0 0}56%,88%{translate:0 -50px}100%{translate:0 0}}
.bv-hand{position:absolute;left:78%;top:28px;z-index:4;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:bv-hand var(--loop) ease-in-out infinite}
@keyframes bv-hand{0%,14%{translate:0 0;scale:1;opacity:0}20%{opacity:1}26%{translate:0 0;scale:.9}56%{translate:0 100px;scale:.9}64%{translate:0 100px;scale:1}88%{translate:0 100px;opacity:1}96%,100%{translate:0 100px;opacity:0}}
.bv-saved{position:absolute;right:14px;bottom:12px;padding:5px 12px;border-radius:999px;background:rgba(46,199,119,.18);border:1px solid rgba(46,199,119,.5);color:#8bf0b8;font-size:12px;opacity:0;animation:bv-toast var(--loop) ease-in-out infinite}

/* customer-specific campaign */
.bv-cust{display:flex;flex-direction:column;gap:12px;--loop:8s}
.bv-cc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.bv-cc div{flex:1;min-width:0}.bv-cc b{display:block}
.bv-cc .av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff9a5a,#ee3f7a);font-weight:700;font-size:12px}
.bv-type2{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:bv-type2 var(--loop) steps(24,end) infinite}
@keyframes bv-type2{0%,10%{width:0}38%,92%{width:var(--w)}100%{width:0}}
.bv-send{align-self:flex-end;padding:8px 18px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:13px;animation:bv-press var(--loop) ease-in-out infinite}
@keyframes bv-press{0%,44%{scale:1;box-shadow:none}50%{scale:.92}56%{scale:1;box-shadow:0 0 0 8px rgba(255,255,255,.25)}64%,100%{box-shadow:none}}
.bv-sent{position:absolute;left:16px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(46,199,119,.18);border:1px solid rgba(46,199,119,.5);color:#8bf0b8;font-size:12px;opacity:0;animation:bv-toast var(--loop) ease-in-out infinite}

/* rewards */
.bv-rws{display:flex;flex-direction:column;gap:7px;padding:12px 16px;--loop:8s}
.bv-rw{padding:7px 12px 8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.rw-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rw-head b{display:block}
.rw-state{position:relative;width:26px;height:22px}
.rw-state em{position:absolute;right:0;top:0;font-style:normal;font-size:13px}
.rw-state .ready{padding:2px 9px;border-radius:999px;background:#2ec777;color:#02200f;font-weight:700;opacity:0}
.rw-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.rw-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#3b8cff,#7ab8ff)}
.bv-rw.w1 .rw-bar i{animation:bv-w1 var(--loop) ease-in-out infinite}
.bv-rw.w2 .rw-bar i{animation:bv-w2 var(--loop) ease-in-out infinite}
.bv-rw.w3 .rw-bar i{animation:bv-w3 var(--loop) ease-in-out infinite}
.bv-rw.w1 .ready{animation:bv-ready var(--loop) ease-in-out infinite}
.bv-rw.w1 .lock{animation:bv-lock var(--loop) ease-in-out infinite}
.bv-rw.w1{animation:bv-glow var(--loop) ease-in-out infinite}
@keyframes bv-w1{0%{width:0}40%,92%{width:100%}100%{width:0}}
@keyframes bv-w2{0%{width:0}40%,92%{width:64%}100%{width:0}}
@keyframes bv-w3{0%{width:0}40%,92%{width:38%}100%{width:0}}
@keyframes bv-ready{0%,40%{opacity:0;scale:.6}48%,90%{opacity:1;scale:1}100%{opacity:0}}
@keyframes bv-lock{0%,40%{opacity:1}46%,92%{opacity:0}100%{opacity:1}}
@keyframes bv-glow{0%,40%{border-color:rgba(255,255,255,.13)}50%,90%{border-color:rgba(46,199,119,.6);background:rgba(46,199,119,.1)}100%{border-color:rgba(255,255,255,.13)}}

/* earn / spend points */
.bv-pl{display:flex;flex-direction:column;gap:10px;--loop:8s}
.bv-bal{display:flex;align-items:center;justify-content:space-between}
.bv-led{display:flex;flex-direction:column;gap:8px}
.bv-led .e{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);opacity:0;animation:bv-ent var(--loop) ease-out infinite}
.bv-led .e1{animation-delay:0s}.bv-led .e2{animation-name:bv-ent2}.bv-led .e3{animation-name:bv-ent3}
.bv-led b{font-variant-numeric:tabular-nums}
.bv-led .pos{color:#8bf0b8}.bv-led .neg{color:#ff8f9a}
@keyframes bv-ent{0%,14%{opacity:0;transform:translateX(-14px)}22%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bv-ent2{0%,34%{opacity:0;transform:translateX(-14px)}42%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bv-ent3{0%,54%{opacity:0;transform:translateX(-14px)}62%,90%{opacity:1;transform:none}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .bv-led .e,.bv-saved,.bv-sent{opacity:1}
  .bv-chart .ln{stroke-dashoffset:0}.bv-chart .area{opacity:1}.bv-chart .dot{display:none}
  .bv-type2{width:var(--w)}.bv-rw.w1 .rw-bar i{width:100%}.bv-rw.w2 .rw-bar i{width:64%}.bv-rw.w3 .rw-bar i{width:38%}
  .bv-hand{display:none}.bv-roll b,.bv-roll.big b{transform:translateY(-60px)}
}