/* CITADEL mark: a bold black C that is also a cell with its nucleus, on a white tile in every theme.
   It is still when idle. While the agent works the C turns slowly around the nucleus, the nucleus
   pulses softly and a thin line circles the mark; when the answer lands the circle closes once. See agent-logo.js. */
.cmark { --cm: 38px; display: inline-grid; place-items: center; flex: none; width: var(--cm); height: var(--cm);
  border-radius: calc(var(--cm) * .24); background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.cmark svg { width: 80%; height: 80%; display: block; overflow: visible; }
.cmark .cm-c, .cmark .cm-nuc { fill: #0a0a0a; transform-box: view-box; transform-origin: 32px 32px; }
.cmark .cm-trace { fill: none; stroke: #0a0a0a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 84; opacity: 0;
  transform-box: view-box; transform-origin: 32px 32px; transform: rotate(-90deg); transition: opacity .4s ease; }
.cmark.is-working .cm-c { animation: cm-turn 2.2s cubic-bezier(.6,0,.4,1) infinite; }
.cmark.is-working .cm-nuc { animation: cm-pulse 1.1s ease-in-out infinite; }
.cmark.is-working .cm-trace { opacity: .8; animation: cm-trace 1.4s linear infinite; }
.cmark.is-found .cm-trace { opacity: .8; stroke-dasharray: 100 0; animation: cm-done 1.4s ease-out forwards; }
@keyframes cm-turn { to { transform: rotate(360deg); } }
@keyframes cm-pulse { 50% { transform: scale(.72); } }
@keyframes cm-trace { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes cm-done { 0%, 45% { opacity: .8; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cmark.is-working .cm-c, .cmark.is-working .cm-nuc, .cmark.is-working .cm-trace { animation: none; }
  .cmark.is-working .cm-trace { stroke-dasharray: 100 0; opacity: .5; }
}