/* ===========================================================================
   la — "The Circuit" (option A, 2026-09-20)
   ---------------------------------------------------------------------------
   FinePrint LM and AnswerLoop facing each other, joined by ONE continuous
   elliptical circuit.  Top arc = the model's work going out for review (cool
   house blue, chevron right).  Bottom arc = the lawyers' corrections coming
   back (AMBER, chevron left) — the same colour rule as the deployed wf- and
   alf- figures.  A single token rides the circuit forever: it leaves as a
   document, is absorbed inside AnswerLoop, and returns amber as a correction.

   WIDE layout is drawn at viewBox 0 0 1112 472 = the homepage .hcp .c-wrap
   content width (1160 - 2 x 24), so it renders 1:1 from a 1208px viewport up.
   Integer grid, 1px hairlines on .5 centre lines, geometricPrecision text.
   STACKED layout (viewBox 0 0 360 528) below 860px.

   ONE 18s clock.  Every animated rule is
       animation:NAME 18s linear infinite; animation-delay:var(--la-t0,0s)
   so park.py parks a still with a negative --la-t0 + paused.  Every keyframe
   percentage is derived from the rider's real arc-length position, and the two
   layouts have different arc-to-leg proportions, so each gets its own set.

   STRUCTURE NEVER FADES: the base, un-animated CSS is the COMPLETE, RESOLVED
   frame.  prefers-reduced-motion is animation:none plus hiding the rider and
   the two comet tails.

   No angle brackets anywhere in this sheet: it is also embedded in a style
   element inside standalone.html.
   =========================================================================== */

.la-fig{
  --la-display:'Instrument Serif',ui-serif,Georgia,serif;
  --la-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --la-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --la-t0:0s; --la-pr:5.5px;
  position:relative; container-type:inline-size; border-radius:24px;
  font-family:var(--la-body);
  /* the host page (.hcp) sets antialiased; on a navy plate that thins every
     light glyph, so `auto` is set EXPLICITLY here */
  -webkit-font-smoothing:auto;
  box-shadow:var(--la-shadow);
}
.la-fig svg{display:block;width:100%;height:auto;shape-rendering:geometricPrecision}
.la-fig .la-lay-m{display:none;max-width:440px;margin:0 auto}

@media (max-width:860px){
  .la-fig{border-radius:20px;--la-pr:5px}
  .la-fig .la-lay-d{display:none}
  .la-fig .la-lay-m{display:block}
}
@container (max-width:860px){
  .la-fig{border-radius:20px;--la-pr:5px}
  .la-fig .la-lay-d{display:none}
  .la-fig .la-lay-m{display:block}
}

/* ---------- palette: DARK (primary) ---------- */
.la-fig.la-dark{
  --la-plate:#0C1A24; --la-plateEdge:rgba(236,237,234,.10);
  --la-card:#12242F;  --la-cardEdge:rgba(236,237,234,.16);
  --la-title:#F2EDE3; --la-bodyc:#BCC9D2; --la-quiet:#7E8F99;
  --la-rail:rgba(236,237,234,.16);
  --la-accent:#8FC1D4; --la-accentDim:rgba(143,193,212,.38);
  --la-amber:#F59E0B;  --la-amberDim:rgba(245,158,11,.36);
  --la-mkslash:#F2603F;
  --la-liftO:1;
  --la-glowA:rgba(143,193,212,.55); --la-glowB:rgba(245,158,11,.5);
  --la-shadow:0 30px 60px -34px rgba(6,14,20,.72),0 2px 8px -4px rgba(6,14,20,.5);
}
/* ---------- palette: LIGHT ---------- */
.la-fig.la-light{
  /* a faint paper plate so the white panels lift off it by more than a
     hairline — the reference reads border-not-fill, but on paper two whites
     with the same edge weight collapse into one flat field */
  --la-plate:#FBFAF7; --la-plateEdge:#E4E8E9;
  --la-card:#FFFFFF;  --la-cardEdge:#D3DBDF;
  --la-title:#101E28; --la-bodyc:#33454F; --la-quiet:#566873;
  --la-rail:#DCE3E6;
  --la-accent:#17627A; --la-accentDim:#A9BCC5;
  --la-amber:#C77C05;  --la-amberDim:#E3C795;
  --la-mkslash:#F2603F;
  --la-liftO:0;
  --la-glowA:rgba(23,98,122,.28); --la-glowB:rgba(199,124,5,.3);
  --la-shadow:0 22px 50px -30px rgba(12,26,36,.32),0 2px 6px -3px rgba(12,26,36,.08);
}

