.bf-root{--ink:var(--color-ink,#0a0c0b);--amber:var(--color-amber,#e2a647);--sapphire:var(--color-sapphire,#5b8fd0);--parchment:var(--color-parchment,#e9e1cd);--dim:.2;--beat:70ms;--settle:cubic-bezier(.2, 0, 0, 1)}:is(.bf-root:has([data-lane=yellow]:is(:hover,:focus-visible)) [data-lane]:not([data-lane=yellow]),.bf-root:has([data-lane=blue]:is(:hover,:focus-visible)) [data-lane]:not([data-lane=blue]),.bf-root:has([data-lane=green]:is(:hover,:focus-visible)) [data-lane]:not([data-lane=green])){opacity:var(--dim);transition-delay:var(--beat)}:is(.bf-root:has([data-lane=yellow]:is(:hover,:focus-visible)) [data-lane=yellow],.bf-root:has([data-lane=blue]:is(:hover,:focus-visible)) [data-lane=blue],.bf-root:has([data-lane=green]:is(:hover,:focus-visible)) [data-lane=green]){--on:1}.bf-root[data-focus]{--dim:.35}.bf-root[data-focus]:not(:has([data-lane]:is(:hover,:focus-visible))) [data-lane]:not(.bf-focus){opacity:var(--dim)}.bf-root[data-focus]:not(:has([data-lane]:is(:hover,:focus-visible))) .bf-focus{--on:1}.bf-plate{background:linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) top left / 14px 1px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) top left / 1px 14px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) top right / 14px 1px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) top right / 1px 14px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) bottom left / 14px 1px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) bottom left / 1px 14px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) bottom right / 14px 1px no-repeat, linear-gradient(var(--color-copper,#a07b62), var(--color-copper,#a07b62)) bottom right / 1px 14px no-repeat}.bf-frame{filter:brightness(.82)saturate(.6)}.bf-lane{transition:opacity .28s ease-out}.bf-casing,.bf-line,.bf-glow,.bf-troops,.bf-express path,.bf-hit{fill:none;stroke-linecap:round;stroke-linejoin:round}.bf-casing{stroke:var(--ink);stroke-width:calc(15px + var(--on,0) * 6px);opacity:.9;transition:stroke-width .32s var(--settle) calc(var(--on,0) * var(--beat))}.bf-line{stroke:var(--lane);stroke-width:calc(7px + var(--on,0) * 5px);transition:stroke-width .32s var(--settle) calc(var(--on,0) * var(--beat))}.bf-glow{stroke:var(--lane);stroke-width:30px;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--on,0));opacity:calc(var(--on,0) * .55);transition:opacity calc(.16s - var(--on,0) * 40ms) ease-out calc(var(--on,0) * var(--beat)), stroke-dashoffset calc(var(--on,0) * .56s) var(--settle) calc(var(--on,0) * var(--beat) + (1 - var(--on,0)) * .16s)}.bf-draw{stroke-dasharray:1;animation:1.5s cubic-bezier(.45,0,.2,1) backwards bf-draw;animation-delay:var(--delay,0s)}@keyframes bf-draw{0%{stroke-dashoffset:1px}}.bf-root[data-focus] .bf-draw,.bf-root[data-focus] .bf-marker,[data-stage=still] .bf-draw,[data-stage=still] .bf-marker{animation:none}.bf-focus .bf-glow{animation:bf-draw .56s var(--settle) backwards;animation-delay:.45s}.bf-root:not([data-focus]) [data-stage=wait] .bf-draw{stroke-dashoffset:1px;animation:none}.bf-root:not([data-focus]) [data-stage=wait] .bf-marker,[data-stage=wait] .bf-focus .bf-glow,[data-stage=wait] .bf-focus .bf-troops{opacity:0;animation:none}.bf-troops{stroke-width:7px;stroke-dasharray:0 26;opacity:var(--on,0);transition:opacity .22s ease-out calc(var(--on,0) * .38s);animation:1.2s linear infinite paused bf-march}:is(.bf-root:has([data-lane=yellow]:is(:hover,:focus-visible)) [data-lane=yellow] .bf-troops,.bf-root:has([data-lane=blue]:is(:hover,:focus-visible)) [data-lane=blue] .bf-troops,.bf-root:has([data-lane=green]:is(:hover,:focus-visible)) [data-lane=green] .bf-troops){animation-play-state:running}.bf-focus .bf-troops{animation-name:bf-march,bf-rise;animation-duration:1.2s,.22s;animation-timing-function:linear,ease-out;animation-iteration-count:infinite,1;animation-direction:normal,normal;animation-play-state:running;animation-delay:0s,.85s;animation-fill-mode:none,backwards;animation-timeline:auto,auto}.bf-amber-troops{stroke:var(--amber)}.bf-sapphire-troops{stroke:var(--sapphire)}@keyframes bf-march{to{stroke-dashoffset:-26px}}.bf-hit{stroke:#0000;stroke-width:44px;pointer-events:stroke;cursor:pointer}.bf-marker{animation:.6s ease-out backwards bf-rise;animation-delay:calc(var(--delay,0s) + 1.1s)}@keyframes bf-rise{0%{opacity:0}}.bf-express path{stroke:var(--parchment);stroke-width:4px;stroke-dasharray:3 9;opacity:.85}.bf-halo{fill:none;stroke:#ffd96a;stroke-width:3px;transform-box:fill-box;transform-origin:50%;animation:3.4s ease-out infinite bf-halo}@keyframes bf-halo{0%{opacity:.7;transform:scale(.7)}to{opacity:0;transform:scale(1.9)}}.bf-chip{--dim:.4;background:color-mix(in srgb, var(--lane,var(--ink)) calc(var(--on,0) * 100%), color-mix(in srgb, var(--ink) 82%, transparent));color:color-mix(in srgb, #10130d calc(var(--on,0) * 100%), var(--parchment));border-color:color-mix(in srgb, var(--lane,var(--parchment)) 70%, transparent);transition:background-color .26s ease-out calc(var(--on,0) * var(--beat)), color .26s ease-out calc(var(--on,0) * var(--beat)), opacity .28s ease-out}.bf-row{--dim:.45;background:color-mix(in srgb, var(--lane) calc(var(--on,0) * 9%), transparent);transition:background-color .26s ease-out calc(var(--on,0) * var(--beat)), opacity .28s ease-out}.bf-row .bf-bar{width:calc(1.75rem + var(--on,0) * 1rem);transition:width calc(.2s + var(--on,0) * .36s) var(--settle) calc(var(--on,0) * var(--beat))}@media (prefers-reduced-motion:reduce){.bf-draw,.bf-marker,.bf-halo,.bf-focus .bf-glow{animation:none}.bf-troops{display:none}.bf-glow{stroke-dasharray:none}.bf-lane,.bf-casing,.bf-line,.bf-glow,.bf-chip,.bf-row,.bf-row .bf-bar{transition:none}}