/* Guide visual kit v2: every v1 rule unchanged, plus the kx- motion primitives at the end.
   Guide visual kit v1. Loaded after guide-v1.css (or a page's inline base).
   Clamshell language: black ground, solid dark panels, one blue, Geist + Geist Mono,
   line-art MacBook profiles. No hairline dividers, no micro-labels, no gradients. */
:root{--kit-s1:#0c0d0f;--kit-s2:#131417;--kit-s3:#1a1c20;--kit-tx:#F4F5F6;--kit-dim:#a4aab2;--kit-mute:#6d727a;
  --kit-blue:#3A63D4;--kit-blue-hi:#5b80ea;--kit-blue-deep:#10193a;--kit-red:#d9625a;--kit-amber:#d6a445;--kit-r:14px;--kit-gap:14px}

/* Hero figure: line-art MacBook profile on a solid panel */
.kit-hero{margin:30px 0 10px;background:var(--kit-s1);border-radius:var(--kit-r);padding:28px 26px 24px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center}
.kit-hero svg{display:block;width:100%;height:auto;max-height:230px}
.kit-hero .kit-cap{margin:0;color:var(--kit-dim);font-size:15px;line-height:1.55}
.kit-hero .kit-cap strong{display:block;color:var(--kit-tx);font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.kit-hero.kit-solo{grid-template-columns:1fr}
.kit-hero.kit-solo svg{max-height:210px}

/* SVG strokes and fills */
.l-base{fill:none;stroke:#8d939b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-lid{fill:none;stroke:var(--kit-tx);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-on{fill:none;stroke:var(--kit-blue-hi);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-off{fill:none;stroke:var(--kit-mute);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-fan{fill:none;stroke:#c9ced6;stroke-width:3;stroke-linecap:round}
.o1{opacity:.12}.o2{opacity:.22}.o3{opacity:.36}.o4{opacity:.55}
.chip{fill:var(--kit-blue-deep)}
.wedge{fill:var(--kit-blue)}
.w1{opacity:.05}.w2{opacity:.09}.w3{opacity:.14}.w4{opacity:.22}
.t-chip{fill:#cfdcff;font-family:"Geist","-apple-system",sans-serif;font-size:18px;font-weight:600}
.l-thin{fill:none;stroke:var(--kit-mute);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 7}
.f-on{fill:var(--kit-blue-hi)}
.f-soft{fill:var(--kit-blue);opacity:.22}
.f-off{fill:var(--kit-mute)}
.f-bad{fill:var(--kit-red)}
.f-tx{fill:var(--kit-tx)}
.f-warn{fill:var(--kit-amber)}
.f-dim{fill:#2a2d33}
.l-warn{fill:none;stroke:var(--kit-amber);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-bad{fill:none;stroke:var(--kit-red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.l-dim{fill:none;stroke:#3a3e45;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-svg-lg{fill:var(--kit-tx);font-family:"Geist","-apple-system",sans-serif;font-size:18px;font-weight:600}
.t-svg{fill:var(--kit-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px}
.t-svg-on{fill:var(--kit-blue-hi);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:kit-pulse 2.4s ease-in-out infinite}
  .pulse.d2{animation-delay:.4s}.pulse.d3{animation-delay:.8s}
  @keyframes kit-pulse{0%,100%{opacity:.25}50%{opacity:1}}
}

/* Answer panel: the direct answer plus key facts */
.kit-answer{background:var(--kit-blue-deep);border-radius:var(--kit-r);padding:24px;margin:26px 0 8px}
.kit-answer > p{color:var(--kit-tx);font-size:18px;line-height:1.55;margin:0;max-width:62ch}
.kit-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
@media(max-width:720px){.kit-facts{grid-template-columns:1fr 1fr}}
.kit-fact{background:rgba(0,0,0,.28);border-radius:10px;padding:14px 14px 12px}
.kit-fact b{display:block;color:var(--kit-tx);font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.kit-fact span{display:block;color:var(--kit-dim);font-size:13.5px;line-height:1.4;margin-top:5px}

/* Flow: a short left-to-right chain of states */
.kit-flow{display:flex;align-items:stretch;gap:10px;margin:22px 0 18px}
.kit-flow .n{flex:1 1 0;min-width:0;background:var(--kit-s2);border-radius:12px;padding:14px 16px}
.kit-flow .n b{display:block;color:var(--kit-tx);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.kit-flow .n span{display:block;color:var(--kit-dim);font-size:13.5px;font-weight:400;line-height:1.45;margin-top:4px}
.kit-flow .n.on{background:var(--kit-blue-deep)}
.kit-flow .n.on b{color:#cfdcff}
.kit-flow .n.on span{color:#aab8dc}
.kit-flow .n.bad b{color:#f0a19b}
.kit-flow .a{flex:none;align-self:center;color:var(--kit-mute);font-family:"Geist Mono",monospace;font-size:18px}

/* Timeline: a short sequence of states, stacked */
.kit-timeline{list-style:none;counter-reset:none;display:flex;flex-direction:column;gap:8px;margin:20px 0 18px;padding:0}
.kit-timeline > li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:center;background:var(--kit-s1);border-radius:12px;padding:14px 18px;margin:0}
.kit-timeline > li::before{display:none}
.kit-timeline > li.on{background:var(--kit-blue-deep)}
.kit-timeline svg{width:40px;height:40px;display:block}
.kit-timeline b{display:block;color:var(--kit-tx);font-size:16px;font-weight:600;letter-spacing:-.01em}
.kit-timeline span{display:block;color:var(--kit-dim);font-size:14.5px;line-height:1.45;margin-top:2px}
.kit-timeline li.on span{color:#aab8dc}

/* Choice grid: pick by situation */
.kit-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kit-gap);margin:22px 0 14px}
.kit-choice{background:var(--kit-s1);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.kit-choice.pick{background:var(--kit-blue-deep)}
.kit-choice h3{margin:0 0 6px !important;font-size:16px !important;color:var(--kit-tx)}
.kit-choice p{margin:0 !important;font-size:14.5px}
.kit-choice .go{display:block;margin-top:auto;padding-top:10px;color:var(--kit-tx);font-weight:600;font-size:14.5px}

/* Steps */
.kit-steps{list-style:none;counter-reset:kit;display:flex;flex-direction:column;gap:12px;margin:18px 0 16px;padding:0}
.kit-steps > li{margin:0;counter-increment:kit;position:relative;padding:16px 18px 16px 62px;background:var(--kit-s1);border-radius:12px;color:var(--kit-dim)}
.kit-steps > li::before{content:counter(kit);position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--kit-blue);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.kit-steps > li strong{color:var(--kit-tx)}
.kit-steps > li pre{margin:10px 0 2px}

/* Callouts */
.kit-note{border-radius:12px;padding:16px 18px;margin:18px 0;background:var(--kit-s2);color:var(--kit-dim);display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.kit-note svg{width:22px;height:22px;margin-top:2px}
.kit-note p{margin:0 !important}
.kit-note strong{color:var(--kit-tx)}
.kit-note.warn{background:#1d1512}
.kit-note.warn .ic{fill:var(--kit-amber)}
.kit-note .ic{fill:var(--kit-blue-hi)}

/* Keycap */
kbd{font-family:"Geist",-apple-system,sans-serif;font-size:.86em;font-weight:600;color:var(--kit-tx);background:var(--kit-s3);border-radius:6px;padding:.1em .5em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);white-space:nowrap}

/* Verdict marks for tables */
.y,.n,.m{font-weight:700;white-space:nowrap}
.y{color:#8fb0ff}.n{color:#f0a19b}.m{color:var(--kit-amber)}

/* Scorecard: compact side-by-side verdicts */
.kit-score{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--kit-gap);margin:22px 0 14px}
.kit-score .c{background:var(--kit-s1);border-radius:12px;padding:18px}
.kit-score .c.pick{background:var(--kit-blue-deep)}
.kit-score .c h3{margin:0 0 4px !important;font-size:17px !important}
.kit-score .c .price{color:var(--kit-tx);font-size:14.5px;margin:0 0 10px}
.kit-score .c ul{gap:6px;margin:0}
.kit-score .c li{font-size:14px;padding-left:0}
.kit-score .c li::before{display:none}

/* FAQ accordion */
.kit-faq{display:flex;flex-direction:column;gap:8px;margin:16px 0 10px}
.kit-faq details{background:var(--kit-s1);border-radius:12px}
.kit-faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;position:relative}
.kit-faq summary::-webkit-details-marker{display:none}
.kit-faq summary h3{margin:0 !important;font-size:16px !important;font-weight:600;color:var(--kit-tx);line-height:1.4}
.kit-faq summary::after{content:"+";position:absolute;right:18px;top:13px;color:var(--kit-dim);font-size:22px;line-height:1;transition:transform .2s var(--ease,ease)}
.kit-faq details[open] summary::after{transform:rotate(45deg);color:var(--kit-tx)}
.kit-faq summary:hover h3{color:#fff}
.kit-faq summary:hover::after{color:var(--kit-tx)}
.kit-faq details > p{padding:0 18px 16px;margin:0 !important;font-size:15.5px}

/* CTA with the clam */
.cta-card .clam{width:48px;height:auto;flex:none}

@media(max-width:560px){
  .kit-hero{grid-template-columns:1fr;padding:22px 18px 18px;margin-left:-22px;margin-right:-22px;border-radius:0}
  .kit-answer{margin-left:-22px;margin-right:-22px;border-radius:0;padding:22px}
  .kit-answer > p{font-size:16.5px}
  .kit-facts{grid-template-columns:1fr 1fr}
  .kit-fact b{font-size:17px;white-space:normal}
  .kit-flow{flex-direction:column}
  .kit-flow .a{transform:rotate(90deg);align-self:flex-start;margin-left:18px}
  .kit-steps > li{padding-left:56px}
}

/* Long identifiers wrap instead of widening the page */
main :not(pre) > code{white-space:nowrap}

/* Geist Mono is not self-hosted: use the system monospace for code everywhere */
main code,main pre code,header.page code,.kit-flow .a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Scorecards: 3 in a row or a single column, never 2+1 */
@media(max-width:720px){.kit-score{grid-auto-flow:row;grid-template-columns:1fr}}

/* CTA on phones: clam and text share a row, the button wraps below */
@media(max-width:560px){.cta-card p{flex:1 1 180px}}

/* Tables: keep command chips whole, zebra rows instead of hairlines */
.comparison th code,.comparison td code{white-space:nowrap}
@media(min-width:561px){.comparison tbody th{min-width:150px}}
.comparison th,.comparison td{border-bottom:0}
.comparison tbody tr:nth-child(even) th,.comparison tbody tr:nth-child(even) td{background:#101114}
.comparison .recommended th,.comparison .recommended td{background:#10193a}

/* Spacing after a hero */
.kit-hero + p{margin-top:28px}

/* Guide index: clickable cards say so with an underlined title; static cards stay plain */
a.guide-link.kit-choice h3{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
a.guide-link.kit-choice:hover h3{text-decoration-color:rgba(255,255,255,.8)}

/* Hero stacks before the illustration gets too small for its labels */
@media(max-width:760px){.kit-hero{grid-template-columns:1fr}.kit-hero svg{max-height:240px}}

/* Tables: one-line headers; fixed layout when a colgroup sets widths */
.comparison thead th{white-space:nowrap}
.comparison.fixed{table-layout:fixed}
@media(min-width:1100px){.comparison-wrap.wide{margin-left:-110px;margin-right:-110px}}

/* Phones: each table row becomes a stacked card, labelled by data-label */
@media(max-width:560px){
  .comparison-wrap{overflow:visible;background:none;margin-left:0;margin-right:0}
  .comparison{min-width:0}
  .comparison thead{display:none}
  .comparison,.comparison tbody,.comparison tr,.comparison td,.comparison tbody th{display:block;width:auto}
  .comparison tbody tr{background:var(--kit-s1);border-radius:12px;padding:14px 16px;margin-bottom:10px}
  .comparison tbody tr.recommended{background:var(--kit-blue-deep)}
  .comparison tbody tr:nth-child(even) th,.comparison tbody tr:nth-child(even) td,.comparison .recommended th,.comparison .recommended td{background:none}
  .comparison tbody th{padding:0 0 8px;font-size:16px}
  .comparison td{padding:6px 0}
  .comparison td::before{content:attr(data-label);display:block;color:var(--kit-tx);font-weight:600;font-size:13.5px;margin-bottom:1px}
  .comparison td code{white-space:normal}
}
.comparison col.c10{width:10%}.comparison col.c12{width:12%}.comparison col.c16{width:16%}.comparison col.c18{width:18%}.comparison col.c19{width:19%}.comparison col.c26{width:26%}.comparison col.c27{width:27%}

/* ===== v2 motion primitives (kx-). Inline SVG + these classes only: no style="" attributes (CSP),
   no JS. Reuse the v1 stroke/fill classes (l-base, l-lid, l-on, f-on, f-dim, t-svg...) for shapes.
   Every primitive's static rule IS its end state; motion exists only under
   prefers-reduced-motion:no-preference. Shared clock: --kx-cycle (8s), so lid, shade and split stay in sync.
   kx-fig     Figure panel: <figure class="kx-fig"><svg viewBox=...>...</svg><figcaption><strong>Head.</strong> Body.</figcaption></figure>
              Add .kx-pair on the figure to place two <svg> side by side (stacks on phones).
   kx-lid     Lid closing loop. Draw the lid CLOSED, lying on the base, hinge at its LEFT end:
              <rect class="l-base" x="60" y="150" width="300" height="14" rx="7"/>
              <g class="kx-lid"><line x1="66" y1="143" x2="354" y2="143"/></g>
              The lid opens up to the right, closes, holds closed (turns blue = armed), reopens.
   kx-work    "Still working" dots on the base: <circle class="kx-work" .../> plus .kx-w2/.kx-w3 for stagger
              (.kx-w2/.kx-w3 also stagger kx-go).
   kx-shade   Screen goes dark: a black rect drawn OVER the screen content, synced to kx-lid closing:
              <rect class="kx-shade" .../>. Activity drawn after it (kx-ln, kx-work) keeps moving on top.
   kx-ln      Terminal typing: lines appear one by one, loop. Rects grow left to right, <text> fades in.
              Order with .kx-t1 ... .kx-t8. <rect class="kx-ln kx-t1 f-dim" .../> or <text class="kx-ln kx-t2 t-svg">.
              .kx-caret blinks (a small rect after the last line).
   kx-arc     Gauge: a path drawn with pathLength="100" (semicircle works best) over a track:
              <path class="kx-track" pathLength="100" d="..."/><path class="kx-arc kx-v70 kx-amber" pathLength="100" d="..."/>
              Value .kx-v10 ... .kx-v100. Colour: default blue, .kx-amber or .kx-red (sweeps from blue).
   kx-bar     Battery/level meter: <rect class="kx-bar kx-v60 f-on" .../> drawn at FULL width; it grows to 60%.
   kx-stop    A side that stops: dots/progress turn muted red and dim at 35% of the cycle; static = stopped.
   kx-go      A side that keeps going: blue dots that keep pulsing; static = lit.
   kx-prog    Progress rect drawn at full width: .kx-stall stops at 35%, .kx-run reaches 100%.
   kx-zz      Elements (e.g. "z" text, a moon) that appear once the stop side sleeps; static = shown.
   kx-flow    Dots travelling along ANY path or line between nodes: <path class="kx-flow" d="..."/>;
              .kx-rev reverses, .kx-cut is a broken, static, red link. Nodes: v1 shapes, add .kx-ping to pulse.
   kx-switch  Toggle: <rect class="kx-track-sw" width="56" height="30" rx="15"/> + <circle class="kx-knob" r="11"
              cx="track x + 15"/> drawn in the OFF position; it slides 26 units to ON and the track turns blue.
   kx-panel   Solid screen/window fill for SVG panels (no strokes needed): <rect class="kx-panel" rx="10" .../>.
   kx-cta-note  Microcopy + secondary buy link as the last <p> inside .cta-card (see rule below).
   kx-dot     Status dot that flips from grey to blue with the switch; add a <circle class="kx-ring"> behind it. */
:root{--kx-cycle:8s;--kx-type:6s}

.kx-fig{margin:28px 0 10px;background:var(--kit-s1);border-radius:var(--kit-r);padding:26px 24px 22px}
.kx-fig svg{display:block;width:100%;height:auto;max-height:260px;margin:0 auto}
.kx-fig figcaption{margin:18px 0 0;color:var(--kit-dim);font-size:15px;line-height:1.55;max-width:62ch}
.kx-fig figcaption strong{color:var(--kit-tx);font-weight:600}
.kx-fig.kx-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.kx-fig.kx-pair figcaption{grid-column:1 / -1}
.kit-hero + .kx-fig,.kx-fig + p{margin-top:28px}
/* CTA microcopy line under the button: <p class="kx-cta-note">Apple Silicon, macOS 14+. Notarized by Apple. 3.6 MB. <a href="/buy/home-pricing">Or buy now, $9.99</a></p> */
.cta-card .kx-cta-note{flex:1 1 100%;margin:-6px 0 0;color:var(--kit-dim);font-size:14px}
.cta-card .kx-cta-note a{color:var(--kit-tx);text-decoration:underline;text-decoration-color:rgba(255,255,255,.34);text-underline-offset:3px;white-space:nowrap}
.cta-card .kx-cta-note a:hover{text-decoration-color:rgba(255,255,255,.8)}
@media(max-width:560px){
  .kx-fig{padding:22px 18px 18px;margin-left:-22px;margin-right:-22px;border-radius:0}
  .kx-fig.kx-pair{grid-template-columns:1fr}
  .kx-fig:not(.kx-pair) .t-svg,.kx-fig:not(.kx-pair) .t-svg-on{font-size:20px}
  .kx-fig:not(.kx-pair) .t-svg-lg{font-size:21px}
  .kit-hero .t-svg,.kit-hero .t-svg-on{font-size:18px}
  .kit-hero .t-svg-lg,.kit-hero .t-chip{font-size:19px}
}
/* Single figures stay near the type scale on wide columns; narrow (300-340) viewBoxes get a tighter cap */
.kx-fig:not(.kx-pair) svg{max-width:480px;margin-inline:auto}
.kx-fig:not(.kx-pair) svg:is([viewBox*=" 260 "],[viewBox*=" 280 "],[viewBox*=" 300 "],[viewBox*=" 310 "],[viewBox*=" 320 "],[viewBox*=" 340 "]){max-width:360px}
.kx-fig.kx-pair svg{max-width:300px}
.kit-hero svg{max-width:480px;margin-inline:auto}

/* Footer links wrap on phones once the row grows past the viewport */
.footer-links{flex-wrap:wrap;row-gap:8px}

/* Phones and small tablets: long inline code breaks instead of widening the page */
@media(max-width:760px){
  main p code,main li code,main td code,main dd code,main figcaption code{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
}

/* Static end states */
.kx-lid{transform-box:fill-box;transform-origin:0 50%}
.kx-lid > *{fill:none;stroke:var(--kit-blue-hi);stroke-width:3;stroke-linecap:round}
.kx-work,.kx-go{fill:var(--kit-blue-hi)}
.kx-panel{fill:var(--kit-s2)}
.kx-shade{fill:#000;opacity:.94}
.kx-ln{transform-box:fill-box;transform-origin:0 50%}
.kx-caret{fill:var(--kit-blue-hi)}
.kx-track{fill:none;stroke:var(--kit-s3);stroke-width:14;stroke-linecap:round}
.kx-arc{fill:none;stroke:var(--kit-blue-hi);stroke-width:14;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:0}
.kx-arc.kx-amber{stroke:var(--kit-amber)}.kx-arc.kx-red{stroke:var(--kit-red)}
.kx-arc.kx-v10{stroke-dashoffset:90}.kx-arc.kx-v20{stroke-dashoffset:80}.kx-arc.kx-v30{stroke-dashoffset:70}
.kx-arc.kx-v40{stroke-dashoffset:60}.kx-arc.kx-v50{stroke-dashoffset:50}.kx-arc.kx-v60{stroke-dashoffset:40}
.kx-arc.kx-v70{stroke-dashoffset:30}.kx-arc.kx-v80{stroke-dashoffset:20}.kx-arc.kx-v90{stroke-dashoffset:10}
.kx-bar{transform-box:fill-box;transform-origin:0 50%}
.kx-bar.kx-v10{transform:scaleX(.1)}.kx-bar.kx-v20{transform:scaleX(.2)}.kx-bar.kx-v30{transform:scaleX(.3)}
.kx-bar.kx-v40{transform:scaleX(.4)}.kx-bar.kx-v50{transform:scaleX(.5)}.kx-bar.kx-v60{transform:scaleX(.6)}
.kx-bar.kx-v70{transform:scaleX(.7)}.kx-bar.kx-v80{transform:scaleX(.8)}.kx-bar.kx-v90{transform:scaleX(.9)}
.kx-stop{fill:var(--kit-red);opacity:.5}
.kx-prog{transform-box:fill-box;transform-origin:0 50%}
.kx-prog.kx-stall{fill:var(--kit-red);opacity:.6;transform:scaleX(.35)}
.kx-prog.kx-run{fill:var(--kit-blue-hi)}
.kx-zz{fill:var(--kit-red);opacity:.8}
.kx-flow{fill:none;stroke:var(--kit-blue-hi);stroke-width:6;stroke-linecap:round;stroke-dasharray:.1 16}
.kx-flow.kx-cut{stroke:var(--kit-red);opacity:.55}
.kx-ping{transform-box:fill-box;transform-origin:50% 50%}
.kx-track-sw{fill:var(--kit-blue)}
.kx-knob{fill:var(--kit-tx);transform:translateX(26px)}
.kx-dot{fill:var(--kit-blue-hi)}
.kx-ring{fill:var(--kit-blue);opacity:.22;transform-box:fill-box;transform-origin:50% 50%}

@media (prefers-reduced-motion:no-preference){
  .kx-lid{animation:kx-lid var(--kx-cycle) cubic-bezier(.45,0,.2,1) infinite}
  .kx-lid > *{animation:kx-lid-c var(--kx-cycle) linear infinite}
  @keyframes kx-lid{0%,12%{transform:rotate(-68deg)}30%,82%{transform:rotate(0)}96%,100%{transform:rotate(-68deg)}}
  @keyframes kx-lid-c{0%,26%{stroke:var(--kit-tx)}32%,80%{stroke:var(--kit-blue-hi)}86%,100%{stroke:var(--kit-tx)}}

  .kx-work,.kx-go{animation:kx-pulse 1.6s ease-in-out infinite}
  .kx-w2{animation-delay:.27s}.kx-w3{animation-delay:.54s}
  @keyframes kx-pulse{0%,100%{opacity:.25}50%{opacity:1}}

  .kx-shade{animation:kx-shade var(--kx-cycle) ease-in-out infinite}
  @keyframes kx-shade{0%,26%{opacity:0}36%,80%{opacity:.94}90%,100%{opacity:0}}

  /* One shared cycle: line N appears at its stagger offset, all lines hold together, then fade together */
  .kx-ln{animation:kx-type1 var(--kx-type) ease-out infinite both}
  text.kx-ln{animation-name:kx-type-t1}
  .kx-ln.kx-t2{animation-name:kx-type2} text.kx-ln.kx-t2{animation-name:kx-type-t2}
  .kx-ln.kx-t3{animation-name:kx-type3} text.kx-ln.kx-t3{animation-name:kx-type-t3}
  .kx-ln.kx-t4{animation-name:kx-type4} text.kx-ln.kx-t4{animation-name:kx-type-t4}
  .kx-ln.kx-t5{animation-name:kx-type5} text.kx-ln.kx-t5{animation-name:kx-type-t5}
  .kx-ln.kx-t6{animation-name:kx-type6} text.kx-ln.kx-t6{animation-name:kx-type-t6}
  .kx-ln.kx-t7{animation-name:kx-type7} text.kx-ln.kx-t7{animation-name:kx-type-t7}
  .kx-ln.kx-t8{animation-name:kx-type8} text.kx-ln.kx-t8{animation-name:kx-type-t8}
  @keyframes kx-type1{0%{transform:scaleX(0);opacity:1}7.0%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t1{0%{opacity:0}4.0%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type2{0%,5.83%{transform:scaleX(0);opacity:1}12.83%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t2{0%,5.83%{opacity:0}9.83%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type3{0%,11.67%{transform:scaleX(0);opacity:1}18.67%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t3{0%,11.67%{opacity:0}15.67%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type4{0%,17.5%{transform:scaleX(0);opacity:1}24.5%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t4{0%,17.5%{opacity:0}21.5%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type5{0%,23.33%{transform:scaleX(0);opacity:1}30.33%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t5{0%,23.33%{opacity:0}27.33%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type6{0%,29.17%{transform:scaleX(0);opacity:1}36.17%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t6{0%,29.17%{opacity:0}33.17%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type7{0%,35.0%{transform:scaleX(0);opacity:1}42.0%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t7{0%,35.0%{opacity:0}39.0%,88%{opacity:1}96%,100%{opacity:0}}
  @keyframes kx-type8{0%,40.83%{transform:scaleX(0);opacity:1}47.83%{transform:scaleX(1)}88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
  @keyframes kx-type-t8{0%,40.83%{opacity:0}44.83%,88%{opacity:1}96%,100%{opacity:0}}
  .kx-caret{animation:kx-blink 1s steps(1) infinite}
  @keyframes kx-blink{50%{opacity:0}}

  .kx-arc{animation:kx-arc 4.5s cubic-bezier(.4,0,.2,1) infinite alternate}
  .kx-arc.kx-amber,.kx-arc.kx-red{animation-name:kx-arc,kx-heat}
  @keyframes kx-arc{0%,15%{stroke-dashoffset:100}}
  @keyframes kx-heat{0%,40%{stroke:var(--kit-blue-hi)}}
  .kx-bar{animation:kx-bar 4.5s cubic-bezier(.4,0,.2,1) infinite alternate}
  @keyframes kx-bar{0%,15%{transform:scaleX(0)}}

  .kx-stop{animation:kx-stop var(--kx-cycle) ease-in-out infinite}
  @keyframes kx-stop{0%,30%{fill:var(--kit-blue-hi);opacity:1}15%{opacity:.35}36%,92%{fill:var(--kit-red);opacity:.5}100%{fill:var(--kit-blue-hi);opacity:1}}
  .kx-prog.kx-stall{animation:kx-stall var(--kx-cycle) linear infinite}
  .kx-prog.kx-run{animation:kx-run var(--kx-cycle) linear infinite}
  @keyframes kx-stall{0%{transform:scaleX(0);fill:var(--kit-blue-hi);opacity:1}35%{transform:scaleX(.35);fill:var(--kit-blue-hi);opacity:1}40%,92%{transform:scaleX(.35);fill:var(--kit-red);opacity:.6}100%{transform:scaleX(.35);fill:var(--kit-red);opacity:0}}
  @keyframes kx-run{0%{transform:scaleX(0)}88%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
  .kx-zz{animation:kx-zz var(--kx-cycle) ease-in-out infinite}
  @keyframes kx-zz{0%,36%{opacity:0}44%,90%{opacity:.8}96%,100%{opacity:0}}

  .kx-flow{animation:kx-flow 1.1s linear infinite}
  .kx-flow.kx-rev{animation-direction:reverse}
  .kx-flow.kx-cut{animation:none}
  @keyframes kx-flow{to{stroke-dashoffset:-16.1}}
  .kx-ping{animation:kx-ping 2.2s ease-in-out infinite}
  @keyframes kx-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

  .kx-track-sw{animation:kx-sw var(--kx-cycle) ease-in-out infinite}
  .kx-knob{animation:kx-knob var(--kx-cycle) cubic-bezier(.5,0,.2,1) infinite}
  .kx-dot{animation:kx-dot var(--kx-cycle) ease-in-out infinite}
  .kx-ring{animation:kx-ring var(--kx-cycle) ease-out infinite}
  @keyframes kx-sw{0%,24%{fill:var(--kit-s3)}30%,86%{fill:var(--kit-blue)}92%,100%{fill:var(--kit-s3)}}
  @keyframes kx-knob{0%,22%{transform:translateX(0)}30%,86%{transform:translateX(26px)}94%,100%{transform:translateX(0)}}
  @keyframes kx-dot{0%,26%{fill:var(--kit-mute)}32%,86%{fill:var(--kit-blue-hi)}92%,100%{fill:var(--kit-mute)}}
  @keyframes kx-ring{0%,30%{opacity:0;transform:scale(.6)}40%{opacity:.35;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.5)}}
}

/* Recommended pick: Clamshell column (pick-first tables) or row (.recommended) */
.comparison thead th .y{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--kit-blue);color:#fff;font-size:12.5px;font-weight:600;vertical-align:1px}
.comparison.pick-first thead th:nth-child(2){background:#10193a;color:var(--kit-tx)}
.comparison.pick-first tbody td:nth-of-type(1),.comparison.pick-first tbody tr:nth-child(even) td:nth-of-type(1){background:#10193a}
@media(max-width:560px){.comparison.pick-first tbody td:nth-of-type(1){border-radius:10px}}
.comparison td code{white-space:normal;overflow-wrap:break-word}