/* ---------- ink ---------- */
.la-fig text{font-family:var(--la-body);text-rendering:geometricPrecision}
.la-fig .la-acc{--la-tone:var(--la-accent);--la-toneDim:var(--la-accentDim);
  --la-glow:var(--la-glowA)}
.la-fig .la-amb{--la-tone:var(--la-amber);--la-toneDim:var(--la-amberDim);
  --la-glow:var(--la-glowB)}
.la-fig .la-quiet{--la-tone:var(--la-quiet);--la-toneDim:var(--la-quiet)}

.la-fig .la-plate{fill:var(--la-plate);stroke:var(--la-plateEdge);stroke-width:1;
  vector-effect:non-scaling-stroke}
.la-fig .la-lift{opacity:var(--la-liftO)}
.la-fig .la-panel{fill:var(--la-card);stroke:var(--la-cardEdge);stroke-width:1;
  vector-effect:non-scaling-stroke}
.la-fig .la-sep{fill:none;stroke:var(--la-rail);stroke-width:1;
  vector-effect:non-scaling-stroke}

.la-fig .la-eye{font-weight:600;text-transform:uppercase;fill:var(--la-tone)}
.la-fig .la-name{font-family:var(--la-display);font-weight:400;
  fill:var(--la-title);letter-spacing:0}
.la-fig .la-cap{fill:var(--la-bodyc)}
.la-fig .la-stand{font-family:var(--la-mono);font-weight:500;
  letter-spacing:-.01em;fill:var(--la-quiet)}
.la-fig .la-status{font-family:var(--la-mono);font-weight:500;
  letter-spacing:-.01em;fill:var(--la-tone)}
