/* confetti.css — The celebration burst (lib/dom/dom.js confetti()). Each particle
 * takes one of these paths, colours, start columns and rows at random, so no
 * style is written from JavaScript. The counts match CONFETTI in dom.js;
 * tests/frontend/confetti.test.mjs keeps the two in step. The base particle and
 * its animation are .cf in feed.css. */
.cf[data-cf-path="0"] {
  --dx: 88px;
  --dy: -90px;
}
.cf[data-cf-path="1"] {
  --dx: 76.2px;
  --dy: -46px;
}
.cf[data-cf-path="2"] {
  --dx: 44px;
  --dy: -13.8px;
}
.cf[data-cf-path="3"] {
  --dx: 0px;
  --dy: -2px;
}
.cf[data-cf-path="4"] {
  --dx: -44px;
  --dy: -13.8px;
}
.cf[data-cf-path="5"] {
  --dx: -76.2px;
  --dy: -46px;
}
.cf[data-cf-path="6"] {
  --dx: -88px;
  --dy: -90px;
}
.cf[data-cf-path="7"] {
  --dx: -76.2px;
  --dy: -134px;
}
.cf[data-cf-path="8"] {
  --dx: -44px;
  --dy: -166.2px;
}
.cf[data-cf-path="9"] {
  --dx: 0px;
  --dy: -178px;
}
.cf[data-cf-path="10"] {
  --dx: 44px;
  --dy: -166.2px;
}
.cf[data-cf-path="11"] {
  --dx: 76.2px;
  --dy: -134px;
}
.cf[data-cf-path="12"] {
  --dx: 125px;
  --dy: -90px;
}
.cf[data-cf-path="13"] {
  --dx: 108.3px;
  --dy: -27.5px;
}
.cf[data-cf-path="14"] {
  --dx: 62.5px;
  --dy: 18.3px;
}
.cf[data-cf-path="15"] {
  --dx: 0px;
  --dy: 35px;
}
.cf[data-cf-path="16"] {
  --dx: -62.5px;
  --dy: 18.3px;
}
.cf[data-cf-path="17"] {
  --dx: -108.3px;
  --dy: -27.5px;
}
.cf[data-cf-path="18"] {
  --dx: -125px;
  --dy: -90px;
}
.cf[data-cf-path="19"] {
  --dx: -108.3px;
  --dy: -152.5px;
}
.cf[data-cf-path="20"] {
  --dx: -62.5px;
  --dy: -198.3px;
}
.cf[data-cf-path="21"] {
  --dx: 0px;
  --dy: -215px;
}
.cf[data-cf-path="22"] {
  --dx: 62.5px;
  --dy: -198.3px;
}
.cf[data-cf-path="23"] {
  --dx: 108.3px;
  --dy: -152.5px;
}
.cf[data-cf-path="24"] {
  --dx: 162px;
  --dy: -90px;
}
.cf[data-cf-path="25"] {
  --dx: 140.3px;
  --dy: -9px;
}
.cf[data-cf-path="26"] {
  --dx: 81px;
  --dy: 50.3px;
}
.cf[data-cf-path="27"] {
  --dx: 0px;
  --dy: 72px;
}
.cf[data-cf-path="28"] {
  --dx: -81px;
  --dy: 50.3px;
}
.cf[data-cf-path="29"] {
  --dx: -140.3px;
  --dy: -9px;
}
.cf[data-cf-path="30"] {
  --dx: -162px;
  --dy: -90px;
}
.cf[data-cf-path="31"] {
  --dx: -140.3px;
  --dy: -171px;
}
.cf[data-cf-path="32"] {
  --dx: -81px;
  --dy: -230.3px;
}
.cf[data-cf-path="33"] {
  --dx: 0px;
  --dy: -252px;
}
.cf[data-cf-path="34"] {
  --dx: 81px;
  --dy: -230.3px;
}
.cf[data-cf-path="35"] {
  --dx: 140.3px;
  --dy: -171px;
}
.cf[data-cf-colour="0"] {
  background: #ffd93d;
}
.cf[data-cf-colour="1"] {
  background: #ff8fa3;
}
.cf[data-cf-colour="2"] {
  background: #7ed58a;
}
.cf[data-cf-colour="3"] {
  background: #7cc4ff;
}
.cf[data-cf-colour="4"] {
  background: #ffb26b;
}
.cf[data-cf-colour="5"] {
  background: #c9a7ff;
}
.cf[data-cf-column="0"] {
  left: 35%;
}
.cf[data-cf-column="1"] {
  left: 40%;
}
.cf[data-cf-column="2"] {
  left: 45%;
}
.cf[data-cf-column="3"] {
  left: 50%;
}
.cf[data-cf-column="4"] {
  left: 55%;
}
.cf[data-cf-column="5"] {
  left: 60%;
}
.cf[data-cf-column="6"] {
  left: 65%;
}
.cf[data-cf-row="0"] {
  top: 30%;
}
.cf[data-cf-row="1"] {
  top: 35%;
}
.cf[data-cf-row="2"] {
  top: 40%;
}
.cf[data-cf-row="3"] {
  top: 45%;
}
.cf[data-cf-row="4"] {
  top: 50%;
}
.cf.is-round {
  border-radius: 50%;
}