.demo{--demo-ink:#eef1fc;--demo-soft:#c9d1f0;--b:44px;color:var(--demo-ink);flex-direction:column;gap:10px;display:flex;position:relative}.demo .alt{font-family:var(--display);align-items:baseline;gap:8px;font-size:20px;font-weight:600;display:flex}.demo .alt b{font-variant-numeric:tabular-nums;font-size:30px}.demo .alt small{font-family:var(--font);color:var(--demo-soft);font-size:14px}.demo .wall{grid-template-columns:repeat(6, var(--b));gap:6px;display:grid}.demo .wall span{width:var(--b);height:var(--b);font-family:var(--display);font-weight:600;font-size:calc(var(--b) * .55);color:#1d2347;background:#dfe5f8;border-radius:6px;place-items:center;transition:background .18s,color .18s,transform .45s cubic-bezier(.3,1.3,.5,1),opacity .35s;display:grid;position:relative}.demo .wall span.a{color:#2a1530;background:#f6a3b6}.demo .wall span.b{color:#10304a;background:#a9d3f0}.demo .wall span.out{opacity:0;transform:translateY(-46px)scale(.8)}.demo .wall span.in{opacity:0;transition:none;transform:translateY(-40px)}.demo .who{flex-wrap:wrap;gap:8px;min-height:28px;display:flex}.demo .who span{opacity:0;border-radius:99px;padding:3px 10px;font-size:13px;font-weight:800;transition:opacity .25s}.demo .who span.on{opacity:1}.demo .who .a{color:#2a1530;background:#f6a3b6}.demo .who .b{color:#10304a;background:#a9d3f0}.demo .wall span i{font-family:var(--font);font-style:normal;font-weight:800;font-size:calc(var(--b) * .22);opacity:.5;position:absolute;bottom:1px;right:3px}.demo .who span{transition:opacity .25s,transform .25s}.demo .who span.now{transform:scale(1.12)}.demo .score{opacity:0;transform-origin:0;align-items:center;gap:8px;height:40px;transition:opacity .3s,transform .3s;display:flex;transform:scale(.85)}.demo .score.on{opacity:1;transform:none}.demo .score .sb{text-align:center;min-width:2.2em;font-family:var(--display);font-variant-numeric:tabular-nums;color:#fff;border-radius:10px;padding:3px 10px;font-size:22px;font-weight:600}.demo .score .chips{background:#2b6a99}.demo .score .mult{background:#c03f60}.demo .score .sx{font-family:var(--display);color:var(--demo-ink);font-size:20px;font-weight:600}.demo .tot{color:#c03f60;font-family:var(--display);font-variant-numeric:tabular-nums;opacity:0;background:#fff;border-radius:12px;margin-left:6px;padding:2px 12px 4px;font-size:26px;font-weight:600}.demo .tot.on{opacity:1;animation:.45s cubic-bezier(.2,.9,.3,1.4) demo-slam}@keyframes demo-slam{0%{opacity:0;transform:scale(2.2)rotate(-6deg)}}.demo .plus{z-index:2;pointer-events:none;font-family:var(--display);color:#2b6a99;-webkit-text-stroke:5px #fff;paint-order:stroke fill;font-weight:600;animation:.8s ease-out forwards demo-plus;position:absolute;translate:-50% -50%}@keyframes demo-plus{0%{opacity:0;transform:translateY(6px)scale(.6)}20%{opacity:1;transform:none}to{opacity:0;transform:translateY(-34px)}}.demo.on-card{--demo-ink:#232b54;--demo-soft:#5d6894;--b:min(40px, calc((100vw - 120px) / 6))}.demo.on-card .stage{background:#7b8bc0;border-radius:12px;align-self:flex-start;padding:10px}.demo.on-card .tot{background:#fbe3ea}