.v3-faint{opacity:.70;animation:v3-faint 8s ease-in-out infinite}
.v3-secondary{opacity:0;animation:v3-secondary 8s ease-in-out infinite}
.v3-selected{opacity:0;stroke-dasharray:420;stroke-dashoffset:420;
  animation:v3-selected 8s cubic-bezier(.55,.05,.25,1) infinite}
.v3-halo{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:v3-halo 8s ease-in-out infinite}
.v3-core{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:v3-core 8s ease-in-out infinite}
.v3-plan{opacity:0;stroke-dasharray:50;stroke-dashoffset:50;
  animation:v3-plan 8s ease-in-out infinite}
.v3-milestone{opacity:0;animation:v3-milestone 8s ease-in-out infinite}
.v3-m2{animation-delay:.10s}
.v3-m3{animation-delay:.20s}
.v3-particles{opacity:.75;animation:v3-particles 8s ease-in-out infinite}
@keyframes v3-faint{0%,18%{opacity:.70}42%{opacity:.42}62%,86%{opacity:.16}100%{opacity:.70}}
@keyframes v3-secondary{0%,15%{opacity:0}26%,40%{opacity:.72}56%,100%{opacity:0}}
@keyframes v3-selected{0%,28%{opacity:0;stroke-dashoffset:420}38%{opacity:.90}
  62%,88%{opacity:.95;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes v3-halo{0%,48%{opacity:0;transform:scale(.60)}61%{opacity:.85;transform:scale(1)}
  82%{opacity:.50;transform:scale(1.08)}100%{opacity:0;transform:scale(1.16)}}
@keyframes v3-core{0%,48%{opacity:0;transform:scale(.5)}58%,88%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.8)}}
@keyframes v3-plan{0%,62%{opacity:0;stroke-dashoffset:50}70%{opacity:1}
  84%,92%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes v3-milestone{0%,70%{opacity:0}79%,92%{opacity:1}100%{opacity:0}}
@keyframes v3-particles{0%,24%{opacity:.75}50%{opacity:.38}78%{opacity:.16}100%{opacity:.75}}

.cnote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:16px;max-width:min(680px,calc(100vw - 32px));
  padding:12px 14px 12px 20px;background:var(--ink);border-radius:10px;
  box-shadow:0 8px 28px rgba(11,16,36,.22)}
.cnote[hidden]{display:none}
.cnote p{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.86)}
.cnote a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cnote-actions{flex:none;display:flex;gap:8px}
.cnote-ok,.cnote-reject{flex:none;padding:9px 18px;border-radius:6px;
  font-family:var(--mono);font-size:12.5px;cursor:pointer}