.la-fig .la-st-l{fill:var(--la-accent)}
.la-fig .la-st-r{fill:var(--la-amber)}
.la-fig .la-modify{fill:var(--la-amber)}
.la-fig .la-tick{fill:none;stroke:var(--la-amber);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.la-fig .la-link{font-weight:600;fill:var(--la-tone)}
.la-fig .la-arrow{fill:none;stroke:var(--la-tone);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.la-fig .la-arclab{font-weight:600;text-transform:uppercase;fill:var(--la-tone)}
.la-fig .la-th{font-weight:600;text-transform:uppercase;fill:var(--la-quiet);
  font-size:13px}
.la-fig .la-thpick{fill:var(--la-amber)}
.la-fig .la-mkg{opacity:.7}
.la-fig .la-mk{fill:var(--la-title)}
.la-fig .la-mkslash{fill:var(--la-mkslash)}

/* ---------- the circuit ---------- */
.la-fig .la-arc{fill:none;stroke:var(--la-toneDim);stroke-width:1;
  vector-effect:non-scaling-stroke}
.la-fig .la-arc-out{--la-toneDim:var(--la-accentDim)}
.la-fig .la-arc-back{--la-toneDim:var(--la-amberDim)}
.la-fig .la-chev{fill:none;stroke:var(--la-tone);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.la-fig .la-portr{fill:var(--la-plate);stroke:var(--la-tone);stroke-width:1;
  vector-effect:non-scaling-stroke}
.la-fig .la-portc{fill:var(--la-tone)}
.la-fig .la-bloom{fill:none;stroke:var(--la-tone);stroke-width:1.4;
  stroke-opacity:0;transform-box:fill-box;transform-origin:center}

/* the comet tail: a short bright dash whose leading edge tracks the rider */
.la-fig .la-tail{fill:none;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:70 4000;stroke-dashoffset:70;opacity:0}
.la-fig .la-tail-out{stroke:var(--la-accent)}
.la-fig .la-tail-back{stroke:var(--la-amber)}

/* the rider — hidden unless the browser can put it on the path */
.la-fig .la-rider{display:none}
.la-fig .la-tokbox{fill:var(--la-card);stroke:var(--la-tone);stroke-width:1.3}
.la-fig .la-tokline{fill:none;stroke:var(--la-tone);stroke-width:1;
  stroke-linecap:round;opacity:.85}
.la-fig .la-tokstrike{fill:none;stroke:var(--la-tone);stroke-width:1.2;
  stroke-linecap:round}
@supports (offset-path:path('M0,0 L1,1')){
  .la-fig .la-rider{display:block;offset-rotate:0deg}
  .la-fig .la-riderd{offset-path:path('M396,176 C486,72 626,72 716,176 L716,296 C626,400 486,400 396,296 Z');
    filter:drop-shadow(0 0 9px var(--la-glowA))}
  .la-fig .la-riderm{offset-path:path('M104,194 C29.3333,234 29.3333,294 104,334 L256,334 C330.667,294 330.667,234 256,194 Z');
    filter:drop-shadow(0 0 8px var(--la-glowA))}
}

/* ---------- the 18s lap: WIDE ---------- */
.la-fig .la-lay-d .la-rider{animation:la-ride 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-tok-out{animation:la-tokout 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-tok-back{animation:la-tokback 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-tail-out{animation:la-tailout 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-tail-back{animation:la-tailback 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-st-r{animation:la-statr 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-st-l{animation:la-statl 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-modify{animation:la-mod 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-tick{animation:la-tick 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-bloom-r{animation:la-bloomr 18s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-d .la-bloom-l{animation:la-blooml 18s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--la-t0,0s)}

@keyframes la-ride{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes la-tokout{0%{opacity:1}42.644%{opacity:1}45.044%{opacity:0}92.644%{opacity:0}95.044%{opacity:1}100%{opacity:1}}
@keyframes la-tokback{0%{opacity:0}42.644%{opacity:0}45.044%{opacity:1}92.644%{opacity:1}95.044%{opacity:0}100%{opacity:0}}
@keyframes la-tailout{0%{stroke-dashoffset:70;opacity:1}37.688%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:1}38.088%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}99.9%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}100%{stroke-dashoffset:70;opacity:1}}
@keyframes la-tailback{0%{stroke-dashoffset:70;opacity:0}50%{stroke-dashoffset:70;opacity:1}87.688%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:1}88.088%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}100%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}}
@keyframes la-statr{0%{opacity:0}37.688%{opacity:0}39.188%{opacity:1}53%{opacity:1}56%{opacity:0}100%{opacity:0}}
@keyframes la-statl{0%{opacity:1}10%{opacity:1}14%{opacity:0}87.688%{opacity:0}89.188%{opacity:1}100%{opacity:1}}
@keyframes la-mod{0%{fill:var(--la-quiet)}37.688%{fill:var(--la-quiet)}39.188%{fill:var(--la-amber)}93.688%{fill:var(--la-amber)}96.688%{fill:var(--la-quiet)}100%{fill:var(--la-quiet)}}
@keyframes la-tick{0%{opacity:0}39.188%{opacity:0}40.688%{opacity:1}93.688%{opacity:1}96.688%{opacity:0}100%{opacity:0}}
@keyframes la-bloomr{0%{stroke-opacity:0;transform:scale(1)}43.444%{stroke-opacity:0;transform:scale(1)}43.844%{stroke-opacity:.55;transform:scale(1)}46.844%{stroke-opacity:0;transform:scale(2.1)}100%{stroke-opacity:0;transform:scale(1)}}
@keyframes la-blooml{0%{stroke-opacity:0;transform:scale(1)}93.444%{stroke-opacity:0;transform:scale(1)}93.844%{stroke-opacity:.55;transform:scale(1)}96.844%{stroke-opacity:0;transform:scale(2.1)}100%{stroke-opacity:0;transform:scale(1)}}

/* ---------- the 18s lap: STACKED (its own proportions) ---------- */
.la-fig .la-lay-m .la-rider{animation:la-ridem 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-tok-out{animation:la-tokoutm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-tok-back{animation:la-tokbackm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-tail-out{animation:la-tailoutm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-tail-back{animation:la-tailbackm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-st-r{animation:la-statrm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-st-l{animation:la-statlm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-modify{animation:la-modm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-tick{animation:la-tickm 18s linear infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-bloom-r{animation:la-bloomrm 18s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--la-t0,0s)}
.la-fig .la-lay-m .la-bloom-l{animation:la-bloomlm 18s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--la-t0,0s)}

@keyframes la-ridem{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes la-tokoutm{0%{opacity:1}37.628%{opacity:1}40.028%{opacity:0}87.628%{opacity:0}90.028%{opacity:1}100%{opacity:1}}
@keyframes la-tokbackm{0%{opacity:0}37.628%{opacity:0}40.028%{opacity:1}87.628%{opacity:1}90.028%{opacity:0}100%{opacity:0}}
@keyframes la-tailoutm{0%{stroke-dashoffset:70;opacity:1}27.655%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:1}28.055%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}99.9%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}100%{stroke-dashoffset:70;opacity:1}}
@keyframes la-tailbackm{0%{stroke-dashoffset:70;opacity:0}50%{stroke-dashoffset:70;opacity:1}77.655%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:1}78.055%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}100%{stroke-dashoffset:calc(70px - var(--la-L)*1px);opacity:0}}
@keyframes la-statrm{0%{opacity:0}27.655%{opacity:0}29.155%{opacity:1}53%{opacity:1}56%{opacity:0}100%{opacity:0}}
@keyframes la-statlm{0%{opacity:1}10%{opacity:1}14%{opacity:0}77.655%{opacity:0}79.155%{opacity:1}100%{opacity:1}}
@keyframes la-modm{0%{fill:var(--la-quiet)}27.655%{fill:var(--la-quiet)}29.155%{fill:var(--la-amber)}83.655%{fill:var(--la-amber)}86.655%{fill:var(--la-quiet)}100%{fill:var(--la-quiet)}}
@keyframes la-tickm{0%{opacity:0}29.155%{opacity:0}30.655%{opacity:1}83.655%{opacity:1}86.655%{opacity:0}100%{opacity:0}}
@keyframes la-bloomrm{0%{stroke-opacity:0;transform:scale(1)}38.428%{stroke-opacity:0;transform:scale(1)}38.828%{stroke-opacity:.55;transform:scale(1)}41.828%{stroke-opacity:0;transform:scale(2.1)}100%{stroke-opacity:0;transform:scale(1)}}
@keyframes la-bloomlm{0%{stroke-opacity:0;transform:scale(1)}88.428%{stroke-opacity:0;transform:scale(1)}88.828%{stroke-opacity:.55;transform:scale(1)}91.828%{stroke-opacity:0;transform:scale(2.1)}100%{stroke-opacity:0;transform:scale(1)}}

/* ---------- reduced motion: the complete, resolved diagram, held ---------- */
@media (prefers-reduced-motion:reduce){
  .la-fig .la-lay-d .la-rider,.la-fig .la-lay-d .la-tok-out,.la-fig .la-lay-d .la-tok-back,.la-fig .la-lay-d .la-tail-out,.la-fig .la-lay-d .la-tail-back,.la-fig .la-lay-d .la-st-r,.la-fig .la-lay-d .la-st-l,.la-fig .la-lay-d .la-modify,.la-fig .la-lay-d .la-tick,.la-fig .la-lay-d .la-bloom-r,.la-fig .la-lay-d .la-bloom-l{animation:none}
  .la-fig .la-lay-m .la-rider,.la-fig .la-lay-m .la-tok-out,.la-fig .la-lay-m .la-tok-back,.la-fig .la-lay-m .la-tail-out,.la-fig .la-lay-m .la-tail-back,.la-fig .la-lay-m .la-st-r,.la-fig .la-lay-m .la-st-l,.la-fig .la-lay-m .la-modify,.la-fig .la-lay-m .la-tick,.la-fig .la-lay-m .la-bloom-r,.la-fig .la-lay-m .la-bloom-l{animation:none}
  .la-fig .la-rider{display:none}
  .la-fig .la-tail{opacity:0}
}