/* Kuntelligence loading language: the brain/basketball mark traces itself (activity, not progress). */
.k-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--secondary, #a4a4ae); }
.k-loader[hidden] { display: none !important; }
.kl-mark { width: 64px; height: 64px; overflow: visible; filter: drop-shadow(0 0 0 rgba(154, 113, 237, 0)); }
.kl-ghost { stroke: rgba(167, 92, 255, .14); stroke-width: 2.2; }
.kl-s { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }   /* undrawn strokes are invisible (round caps would show as dots) */
.kl-1 { stroke: #a75cff; stroke-width: 3; }
.kl-2 { stroke: #c798ff; stroke-width: 2.5; fill: #a75cff; fill-opacity: 0; }
.kl-3, .kl-5 { stroke: #d9b8ff; stroke-width: 2.2; }
.kl-4 { stroke: #c798ff; stroke-width: 2.5; }
.kl-text { display: grid; gap: 4px; max-width: 420px; }
.kl-title { color: var(--text, #f5f5f7); font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.kl-detail { font-size: 13px; color: var(--secondary, #a4a4ae); }
.kl-meta { font-size: 12px; color: var(--muted, #6e6e78); font-variant-numeric: tabular-nums; }
.kl-stall { font-size: 12px; color: #e7c38a; margin-top: 4px; }
.kl-actions:empty { display: none; }
.kl-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
/* variants */
.kl-compact { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
.kl-compact .kl-mark { width: 30px; height: 30px; flex: none; }
.kl-compact .kl-text { gap: 1px; }
.kl-compact .kl-title { font-size: 13px; }
.kl-compact .kl-detail, .kl-compact .kl-meta { font-size: 12px; }
.kl-compact .kl-actions { justify-content: flex-start; }
.kl-standard { padding: 26px 16px; }
.kl-workspace { min-height: 58vh; padding: 40px 16px; }
.kl-workspace .kl-mark { width: 96px; height: 96px; }
.kl-workspace .kl-title { font-size: 18px; }
/* motion: one calm 3.6 s cycle — circle, brain, folds, ball and seams trace in; brain fills; mark glows; quiet restart */
@media (prefers-reduced-motion: no-preference) {
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-1 { animation: kl-d1 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-2 { animation: kl-d2 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-3 { animation: kl-d3 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-4 { animation: kl-d4 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-5 { animation: kl-d5 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .k-loader:not(.kl-complete):not(.kl-failed) .kl-mark { animation: kl-glow 3.6s ease-in-out infinite; }
}
@keyframes kl-d1 { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 24% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes kl-d2 { 0%, 14% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 0; } 15% { opacity: 1; } 42% { stroke-dashoffset: 0; fill-opacity: 0; } 62% { fill-opacity: .1; } 86% { stroke-dashoffset: 0; fill-opacity: .1; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 0; } }
@keyframes kl-d3 { 0%, 34% { stroke-dashoffset: 1; opacity: 0; } 35% { opacity: 1; } 56% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes kl-d4 { 0%, 22% { stroke-dashoffset: 1; opacity: 0; } 23% { opacity: 1; } 48% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes kl-d5 { 0%, 42% { stroke-dashoffset: 1; opacity: 0; } 43% { opacity: 1; } 66% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes kl-glow { 0%, 66% { filter: drop-shadow(0 0 0 rgba(154, 113, 237, 0)); } 76% { filter: drop-shadow(0 0 14px rgba(154, 113, 237, .38)); } 88%, 100% { filter: drop-shadow(0 0 0 rgba(154, 113, 237, 0)); } }
/* complete: the whole mark, one soft glow, then the content takes over */
/* The whole mark appears at once (no redraw from the invisible base state, which read as a blink mid-cycle). */
.kl-complete .kl-s { stroke-dashoffset: 0; opacity: 1; transition: none; }
.kl-complete .kl-2 { fill-opacity: .1; }
.kl-complete .kl-mark { animation: kl-done .76s ease-out forwards; }
@keyframes kl-done { 0% { filter: drop-shadow(0 0 0 rgba(154, 113, 237, 0)); } 45% { filter: drop-shadow(0 0 18px rgba(154, 113, 237, .45)); } 100% { filter: drop-shadow(0 0 4px rgba(154, 113, 237, .12)); } }
.kl-complete .kl-text { transition: opacity .3s ease .4s; }
/* failed: the mark stops and dims; the truthful message leads */
.kl-failed .kl-s { stroke-dashoffset: 0; opacity: .28; }
.kl-failed .kl-mark { filter: grayscale(1); }
.kl-failed .kl-title { color: #f0a59b; }
/* reduced motion: a complete, still mark; activity is carried by the text (and elapsed time) */
@media (prefers-reduced-motion: reduce) { .kl-s { stroke-dashoffset: 0; opacity: 1; } .kl-2 { fill-opacity: .1; } }
/* content reveal after completion (callers add .kl-reveal to the new content) */
.kl-reveal { animation: kl-reveal .45s ease-out both; }
@keyframes kl-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kl-reveal { animation: none; } }
/* Large marks: keep the line weight close to the entrance animation's fine court lines. */
.kl-workspace .kl-1 { stroke-width: 2.2; } .kl-workspace .kl-2, .kl-workspace .kl-4 { stroke-width: 1.9; } .kl-workspace .kl-3, .kl-workspace .kl-5 { stroke-width: 1.7; }