.cnote-ok{border:0;background:#fff;color:var(--ink)}
.cnote-ok:hover{background:#EDEFF6}
.cnote-reject{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}
.cnote-reject:hover{border-color:#fff}
@media(max-width:560px){
  .cnote{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;
    left:16px;right:16px;transform:none;max-width:none}
  .cnote-actions{width:100%}
  .cnote-ok,.cnote-reject{flex:1}
}

.dp-flow{stroke-dasharray:46;stroke-dashoffset:46;
  animation-name:dp-flow;animation-duration:4.5s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.dp-tag rect{transform-box:fill-box;transform-origin:center;
  animation-name:dp-tag;animation-duration:4.5s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.dp-tag rect:nth-child(2){animation-delay:.25s}
.dp-tag rect:nth-child(3){animation-delay:.5s}
.dp-tag rect:nth-child(4){animation-delay:.75s}
.dp-tag rect:nth-child(5){animation-delay:1s}
.dp-check{stroke-dasharray:40;stroke-dashoffset:40;
  animation-name:dp-check;animation-duration:4.5s;
  animation-timing-function:cubic-bezier(.55,.05,.25,1);
  animation-iteration-count:infinite}
@keyframes dp-flow{0%{stroke-dashoffset:46}35%,100%{stroke-dashoffset:0}}
@keyframes dp-tag{0%,20%{opacity:.35}45%,100%{opacity:1}}
@keyframes dp-check{0%,55%{stroke-dashoffset:40}80%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .dp-flow,.dp-check{animation:none;stroke-dashoffset:0}
  .dp-tag rect{animation:none;opacity:1}
}

.db-cyl{opacity:.45;
  animation-name:db-pulse;animation-duration:4s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.db-link{stroke-dasharray:24;stroke-dashoffset:24;
  animation-name:db-flow;animation-duration:4s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes db-pulse{0%,60%,100%{opacity:.45}25%{opacity:1}}
@keyframes db-flow{0%{stroke-dashoffset:24}30%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .db-cyl{animation:none;opacity:.85}
  .db-link{animation:none;stroke-dashoffset:0}
}

.dx-node{opacity:0;
  animation-name:dx-in;animation-duration:6s;
  animation-timing-function:ease-out;animation-iteration-count:infinite}
.dx-link{stroke-dasharray:70;stroke-dashoffset:70;
  animation-name:dx-draw;animation-duration:6s;
  animation-timing-function:cubic-bezier(.55,.05,.25,1);
  animation-iteration-count:infinite}
.dx-halo{transform-box:fill-box;transform-origin:center;
  animation-name:dx-halo;animation-duration:6s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes dx-in{0%,6%{opacity:0}20%,100%{opacity:1}}
@keyframes dx-draw{0%,10%{stroke-dashoffset:70}40%,100%{stroke-dashoffset:0}}
@keyframes dx-halo{0%,55%{opacity:.12}75%,100%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .dx-node{animation:none;opacity:1}
  .dx-link{animation:none;stroke-dashoffset:0}
  .dx-halo{animation:none;opacity:.4}
}

.ef-line{stroke-dasharray:340;stroke-dashoffset:340;
  animation-name:ef-draw;animation-duration:5s;
  animation-timing-function:cubic-bezier(.55,.05,.25,1);
  animation-iteration-count:infinite}
.ef-cost{animation-delay:.45s}
.ef-dot circle{opacity:0;transform-box:fill-box;transform-origin:center;
  animation-name:ef-pop;animation-duration:5s;
  animation-timing-function:ease-out;animation-iteration-count:infinite}
.ef-dot circle:nth-child(2){animation-delay:.12s}
.ef-dot circle:nth-child(3){animation-delay:.24s}
.ef-dot circle:nth-child(4){animation-delay:.36s}
.ef-dot circle:nth-child(5){animation-delay:.48s}
@keyframes ef-draw{0%{stroke-dashoffset:340}45%,100%{stroke-dashoffset:0}}
@keyframes ef-pop{0%,12%{opacity:0}40%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ef-line{animation:none;stroke-dashoffset:0}
  .ef-dot circle{animation:none;opacity:1}
}

.pr-bar{transform-box:fill-box;transform-origin:left center;
  animation-name:pr-grow;animation-duration:7s;
  animation-timing-function:cubic-bezier(.4,0,.3,1);
  animation-iteration-count:infinite}
.pr-pick{opacity:0;
  animation-name:pr-pick;animation-duration:7s;
  animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes pr-grow{0%,8%{transform:scaleX(.06);opacity:.3}
  36%,74%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(.06);opacity:.3}}
@keyframes pr-pick{0%,44%{opacity:0}56%,86%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pr-bar{animation:none;transform:none;opacity:1}
  .pr-pick{animation:none;opacity:1}
}

.ro-wave{transform-box:fill-box;transform-origin:center;opacity:0;
  animation-name:ro-wave;animation-duration:5.4s;
  animation-timing-function:cubic-bezier(.25,.6,.35,1);
  animation-iteration-count:infinite}
.ro-wave:nth-child(2){animation-delay:1.8s}
.ro-wave:nth-child(3){animation-delay:3.6s}

.ro-orbit{transform-origin:210px 150px;
  animation-name:ro-spin;animation-duration:18s;
  animation-timing-function:linear;animation-iteration-count:infinite}

@keyframes ro-wave{
  0%{transform:scale(1);opacity:0}
  12%{opacity:.42}
  100%{transform:scale(2.47);opacity:0}
}
@keyframes ro-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .ro-wave{animation:none;opacity:0}
  .ro-orbit{animation:none}
}

.rr{transform-origin:280px 252px;
  animation-timing-function:linear;animation-iteration-count:infinite}
.s1{animation-name:rr-cw; animation-duration:15s}
.s2{animation-name:rr-ccw;animation-duration:23s}
.s3{animation-name:rr-cw; animation-duration:34s}
.s4{animation-name:rr-ccw;animation-duration:44s}
@keyframes rr-cw {to{transform:rotate(360deg)}}
@keyframes rr-ccw{to{transform:rotate(-360deg)}}

.rw{opacity:0;transform-box:fill-box;transform-origin:center;
  animation-name:rr-word;animation-duration:9s;
  animation-timing-function:cubic-bezier(.2,.7,.2,1);
  animation-iteration-count:infinite}
.rw2{animation-delay:3s}
.rw3{animation-delay:6s}
@keyframes rr-word{
  0%{opacity:0;transform:translateY(14px)}
  3%,33%{opacity:1;transform:translateY(0)}
  36.5%,100%{opacity:0;transform:translateY(-10px)}
}

.rr-disc{transform-origin:280px 252px;
  animation-name:rr-cw;animation-duration:26s;
  animation-timing-function:linear;animation-iteration-count:infinite}

@media (prefers-reduced-motion:reduce){
  .rr-disc{animation:none}
  .rr{animation:none}
    .rw{animation:none;opacity:0}
  .rw3{opacity:1}
}