/* Yarn ball loader. Flat sage ball, one loose strand. CSS only. */
.yarn-screen{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  margin:0;
  padding:24px;
  background:rgba(251,246,238,.94);
  color:#627244;
}
.yarn-screen.is-done{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s linear;
}
.yarn-loader{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0;
  padding:0;
  color:#627244;
  line-height:0;
  vertical-align:middle;
}
.yarn-loader--inline{
  flex-direction:row;
  gap:8px;
  line-height:1.2;
}
.yarn-loader--overlay{
  gap:16px;
  line-height:1.35;
}
.yarn-ball-svg{
  display:block;
  overflow:visible;
}
.yarn-loader--inline .yarn-ball-svg{width:20px;height:20px}
.yarn-loader--small .yarn-ball-svg{width:24px;height:24px}
.yarn-loader--medium .yarn-ball-svg{width:48px;height:48px}
.yarn-loader--overlay .yarn-ball-svg{width:96px;height:96px}
.yarn-ball-spin{
  transform-box:view-box;
  transform-origin:40% 50%;
  animation:yarn-turn 1.6s linear infinite;
}
.yarn-stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.yarn-ball-fill{
  fill:currentColor;
  fill-opacity:.16;
}
.yarn-loader--inline .yarn-stroke{stroke-width:7}
.yarn-loader--small .yarn-stroke{stroke-width:6.5}
.yarn-loader--medium .yarn-stroke{stroke-width:4.5}
.yarn-loader--overlay .yarn-stroke{stroke-width:3.6}
.yarn-strand{
  stroke-dasharray:0 200;
  stroke-dashoffset:0;
  animation:yarn-unwind 1.6s ease-in-out infinite;
}
.yarn-loader__label{
  margin:0;
  max-width:16rem;
  text-align:center;
  text-wrap:balance;
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:1.15rem;
  line-height:1.35;
  color:#55613A;
}
.yarn-loader--inline .yarn-loader__label{
  max-width:none;
  font-family:"Atkinson Hyperlegible","Segoe UI",sans-serif;
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
}
.yuni-live-boot{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:2;
}
.yuni-live:has(.yuni-live-boot){position:relative}
.preview3d .yarn-loader,
.fpv-card .yarn-loader{margin:0 auto}
[data-theme="dark"] .yarn-screen{
  background:rgba(44,38,31,.94);
  color:#D4E2B4;
}
[data-theme="dark"] .yarn-loader{color:#D4E2B4}
[data-theme="dark"] .yarn-loader__label{color:#F6F0E4}
@keyframes yarn-turn{to{transform:rotate(360deg)}}
@keyframes yarn-unwind{
  0%,100%{stroke-dasharray:0 200;stroke-dashoffset:0}
  50%{stroke-dasharray:78 200;stroke-dashoffset:0}
}
@keyframes yarn-pulse{
  0%,100%{opacity:1}
  50%{opacity:.62}
}
@media (prefers-reduced-motion:reduce){
  .yarn-screen.is-done{transition:none}
  .yarn-ball-spin,.yarn-strand{animation:none}
  .yarn-strand{stroke-dasharray:52 200;stroke-dashoffset:0}
  .yarn-loader{animation:yarn-pulse 1.8s ease-in-out infinite}
}
html[data-calm="1"] .yarn-ball-spin,
html[data-calm="1"] .yarn-strand{animation:none}
html[data-calm="1"] .yarn-strand{stroke-dasharray:52 200;stroke-dashoffset:0}
html[data-calm="1"] .yarn-loader{animation:yarn-pulse 1.8s ease-in-out infinite}
