/* Hero motion visual (Sankey, Yuri 29 Oct). Built in hero-lab/sankey-3; driven by hero/sankey.js.
   Only the visual's own rules: page fonts, tokens, header and hero copy come from the site's CSS. */
.cx-mount { --butter-deep: #e6d42e; min-width: 0; }
.cx-mount .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
figure.cx { margin: 0; }
/* ---------- favicons from the search's own sprite ---------- */
.cx .fav { --fs: 18px; display: inline-block; flex: none; width: var(--fs); height: var(--fs); border-radius: 4px; background-image: var(--cx-atlas, url(atlas.webp)); background-repeat: no-repeat;
  background-size: calc(var(--fs) * var(--ac, 10)) calc(var(--fs) * var(--ar, 12));
  background-position: calc(var(--fs) * var(--c, 0) * -1) calc(var(--fs) * var(--r, 0) * -1); vertical-align: middle; }

/* ---------- the visual ---------- */
/* --cardP / --textP / --markP / --iconP are driven frame by frame from combo.js;
   the defaults below are the finished state, so the card reads without JS. */
.cx { --cardP: 1; --textP: 1; --markP: 1; --iconP: 1; position: relative; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); padding: 20px 22px 22px; }
.cx-head { display: flex; align-items: center; gap: 10px; min-height: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cx-chip { flex: none; font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--butter); border-radius: 4px; padding: 6px 8px 5px; }
.cx-title { font: 400 15.5px/1.35 var(--sans); letter-spacing: -.005em; }
.cx-title b { font-weight: 600; }

