/* ---- the aura: one grammar, a solid core inside a chromatic halo ---- */
.au{position:relative;flex:none;display:inline-block;border-radius:50%}
.au.xs{width:15px;height:15px}.au.sm{width:24px;height:24px}
.au.md{width:38px;height:38px}.au.lg{width:76px;height:76px}
.eclipse{background:radial-gradient(circle at 50% 50%,
  var(--core) 0 34%,var(--h3) 38%,var(--h1) 54%,transparent 76%)}
.halo{background:radial-gradient(circle at 50% 50%,
  var(--h3) 0 18%,var(--h1) 44%,transparent 72%)}
.seed{background:radial-gradient(circle at 50% 50%,
  var(--core) 0 56%,var(--h1) 62%,transparent 88%)}
.comet{background:radial-gradient(circle at 50% 50%,var(--core) 0 46%,var(--h1) 52%,transparent 82%)}
.comet::after{content:"";position:absolute;top:82%;left:50%;width:14%;height:150%;
  transform:translateX(-50%);border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,var(--h1),transparent 88%)}
.twin{width:52px;height:29px;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(ellipse 50% 100% at 50% 50%,var(--h3) 0 12%,var(--h1) 46%,transparent 74%)}
.twin i{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--core)}
.twin i:first-child{left:8px;animation:drawin calc(6s / var(--tempo)) ease-in-out infinite}
.twin i:last-child{right:8px;animation:drawin calc(6s / var(--tempo)) ease-in-out infinite reverse}
@keyframes drawin{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
/* ROW — generic horizontal layout (paired inputs/selects in the sheets). This
   used to double as the boot loader; the loader is now .spin below. */
.row{display:flex;align-items:center;gap:8px}

/* SPIN — the loader. One hairline ring, one continuous rotation. Replaces the
   five-dot travelling-glow row: staggered dots read as flicker at this size,
   and a single rotation is unambiguously "working" rather than "blinking".
   .sm is the inline variant used in the chat thread while Portal thinks. */
.spin.sm{width:15px;height:15px;border-width:1.5px;margin:4px 0 2px}
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;flex:none;
  border:2px solid var(--line);border-top-color:var(--h1);
  animation:spin calc(1.15s / var(--tempo)) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Reduced motion: a full static ring, not a frozen quarter-arc (which reads as
   a broken spinner rather than a deliberate resting state). */
@media (prefers-reduced-motion:reduce){
  .spin{animation:none;border-color:var(--h1);opacity:.5}}
/* Breathing, slowed 2026-09-06. Every one of these sits BEHIND content a
   person is reading; at 2.6s the "fast" variant read as a pulse demanding
   attention rather than a sign of life, and there are several on screen at
   once. The scale swing came down with it — a 10% size change on a dot next
   to text is movement in the reader's periphery. */
.brea{animation:breathe calc(7s / var(--tempo)) ease-in-out infinite}
.brea.slow{animation-duration:calc(11s / var(--tempo))}
.brea.fast{animation-duration:calc(3.8s / var(--tempo))}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.055);opacity:1}}