/* The workspace loader (js/app-loader.js): the badge in a machined dial, on the landing's dot grid. */
html.kloading,html.kloading body{overflow:hidden}
.kload{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;color:var(--ink);
  background:radial-gradient(circle,#ffffff14 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(60% 50% at 50% 46%,#ff9e7a12,transparent 70%),var(--ground);
  clip-path:circle(150% at 50% 46%);transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
[data-theme=light] .kload{background:radial-gradient(circle,#14191e1f 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(60% 50% at 50% 46%,#b045240f,transparent 70%),var(--ground)}
.kload.out{clip-path:circle(0 at 50% 46%)}
.kl-bc{position:absolute;width:18px;height:18px}
.kl-bc::before,.kl-bc::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);opacity:.7}
.kl-bc::before{width:18px;height:1px;translate:-50% 0}.kl-bc::after{width:1px;height:18px;translate:0 -50%}
.kl-bc.tl{left:24px;top:24px}.kl-bc.tr{right:24px;top:24px}.kl-bc.bl{left:24px;bottom:24px}.kl-bc.br{right:24px;bottom:24px}
.kl-core{position:relative;display:grid;justify-items:center;gap:22px;translate:0 -2vh}
.kl-dial{position:relative;width:min(260px,62vw);aspect-ratio:1}
.kl-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kl-ring{fill:none;stroke:var(--hair-2);stroke-width:1}
.kl-ticks line{stroke:var(--hair-2);stroke-width:1.6;stroke-linecap:round;transition:stroke .45s ease-out}
.kl-ticks line.l,.kl-comet line.l{stroke-width:2.4}
/* the comet turns as one layer on the compositor: steady even while the page is busy */
.kl-comet{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform;animation:kl-turn 1.15s linear infinite;transition:opacity .4s}
.kl-comet line{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.kl-comet line[data-head]{stroke:var(--ink);filter:drop-shadow(0 0 4px var(--accent))}
@keyframes kl-turn{to{transform:rotate(360deg)}}
.kload.done .kl-ticks line{stroke:var(--accent);filter:drop-shadow(0 0 3px color-mix(in oklab,var(--accent) 70%,transparent))}
.kload.done .kl-comet{opacity:0}
.kl-badge{position:absolute;inset:19%;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:3px solid #0b0f14;background-color:#0b0f14!important;
  background:radial-gradient(circle at 50% 35%,#ffffff10,transparent 65%);box-shadow:inset 0 0 0 1px var(--hair-2),0 18px 40px #0007}
[data-theme=light] .kl-badge{box-shadow:inset 0 0 0 1px var(--hair-2),0 14px 30px #14191e26}
.kl-badge img{width:112%;max-width:none;height:112%;object-fit:cover;animation:kl-breathe 2.4s ease-in-out infinite}
html.kft-is-pro .kl-badge img{content:url(../img/kft-logo-pro-192.webp)}
.kl-read{display:grid;justify-items:center;gap:8px;font:600 13px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.kl-say{margin:0;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.2em;min-height:1em}
.kl-name{position:absolute;bottom:26px;left:50%;translate:-50% 0;margin:0;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.kload.done .kl-badge img{animation:none;scale:1.06;transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.kload.done .kl-badge{box-shadow:inset 0 0 0 1px var(--hair-2),0 0 34px color-mix(in oklab,var(--accent) 55%,transparent);transition:box-shadow .4s}
@keyframes kl-breathe{50%{scale:1.03}}
@media (prefers-reduced-motion:reduce){.kload{transition:none}.kl-comet{animation:none}.kl-badge img{animation:none}}