/* the opening: matching pages | dashed break | pages checked (v2's two zones) */
.cx-flow { position: relative; height: 380px; margin-top: 16px; }
.cx-svg { position: absolute; left: 0; top: 0; overflow: visible; display: block; }
.cx-svg .zone { fill: var(--ground); }
.cx-svg .brk { stroke: #b9b9b1; stroke-width: 1.5; stroke-dasharray: 4 5; }
.cx-svg .bar { fill: var(--ink); }
.cx-col { position: absolute; left: 0; top: 0; }
.cx-cn { display: block; font: 700 22px/22px var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cx-ct { display: block; margin-top: 5px; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.cx-ct > span { display: block; }
.cx-ct b { font-weight: 600; color: var(--ink); }
.col-all .cx-cn { font-size: 18px; color: var(--ink-2); }
.col-all .cx-ct { font-size: 12px; color: var(--muted); }
.col-all .cx-ct b { font: 700 12px var(--mono); color: var(--ink-2); }
.cx-arrow { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.cx-arrow svg { width: 12px; height: 12px; fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cx-flow.is-mob .cx-col { display: flex; align-items: baseline; gap: 9px; }
.cx-flow.is-mob .cx-ct { margin: 0; }
.cx-flow.is-mob .cx-ct > span { display: inline; }
.cx-flow.is-mob .col-all .cx-cn { font-size: 16px; line-height: 1; }
.cx-flow.is-mob .cx-arrow { width: 20px; height: 20px; }
.cx-flow.is-mob .cx-arrow svg { transform: rotate(90deg); }
.cx-svg .slot { fill: #efefea; }
.cx-svg .s-other { fill: #f4f4f0; }
.cx-svg .s-consider { fill: #fbf3b0; }
.cx-svg .b-consider { fill: rgba(247, 232, 87, .9); }
.cx-svg .b-linked, .cx-svg .b-competes { fill: #e4e4de; }
.cx-svg .b-other { fill: #f1f1ec; }
.cx-svg .n-consider { fill: var(--butter-deep); }
.cx-svg .n-linked, .cx-svg .n-competes { fill: #b7b7af; }
.cx-svg .n-other { fill: #dcdcd5; }

.cx-lab { position: absolute; left: 0; top: 0; }
.cx-lh { display: flex; align-items: baseline; }
.cx-num { flex: none; width: 38px; font: 700 18px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cx-lt { font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.cx-ls { display: flex; align-items: center; gap: 8px; min-height: 18px; margin: 7px 0 0 38px; font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; }
.cx-strip { display: inline-flex; gap: 3px; }
.cx-strip:empty { display: none; }
.cx-strip .fav { --fs: 17px; }
.cx-strip .fav.pop { animation: pop .45s var(--ease) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cx-ai { display: inline-block; margin-left: 4px; padding: 3px 6px; border-radius: 999px; background: var(--ink); color: var(--butter); font: 700 9.5px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.lab-other .cx-num { font-size: 15px; color: var(--faint); }
.lab-consider .cx-lh { align-items: center; }
.lab-consider .cx-num { font-size: 26px; letter-spacing: -.05em; }
.cx-pill { font: 600 15px/1 var(--sans); background: var(--butter); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 8px 5px; white-space: nowrap; }
.lab-consider .cx-ls { margin-top: 8px; color: var(--ink-2); }
.cx-strip .fav.picked { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }

/* favicons in flight (v2 look) */
.cx-fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cx-fly { position: absolute; left: 0; top: 0; will-change: transform, opacity; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.cx-fly.quiet { filter: grayscale(1); box-shadow: none; }
.cx-fly.is-pick { border-radius: 5px; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink), 3px 4px 0 1.5px var(--butter); }

/* the card: Astra's lower part, built from the same search */
.cx-card { position: relative; margin-top: 16px; padding: 15px 18px 16px; border-radius: 11px; background: var(--paper);
  border: 1.5px solid rgb(26 26 26 / calc(.12 + .88 * var(--cardP)));
  box-shadow: calc(4px * var(--cardP)) calc(4px * var(--cardP)) 0 rgb(26 26 26 / var(--cardP)); }
.cx-row { display: flex; align-items: center; gap: 9px; }
.cx-slot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 5px; background: rgb(236 236 230 / calc(1 - var(--iconP))); }
.cx .cx-icon { --fs: 22px; position: absolute; inset: 0; border-radius: 5px; opacity: var(--iconP); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px rgb(26 26 26 / var(--iconP)); }
.cx-dom { font: 600 15px/1.2 var(--sans); }
.cx-stats { margin-left: auto; display: flex; gap: 14px; font: 400 11.5px/1.2 var(--mono); white-space: nowrap; }
.cx-stats { --tc: 138 143 152; }
.cx-stats b { font-weight: 700; color: rgb(26 26 26 / var(--textP)); }
.cx-art { margin-top: 10px; font: 500 16px/1.32 var(--sans); letter-spacing: -.005em; }
.cx-sent { margin-top: 7px; font-size: 14px; line-height: 1.55; }
.cx-sent mark { color: rgb(26 26 26 / var(--textP)); font-weight: 600; padding: 0 2px; margin: 0 -1px; border-radius: 3px; background-color: transparent; background-image: linear-gradient(var(--butter), var(--butter)); background-repeat: no-repeat; background-size: calc(var(--markP) * 100%) 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* skeleton: the real text, transparent, over one soft bar per line */
.cx-sk { --tc: 26 26 26; color: rgb(var(--tc) / var(--textP)); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(rgb(236 236 230 / calc(1 - var(--textP))), rgb(236 236 230 / calc(1 - var(--textP)))); background-repeat: no-repeat; background-size: 100% 58%; background-position: 0 60%; }
.cx-sent .cx-sk { --tc: 74 74 74; }
.cx-stats .cx-sk { --tc: 138 143 152; }

@media (max-width: 600px) {
  .cx { padding: 15px 14px 16px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .cx-head { align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; position: relative; padding-bottom: 13px; }
  .cx-flow { margin-top: 13px; }
  .cx-cn { font-size: 21px; line-height: 1; }
  .cx-ct { font-size: 12.5px; }
  .col-all .cx-ct { font-size: 11.5px; }
  .col-all .cx-ct b { font-size: 11px; }
  .cx-title { flex-basis: 100%; font-size: 14.5px; }
    .cx-num { width: 32px; font-size: 15.5px; }
  .cx-lt { font-size: 12.5px; }
  .cx-ls { margin-left: 32px; gap: 6px; font-size: 11px; }
  .cx-strip .fav { --fs: 15px; }
  .cx-ai { font-size: 8.5px; padding: 3px 5px; }
  .lab-other .cx-num { font-size: 13.5px; }
  .lab-consider .cx-num { font-size: 21px; }
  .cx-pill { font-size: 13px; padding: 3px 6px 4px; }
  .cx-card { margin-top: 14px; padding: 13px 13px 14px; border-radius: 9px; }
  .cx-row { gap: 8px; }
  .cx-dom { font-size: 14px; }
  .cx-stats { gap: 9px; font-size: 10.5px; }
  .cx-art { font-size: 14.5px; margin-top: 9px; }
  .cx-sent { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cx-strip .fav.pop { animation: none; } }
/* ---------- round 4 (Yuri, 29 Oct) ---------- */
/* everything that isn't "Worth considering" ends grey */
.lab-linked .cx-num, .lab-competes .cx-num, .lab-other .cx-num { color: #a3a39c; }
.lab-linked .cx-lt, .lab-competes .cx-lt, .lab-other .cx-lt { color: #8a8f98; font-weight: 400; }
.lab-linked .cx-ls, .lab-competes .cx-ls, .lab-other .cx-ls { color: #a3a39c; }
.lab-linked .cx-strip .fav, .lab-competes .cx-strip .fav, .lab-other .cx-strip .fav { filter: grayscale(1); opacity: .45; }
.lab-other .cx-lh { align-items: baseline; }
/* the card is one of the shortlist, not the only result */
.cx-more { font: 400 11px/1.2 var(--mono); letter-spacing: .02em; color: rgb(138 143 152 / var(--textP)); }
/* loop: fade out the finished frame before playing again */
.cx-flow, .cx-card { transition: opacity .45s var(--ease); }
.cx.is-reset .cx-flow, .cx.is-reset .cx-card { opacity: 0; }
/* "1 of 24" + the inventory's BUY / In cart, on one line */
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line-2); }
.cx { --curP: 1; --curA: 0; --pressP: 0; --ringP: 1; --cartP: 1; }
.cx-buyslot { position: relative; display: grid; justify-items: end; align-items: center; flex: none; opacity: var(--textP); }
.cx-buy, .cx-incart { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; font: 700 10px/1 var(--mono); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
/* .buy-button on the inventory page */
.cx-buy { padding: 7px 16px; border: 1.5px solid var(--ink); background: var(--butter); color: var(--ink);
  opacity: calc(1 - var(--cartP)); transform: scale(calc(1 - .08 * var(--pressP)));
  box-shadow: 0 0 0 calc(10px * var(--ringP)) rgb(247 232 87 / calc(.55 * (1 - var(--ringP)) * (1 - var(--cartP) * .4))); }
/* .lv-incart-btn on the inventory page */
.cx-incart { padding: 6px 12px; border: 1.5px solid #d4d4d4; background: #f5f5f5; color: #6b7280;
  opacity: var(--cartP); transform: scale(calc(.85 + .15 * var(--cartP))); }
.cx-incart svg { width: 13px; height: 13px; flex: none; }
.cx-cursor { position: absolute; right: 18px; top: 50%; width: 16px; height: 20px; pointer-events: none; z-index: 2; opacity: var(--curA);
  transform: translate(calc(46px * (1 - var(--curP))), calc(30px * (1 - var(--curP)) + 2px)) scale(calc(1 - .12 * var(--pressP))); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
@media (max-width: 600px) { .cx-more { font-size: 10.5px; } .cx-foot { margin-top: 9px; padding-top: 8px; } .cx-buy { padding: 9px 16px; } .cx-incart { padding: 8px 12px; } }