/* Generated by scripts/build-import-demo.mjs from cennex-import-demo.html. Edit the source demo, then rerun. */
/* ===== Cennex import demo · pure CSS animation, plays once and ends on both profiles ===== */
.cxa-ky .cxp, .cxa-ky .cxp *{ box-sizing: border-box; }
.cxa-ky .cxp{
  --canvas: #F4F3EE; --surface: #FFFFFF; --subtle: #F9F8F5; --line: #E3E2DC;
  --text: #141816; --text-sub: #4E5651; --text-muted: #78817B;
  --brand: #167A56; --brand-tint: rgba(22,122,86,.08); --shell: #0B1210;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.45;
  width: 100%; max-width: 800px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.cxa-ky .cxp :where(a){ color: inherit; text-decoration: none; }
.cxa-ky .cxp :where(button){ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cxa-ky .cxp :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.cxa-ky .cxp .disp{ font-family: Manrope, Inter, sans-serif; }
.cxa-ky .cxp-banner{ display: block; width: 100%; aspect-ratio: 1516 / 250; background: var(--shell); overflow: hidden; }
.cxa-ky .cxp-banner img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cxa-ky .cxp-identity{ padding: 0 24px 18px; display: flow-root; }
.cxa-ky .cxp-row{ position: relative; z-index: 2; margin-top: -60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cxa-ky .cxp-avatar{ width: 136px; height: 136px; border-radius: 50%; border: 4px solid var(--surface); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); flex-shrink: 0; overflow: hidden; display: block; }
.cxa-ky .cxp-avatar img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 50%; display: block; }
.cxa-ky .cxp-actions{ display: flex; gap: 8px; padding-bottom: 4px; position: relative; }
.cxa-ky .cxp-connect{ padding: 8px 26px; font-size: 13px; }
.cxa-ky .cxp-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: background-color .12s, border-color .12s, color .12s; }
.cxa-ky .cxp-btn-primary{ background: var(--brand); color: #fff; }
.cxa-ky .cxp-btn-primary:hover{ background: #116245; }
.cxa-ky .cxp-btn-primary[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-ky .cxp-btn-ghost{ background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-ky .cxp-btn-ghost:hover{ box-shadow: inset 0 0 0 1px var(--text-sub); }
.cxa-ky .cxp-pop{ position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(11,18,16,.10); padding: 6px; z-index: 5; }
.cxa-ky .cxp-pop[hidden]{ display: none; }
.cxa-ky .cxp-pop a{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; }
.cxa-ky .cxp-pop a:hover{ background: var(--subtle); }
.cxa-ky .cxp-pop .cxp-pop-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 4px 8px 2px; }
.cxa-ky .cxp-grid{ display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px; row-gap: 16px; }
.cxa-ky .cxp-name{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.cxa-ky .cxp-real{ font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.cxa-ky .cxp-headline{ font-size: 14.5px; font-weight: 500; margin: 8px 0 0; line-height: 1.35; }
.cxa-ky .cxp-meta{ margin-top: 8px; font-size: 12.5px; color: var(--text-sub); display: flex; align-items: center; gap: 6px; }
.cxa-ky .cxp-socials{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; }
.cxa-ky .cxp-grid{ align-items: end; }
.cxa-ky .cxp-grid > :first-child{ align-self: stretch; display: flex; flex-direction: column; }
.cxa-ky .cxp-grid > :first-child .cxp-socials{ margin-top: auto; padding-top: 14px; }
.cxa-ky .cxp-social{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; transition: border-color .12s, color .12s; }
.cxa-ky .cxp-social svg{ width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.cxa-ky .cxp-social:hover{ border-color: var(--brand); color: var(--brand); }
.cxa-ky .cxp-side{ width: 250px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; }
.cxa-ky .cxp-pos{ display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; text-align: right; }
.cxa-ky .cxp-pos:hover .cxp-pos-name{ color: var(--brand); }
.cxa-ky .cxp-pos-name{ display: block; font-size: 13.5px; font-weight: 600; transition: color .12s; }
.cxa-ky .cxp-pos-role{ display: block; font-size: 12px; color: var(--text-muted); }
.cxa-ky .cxp-mark{ overflow: hidden; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 11px; flex-shrink: 0; letter-spacing: .02em; }
.cxa-ky .cxp-game{ width: 84px; display: block; margin-top: auto; }
.cxa-ky .cxp-game-art{ display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.cxa-ky .cxp-game-art svg, .cxa-ky .cxp-game-art img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cxa-ky .cxp-sources{ border-top: 1px solid var(--line); background: rgba(249,248,245,.6); padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cxa-ky .cxp-sources-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.cxa-ky .cxp-src{ display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 500; transition: border-color .12s; }
.cxa-ky .cxp-src:hover{ border-color: var(--text-sub); }
.cxa-ky .cxp-src i{ width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8.5px; font-weight: 800; color: #fff; font-family: Manrope, Inter, sans-serif; }
.cxa-ky .cxp-sec{ border-top: 1px solid var(--line); padding: 20px 24px; }
.cxa-ky .cxp-sec-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cxa-ky .cxp-sec h2{ font-size: 15px; font-weight: 700; margin: 0; }
.cxa-ky .cxp-sec-sub{ font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cxa-ky .cxp-about{ font-size: 13px; color: var(--text-sub); line-height: 1.6; margin: 0; max-width: 640px; }
.cxa-ky .cxp-earn{ font-size: 12px; color: var(--text-sub); text-align: right; white-space: nowrap; }
.cxa-ky .cxp-earn strong{ color: var(--text); font-weight: 600; }
.cxa-ky .cxp-earn a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-ky .cxp-earn a:hover{ color: var(--brand); }
.cxa-ky .cxp-list{ list-style: none; margin: 0 -8px; padding: 0; }
.cxa-ky .cxp-list li + li{ border-top: 1px solid var(--line); }
.cxa-ky .cxp-item{ display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-ky .cxp-item:hover{ background: var(--subtle); }
.cxa-ky .cxp-item:hover .cxp-t{ color: var(--brand); }
.cxa-ky .cxp-place{ font-family: Manrope, Inter, sans-serif; font-size: 12.5px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); white-space: nowrap; }
.cxa-ky .cxp-place.win{ background: var(--brand-tint); border-color: rgba(22,122,86,.25); color: var(--brand); }
.cxa-ky .cxp-t{ display: block; font-size: 13px; font-weight: 600; transition: color .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxa-ky .cxp-m{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cxa-ky .cxp-r{ text-align: right; font-size: 11.5px; color: var(--text-sub); white-space: nowrap; }
.cxa-ky .cxp-r b{ display: block; font-weight: 600; color: var(--text); font-size: 12px; }
.cxa-ky .cxp-ext{ width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; opacity: .55; }
.cxa-ky .cxp-more{ margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
.cxa-ky .cxp-more:hover{ text-decoration: underline; }
.cxa-ky .cxp-hidden{ display: none !important; }
.cxa-ky .cxp-team{ display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-ky .cxp-team:hover{ background: var(--subtle); }
.cxa-ky .cxp-team:hover .cxp-t{ color: var(--brand); }
.cxa-ky .cxp-team .cxp-mark{ width: 32px; height: 32px; font-size: 10px; }
.cxa-ky .cxp-now{ display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--brand); }
.cxa-ky .cxp-foot{ border-top: 1px solid var(--line); padding: 10px 24px; font-size: 11px; color: var(--text-muted); background: var(--subtle); }
.cxa-ky .cxp-foot a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-ky .cxp-foot a:hover{ color: var(--brand); }
.cxa-ky .cxp-stats{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 4px 0 6px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cxa-ky .cxp-stats > *{ display: block; padding: 0 14px; border-left: 1px solid var(--line); }
.cxa-ky .cxp-stats > :first-child{ padding-left: 0; border-left: 0; }
.cxa-ky .cxp-stats dt{ font-size: 11px; color: var(--text-muted); margin: 0 0 3px; }
.cxa-ky .cxp-stats dd{ margin: 0; font-family: Manrope, Inter, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; transition: color .12s; }
.cxa-ky .cxp-stats a:hover dd{ color: var(--brand); }
.cxa-ky .cxp-rank{ display: flex; align-items: center; gap: 8px; }
.cxa-ky .cxp-rank i{ width: 32px; height: 32px; border-radius: 50%; background: #1A1626; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cxa-ky .cxp-rank img{ width: 25px; height: auto; display: block; margin-top: 2px; }
.cxa-ky .cxp-rank span{ display: block; font-size: 13px; line-height: 1.2; }
.cxa-ky .cxp-rank small{ display: block; font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.cxa-ky .cxp-showall{ display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); text-align: center; transition: border-color .12s, background-color .12s; }
.cxa-ky .cxp-showall:hover{ border-color: var(--text-sub); background: var(--subtle); }
.cxa-ky .cxp-seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line); margin: 2px 0 8px; }
.cxa-ky .cxp-seg button{ padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-sub); }
.cxa-ky .cxp-seg button[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.cxa-ky .cxp-results .cxp-item{ grid-template-columns: 84px minmax(0,1fr) auto; gap: 14px; padding: 13px 8px; }
.cxa-ky .cxp-results .cxp-place{ font-size: 13.5px; padding: 6px 0; }
.cxa-ky .cxp-results .cxp-t{ font-size: 14px; }
.cxa-ky .cxp-results .cxp-m{ font-size: 12px; margin-top: 2px; }
.cxa-ky .cxp-results .cxp-r b{ font-size: 13px; }
.cxa-ky .cxp-teams .cxp-team{ grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; padding: 12px 8px; }
.cxa-ky .cxp-teams .cxp-mark{ width: 44px; height: 44px; font-size: 12px; }
.cxa-ky .cxp-teams .cxp-t{ font-size: 14px; }
.cxa-ky .cxp-teams .cxp-m{ font-size: 12.5px; }
.cxa-ky .cxp-teams .cxp-r{ font-size: 12px; }
.cxa-ky .cxp-mark img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cxa-ky .cxp-compact .cxp-c-hide{ display: none; }
.cxa-ky .cxp-compact #cxp-results li:nth-child(n+4){ display: none !important; }
.cxa-ky .cxp-lightbox{ border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.cxa-ky .cxp-lightbox[data-kind="avatar"] img{ width: min(520px, 80vw); height: auto; max-height: 80vh; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 40%; border-radius: 50%; }
.cxa-ky .cxp-lightbox::backdrop{ background: rgba(11,18,16,.82); }
.cxa-ky .cxp-lightbox img{ display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; margin: 0 auto; }
.cxa-ky .cxp-lightbox button{ position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 36px; cursor: pointer; }
.cxa-ky .cxp-lightbox button:hover{ background: rgba(255,255,255,.22); }
.cxa-ky .cxp-lightbox p{ color: rgba(255,255,255,.75); font: 12px Inter, sans-serif; text-align: center; margin: 10px 0 0; }
@container cxacol (max-width: 640px){
.cxa-ky .cxp-identity{ padding: 0 16px 16px; }
.cxa-ky .cxp-row{ margin-top: -46px; }
.cxa-ky .cxp-avatar{ width: 104px; height: 104px; border-width: 3px; }
.cxa-ky .cxp-name{ font-size: 24px; }
.cxa-ky .cxp-grid{ grid-template-columns: 1fr; }
.cxa-ky .cxp-socials{ grid-template-columns: repeat(2, max-content); }
.cxa-ky .cxp-side{ width: auto; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cxa-ky .cxp-side .cxp-positions{ display: flex; flex-direction: column; gap: 10px; }
.cxa-ky .cxp-pos{ flex-direction: row; text-align: left; }
.cxa-ky .cxp-sec{ padding-left: 16px; padding-right: 16px; }
.cxa-ky .cxp-game{ width: 76px; margin-top: 0; }
.cxa-ky .cxp-item, .cxa-ky .cxp-results .cxp-item{ grid-template-columns: 64px minmax(0,1fr); }
.cxa-ky .cxp-teams .cxp-team{ grid-template-columns: 40px minmax(0,1fr); }
.cxa-ky .cxp-teams .cxp-mark{ width: 40px; height: 40px; }
.cxa-ky .cxp-item .cxp-r{ grid-column: 2; text-align: left; margin-top: -6px; }
.cxa-ky .cxp-item .cxp-r b{ display: inline; margin-right: 6px; }
.cxa-ky .cxp-t{ white-space: normal; }
.cxa-ky .cxp-earn{ text-align: left; white-space: normal; }
.cxa-ky .cxp-team{ grid-template-columns: 32px minmax(0,1fr); }
.cxa-ky .cxp-team .cxp-r{ grid-column: 2; text-align: left; margin-top: -8px; }
.cxa-ky .cxp-sec-head{ flex-direction: column; align-items: flex-start; gap: 4px; }
.cxa-ky .cxp-stats{ grid-template-columns: 1fr 1fr; row-gap: 12px; }
.cxa-ky .cxp-stats > :nth-child(3){ padding-left: 0; border-left: 0; }
.cxa-ky .cxp-stats dd{ font-size: 13.5px; }
.cxa-ky .cxp-stats > *{ padding: 0 10px; }
.cxa-ky .cxp-stats > :first-child, .cxa-ky .cxp-stats > :nth-child(3){ padding-left: 0; }
.cxa-ky .cxp-rank{ gap: 6px; }
.cxa-ky .cxp-rank i{ width: 28px; height: 28px; }
.cxa-ky .cxp-rank img{ width: 22px; }
.cxa-ky .cxp-rank span{ font-size: 12.5px; white-space: normal; }
}
.cxa-au .cxp, .cxa-au .cxp *{ box-sizing: border-box; }
.cxa-au .cxp{
  --canvas: #F4F3EE; --surface: #FFFFFF; --subtle: #F9F8F5; --line: #E3E2DC;
  --text: #141816; --text-sub: #4E5651; --text-muted: #78817B;
  --brand: #167A56; --brand-tint: rgba(22,122,86,.08); --shell: #0B1210;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.45;
  width: 100%; max-width: 800px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.cxa-au .cxp :where(a){ color: inherit; text-decoration: none; }
.cxa-au .cxp :where(button){ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cxa-au .cxp :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.cxa-au .cxp .disp{ font-family: Manrope, Inter, sans-serif; }
.cxa-au .cxp-banner{ display: block; width: 100%; aspect-ratio: 1516 / 250; background: var(--shell); overflow: hidden; }
.cxa-au .cxp-banner img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.cxa-au .cxp-identity{ padding: 0 24px 18px; display: flow-root; }
.cxa-au .cxp-row{ position: relative; z-index: 2; margin-top: -60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cxa-au .cxp-avatar{ width: 136px; height: 136px; border-radius: 50%; border: 4px solid var(--surface); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); flex-shrink: 0; overflow: hidden; display: block; }
.cxa-au .cxp-avatar img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 50%; display: block; }
.cxa-au .cxp-actions{ display: flex; gap: 8px; padding-bottom: 4px; position: relative; }
.cxa-au .cxp-connect{ padding: 8px 26px; font-size: 13px; }
.cxa-au .cxp-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: background-color .12s, border-color .12s, color .12s; }
.cxa-au .cxp-btn-primary{ background: var(--brand); color: #fff; }
.cxa-au .cxp-btn-primary:hover{ background: #116245; }
.cxa-au .cxp-btn-primary[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-au .cxp-btn-ghost{ background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-au .cxp-btn-ghost:hover{ box-shadow: inset 0 0 0 1px var(--text-sub); }
.cxa-au .cxp-pop{ position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(11,18,16,.10); padding: 6px; z-index: 5; }
.cxa-au .cxp-pop[hidden]{ display: none; }
.cxa-au .cxp-pop a{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; }
.cxa-au .cxp-pop a:hover{ background: var(--subtle); }
.cxa-au .cxp-pop .cxp-pop-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 4px 8px 2px; }
.cxa-au .cxp-grid{ display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px; row-gap: 16px; }
.cxa-au .cxp-name{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.cxa-au .cxp-real{ font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.cxa-au .cxp-headline{ font-size: 14.5px; font-weight: 500; margin: 8px 0 0; line-height: 1.35; }
.cxa-au .cxp-meta{ margin-top: 8px; font-size: 12.5px; color: var(--text-sub); display: flex; align-items: center; gap: 6px; }
.cxa-au .cxp-socials{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; }
.cxa-au .cxp-grid{ align-items: end; }
.cxa-au .cxp-grid > :first-child{ align-self: stretch; display: flex; flex-direction: column; }
.cxa-au .cxp-grid > :first-child .cxp-socials{ margin-top: auto; padding-top: 14px; }
.cxa-au .cxp-social{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; transition: border-color .12s, color .12s; }
.cxa-au .cxp-social svg{ width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.cxa-au .cxp-social:hover{ border-color: var(--brand); color: var(--brand); }
.cxa-au .cxp-side{ width: 250px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; }
.cxa-au .cxp-pos{ display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; text-align: right; }
.cxa-au .cxp-pos:hover .cxp-pos-name{ color: var(--brand); }
.cxa-au .cxp-pos-name{ display: block; font-size: 13.5px; font-weight: 600; transition: color .12s; }
.cxa-au .cxp-pos-role{ display: block; font-size: 12px; color: var(--text-muted); }
.cxa-au .cxp-mark{ overflow: hidden; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 11px; flex-shrink: 0; letter-spacing: .02em; }
.cxa-au .cxp-game{ width: 84px; display: block; margin-top: auto; }
.cxa-au .cxp-game-art{ display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.cxa-au .cxp-game-art svg, .cxa-au .cxp-game-art img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cxa-au .cxp-sources{ border-top: 1px solid var(--line); background: rgba(249,248,245,.6); padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cxa-au .cxp-sources-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.cxa-au .cxp-src{ display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 500; transition: border-color .12s; }
.cxa-au .cxp-src:hover{ border-color: var(--text-sub); }
.cxa-au .cxp-src i{ width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8.5px; font-weight: 800; color: #fff; font-family: Manrope, Inter, sans-serif; }
.cxa-au .cxp-sec{ border-top: 1px solid var(--line); padding: 20px 24px; }
.cxa-au .cxp-sec-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cxa-au .cxp-sec h2{ font-size: 15px; font-weight: 700; margin: 0; }
.cxa-au .cxp-sec-sub{ font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cxa-au .cxp-about{ font-size: 13px; color: var(--text-sub); line-height: 1.6; margin: 0; max-width: 640px; }
.cxa-au .cxp-earn{ font-size: 12px; color: var(--text-sub); text-align: right; white-space: nowrap; }
.cxa-au .cxp-earn strong{ color: var(--text); font-weight: 600; }
.cxa-au .cxp-earn a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-au .cxp-earn a:hover{ color: var(--brand); }
.cxa-au .cxp-list{ list-style: none; margin: 0 -8px; padding: 0; }
.cxa-au .cxp-list li + li{ border-top: 1px solid var(--line); }
.cxa-au .cxp-item{ display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-au .cxp-item:hover{ background: var(--subtle); }
.cxa-au .cxp-item:hover .cxp-t{ color: var(--brand); }
.cxa-au .cxp-place{ font-family: Manrope, Inter, sans-serif; font-size: 12.5px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); white-space: nowrap; }
.cxa-au .cxp-place.win{ background: var(--brand-tint); border-color: rgba(22,122,86,.25); color: var(--brand); }
.cxa-au .cxp-t{ display: block; font-size: 13px; font-weight: 600; transition: color .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxa-au .cxp-m{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cxa-au .cxp-r{ text-align: right; font-size: 11.5px; color: var(--text-sub); white-space: nowrap; }
.cxa-au .cxp-r b{ display: block; font-weight: 600; color: var(--text); font-size: 12px; }
.cxa-au .cxp-ext{ width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; opacity: .55; }
.cxa-au .cxp-more{ margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
.cxa-au .cxp-more:hover{ text-decoration: underline; }
.cxa-au .cxp-hidden{ display: none !important; }
.cxa-au .cxp-team{ display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-au .cxp-team:hover{ background: var(--subtle); }
.cxa-au .cxp-team:hover .cxp-t{ color: var(--brand); }
.cxa-au .cxp-team .cxp-mark{ width: 32px; height: 32px; font-size: 10px; }
.cxa-au .cxp-now{ display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--brand); }
.cxa-au .cxp-foot{ border-top: 1px solid var(--line); padding: 10px 24px; font-size: 11px; color: var(--text-muted); background: var(--subtle); }
.cxa-au .cxp-foot a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-au .cxp-foot a:hover{ color: var(--brand); }
.cxa-au .cxp-stats{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 4px 0 6px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cxa-au .cxp-stats > *{ display: block; padding: 0 14px; border-left: 1px solid var(--line); }
.cxa-au .cxp-stats > :first-child{ padding-left: 0; border-left: 0; }
.cxa-au .cxp-stats dt{ font-size: 11px; color: var(--text-muted); margin: 0 0 3px; }
.cxa-au .cxp-stats dd{ margin: 0; font-family: Manrope, Inter, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; transition: color .12s; }
.cxa-au .cxp-stats a:hover dd{ color: var(--brand); }
.cxa-au .cxp-stats-two{ grid-template-columns: max-content max-content; column-gap: 0; }
.cxa-au .cxp-stats-two > *{ padding-right: 28px; }
.cxa-au .cxp-rank-val img{ width: 18px !important; margin-top: 0 !important; }
.cxa-au .cxp-rank em{ font-style: normal; color: #B8892E; margin-left: 2px; }
.cxa-au .cxp-rank{ display: flex; align-items: center; gap: 8px; }
.cxa-au .cxp-rank i{ width: 32px; height: 32px; border-radius: 50%; background: #1A1626; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cxa-au .cxp-rank img{ width: 25px; height: auto; display: block; margin-top: 2px; }
.cxa-au .cxp-rank span{ display: block; font-size: 13px; line-height: 1.2; }
.cxa-au .cxp-rank small{ display: block; font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.cxa-au .cxp-showall{ display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); text-align: center; transition: border-color .12s, background-color .12s; }
.cxa-au .cxp-showall:hover{ border-color: var(--text-sub); background: var(--subtle); }
.cxa-au .cxp-seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line); margin: 2px 0 8px; }
.cxa-au .cxp-seg button{ padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-sub); }
.cxa-au .cxp-seg button[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.cxa-au .cxp-results .cxp-item{ grid-template-columns: 84px minmax(0,1fr) auto; gap: 14px; padding: 13px 8px; }
.cxa-au .cxp-results .cxp-place{ font-size: 13.5px; padding: 6px 0; }
.cxa-au .cxp-results .cxp-t{ font-size: 14px; }
.cxa-au .cxp-results .cxp-m{ font-size: 12px; margin-top: 2px; }
.cxa-au .cxp-results .cxp-r b{ font-size: 13px; }
.cxa-au .cxp-teams .cxp-team{ grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; padding: 12px 8px; }
.cxa-au .cxp-teams .cxp-mark{ width: 44px; height: 44px; font-size: 12px; }
.cxa-au .cxp-teams .cxp-t{ font-size: 14px; }
.cxa-au .cxp-teams .cxp-m{ font-size: 12.5px; }
.cxa-au .cxp-teams .cxp-r{ font-size: 12px; }
.cxa-au .cxp-mark img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cxa-au .cxp-mark-blank{ background: var(--subtle); color: #A3AAA5; box-shadow: inset 0 0 0 1px var(--line); }
.cxa-au .cxp-compact .cxp-c-hide{ display: none; }
.cxa-au .cxp-compact #cxp-results-au li:nth-child(n+4){ display: none !important; }
.cxa-au .cxp-lightbox{ border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.cxa-au .cxp-lightbox[data-kind="avatar"] img{ width: min(520px, 80vw); height: auto; max-height: 80vh; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 40%; border-radius: 50%; }
.cxa-au .cxp-lightbox::backdrop{ background: rgba(11,18,16,.82); }
.cxa-au .cxp-lightbox img{ display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; margin: 0 auto; }
.cxa-au .cxp-lightbox button{ position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 36px; cursor: pointer; }
.cxa-au .cxp-lightbox button:hover{ background: rgba(255,255,255,.22); }
.cxa-au .cxp-lightbox p{ color: rgba(255,255,255,.75); font: 12px Inter, sans-serif; text-align: center; margin: 10px 0 0; }
@container cxacol (max-width: 640px){
.cxa-au .cxp-identity{ padding: 0 16px 16px; }
.cxa-au .cxp-row{ margin-top: -46px; }
.cxa-au .cxp-avatar{ width: 104px; height: 104px; border-width: 3px; }
.cxa-au .cxp-name{ font-size: 24px; }
.cxa-au .cxp-grid{ grid-template-columns: 1fr; }
.cxa-au .cxp-socials{ grid-template-columns: repeat(2, max-content); }
.cxa-au .cxp-side{ width: auto; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cxa-au .cxp-side .cxp-positions{ display: flex; flex-direction: column; gap: 10px; }
.cxa-au .cxp-pos{ flex-direction: row; text-align: left; }
.cxa-au .cxp-sec{ padding-left: 16px; padding-right: 16px; }
.cxa-au .cxp-game{ width: 76px; margin-top: 0; }
.cxa-au .cxp-item, .cxa-au .cxp-results .cxp-item{ grid-template-columns: 64px minmax(0,1fr); }
.cxa-au .cxp-teams .cxp-team{ grid-template-columns: 40px minmax(0,1fr); }
.cxa-au .cxp-teams .cxp-mark{ width: 40px; height: 40px; }
.cxa-au .cxp-item .cxp-r{ grid-column: 2; text-align: left; margin-top: -6px; }
.cxa-au .cxp-item .cxp-r b{ display: inline; margin-right: 6px; }
.cxa-au .cxp-t{ white-space: normal; }
.cxa-au .cxp-earn{ text-align: left; white-space: normal; }
.cxa-au .cxp-team{ grid-template-columns: 32px minmax(0,1fr); }
.cxa-au .cxp-team .cxp-r{ grid-column: 2; text-align: left; margin-top: -8px; }
.cxa-au .cxp-sec-head{ flex-direction: column; align-items: flex-start; gap: 4px; }
.cxa-au .cxp-stats{ grid-template-columns: 1fr 1fr; row-gap: 12px; }
.cxa-au .cxp-stats > :nth-child(3){ padding-left: 0; border-left: 0; }
.cxa-au .cxp-stats dd{ font-size: 13.5px; }
.cxa-au .cxp-stats > *{ padding: 0 10px; }
.cxa-au .cxp-stats > :first-child, .cxa-au .cxp-stats > :nth-child(3){ padding-left: 0; }
.cxa-au .cxp-rank{ gap: 6px; }
.cxa-au .cxp-rank i{ width: 28px; height: 28px; }
.cxa-au .cxp-rank img{ width: 22px; }
.cxa-au .cxp-rank span{ font-size: 12.5px; white-space: normal; }
}
.cxa-au .cxp-grid > :first-child .cxp-socials{ margin-top: 12px; padding-top: 0; }
.cxa-au .cxp-grid > :first-child{ display: block; }
.cxa-au .cxp-grid{ align-items: start; }
.cxa-au .cxp-sec{ border-top: 0; padding-top: 6px; }
.cxa-au .cxp-sec[aria-labelledby="cxp-about-h-au"]{ border-top: 1px solid var(--line); padding-top: 20px; }
.cxa-au .cxp-sec[aria-labelledby="cxp-results-h-au"], .cxa-au .cxp-sec[aria-labelledby="cxp-teams-h-au"]{ border-top: 1px solid var(--line); padding-top: 20px; }
.cxa-au .cxp-stats{ border-top: 0; border-bottom: 0; padding: 2px 0 8px; }
.cxa-au .cxp-list li + li{ border-top: 0; }
.cxa-au .cxp-results .cxp-item, .cxa-au .cxp-teams .cxp-team{ padding-top: 9px; padding-bottom: 9px; }
.cxa-bu .cxp, .cxa-bu .cxp *{ box-sizing: border-box; }
.cxa-bu .cxp{
  --canvas: #F4F3EE; --surface: #FFFFFF; --subtle: #F9F8F5; --line: #E3E2DC;
  --text: #141816; --text-sub: #4E5651; --text-muted: #78817B;
  --brand: #167A56; --brand-tint: rgba(22,122,86,.08); --shell: #0B1210;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.45;
  width: 100%; max-width: 800px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.cxa-bu .cxp :where(a){ color: inherit; text-decoration: none; }
.cxa-bu .cxp :where(button){ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cxa-bu .cxp :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.cxa-bu .cxp .disp{ font-family: Manrope, Inter, sans-serif; }
.cxa-bu .cxp-banner{ display: block; width: 100%; aspect-ratio: 1516 / 250; background: var(--shell); overflow: hidden; }
.cxa-bu .cxp-banner img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cxa-bu .cxp-identity{ padding: 0 24px 18px; display: flow-root; }
.cxa-bu .cxp-row{ position: relative; z-index: 2; margin-top: -60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cxa-bu .cxp-avatar{ width: 136px; height: 136px; border-radius: 50%; border: 4px solid var(--surface); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); flex-shrink: 0; overflow: hidden; display: block; }
.cxa-bu .cxp-avatar img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 50%; display: block; }
.cxa-bu .cxp-actions{ display: flex; gap: 8px; padding-bottom: 4px; position: relative; }
.cxa-bu .cxp-connect{ padding: 8px 26px; font-size: 13px; }
.cxa-bu .cxp-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: background-color .12s, border-color .12s, color .12s; }
.cxa-bu .cxp-btn-primary{ background: var(--brand); color: #fff; }
.cxa-bu .cxp-btn-primary:hover{ background: #116245; }
.cxa-bu .cxp-btn-primary[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-bu .cxp-btn-ghost{ background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cxa-bu .cxp-btn-ghost:hover{ box-shadow: inset 0 0 0 1px var(--text-sub); }
.cxa-bu .cxp-pop{ position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(11,18,16,.10); padding: 6px; z-index: 5; }
.cxa-bu .cxp-pop[hidden]{ display: none; }
.cxa-bu .cxp-pop a{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; }
.cxa-bu .cxp-pop a:hover{ background: var(--subtle); }
.cxa-bu .cxp-pop .cxp-pop-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 4px 8px 2px; }
.cxa-bu .cxp-grid{ display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px; row-gap: 16px; }
.cxa-bu .cxp-name{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.cxa-bu .cxp-real{ font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.cxa-bu .cxp-headline{ font-size: 14.5px; font-weight: 500; margin: 8px 0 0; line-height: 1.35; }
.cxa-bu .cxp-meta{ margin-top: 8px; font-size: 12.5px; color: var(--text-sub); display: flex; align-items: center; gap: 6px; }
.cxa-bu .cxp-socials{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; }
.cxa-bu .cxp-grid{ align-items: end; }
.cxa-bu .cxp-grid > :first-child{ align-self: stretch; display: flex; flex-direction: column; }
.cxa-bu .cxp-grid > :first-child .cxp-socials{ margin-top: auto; padding-top: 14px; }
.cxa-bu .cxp-social{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; transition: border-color .12s, color .12s; }
.cxa-bu .cxp-social svg{ width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.cxa-bu .cxp-social:hover{ border-color: var(--brand); color: var(--brand); }
.cxa-bu .cxp-side{ width: 250px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; }
.cxa-bu .cxp-pos{ display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; text-align: right; }
.cxa-bu .cxp-pos:hover .cxp-pos-name{ color: var(--brand); }
.cxa-bu .cxp-pos-name{ display: block; font-size: 13.5px; font-weight: 600; transition: color .12s; }
.cxa-bu .cxp-pos-role{ display: block; font-size: 12px; color: var(--text-muted); }
.cxa-bu .cxp-mark{ overflow: hidden; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 11px; flex-shrink: 0; letter-spacing: .02em; }
.cxa-bu .cxp-game{ width: 84px; display: block; margin-top: auto; }
.cxa-bu .cxp-game-art{ display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.cxa-bu .cxp-game-art svg, .cxa-bu .cxp-game-art img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cxa-bu .cxp-sources{ border-top: 1px solid var(--line); background: rgba(249,248,245,.6); padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cxa-bu .cxp-sources-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.cxa-bu .cxp-src{ display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 500; transition: border-color .12s; }
.cxa-bu .cxp-src:hover{ border-color: var(--text-sub); }
.cxa-bu .cxp-src i{ width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8.5px; font-weight: 800; color: #fff; font-family: Manrope, Inter, sans-serif; }
.cxa-bu .cxp-sec{ border-top: 1px solid var(--line); padding: 20px 24px; }
.cxa-bu .cxp-sec-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cxa-bu .cxp-sec h2{ font-size: 15px; font-weight: 700; margin: 0; }
.cxa-bu .cxp-sec-sub{ font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cxa-bu .cxp-about{ font-size: 13px; color: var(--text-sub); line-height: 1.6; margin: 0; max-width: 640px; }
.cxa-bu .cxp-earn{ font-size: 12px; color: var(--text-sub); text-align: right; white-space: nowrap; }
.cxa-bu .cxp-earn strong{ color: var(--text); font-weight: 600; }
.cxa-bu .cxp-earn a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-bu .cxp-earn a:hover{ color: var(--brand); }
.cxa-bu .cxp-list{ list-style: none; margin: 0 -8px; padding: 0; }
.cxa-bu .cxp-list li + li{ border-top: 1px solid var(--line); }
.cxa-bu .cxp-item{ display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-bu .cxp-item:hover{ background: var(--subtle); }
.cxa-bu .cxp-item:hover .cxp-t{ color: var(--brand); }
.cxa-bu .cxp-place{ font-family: Manrope, Inter, sans-serif; font-size: 12.5px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); white-space: nowrap; }
.cxa-bu .cxp-place.win{ background: var(--brand-tint); border-color: rgba(22,122,86,.25); color: var(--brand); }
.cxa-bu .cxp-t{ display: block; font-size: 13px; font-weight: 600; transition: color .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxa-bu .cxp-m{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cxa-bu .cxp-r{ text-align: right; font-size: 11.5px; color: var(--text-sub); white-space: nowrap; }
.cxa-bu .cxp-r b{ display: block; font-weight: 600; color: var(--text); font-size: 12px; }
.cxa-bu .cxp-ext{ width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; opacity: .55; }
.cxa-bu .cxp-more{ margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
.cxa-bu .cxp-more:hover{ text-decoration: underline; }
.cxa-bu .cxp-hidden{ display: none !important; }
.cxa-bu .cxp-team{ display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 6px; transition: background-color .12s; }
.cxa-bu .cxp-team:hover{ background: var(--subtle); }
.cxa-bu .cxp-team:hover .cxp-t{ color: var(--brand); }
.cxa-bu .cxp-team .cxp-mark{ width: 32px; height: 32px; font-size: 10px; }
.cxa-bu .cxp-now{ display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--brand); }
.cxa-bu .cxp-foot{ border-top: 1px solid var(--line); padding: 10px 24px; font-size: 11px; color: var(--text-muted); background: var(--subtle); }
.cxa-bu .cxp-foot a{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.cxa-bu .cxp-foot a:hover{ color: var(--brand); }
.cxa-bu .cxp-stats{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 4px 0 6px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cxa-bu .cxp-stats > *{ display: block; padding: 0 14px; border-left: 1px solid var(--line); }
.cxa-bu .cxp-stats > :first-child{ padding-left: 0; border-left: 0; }
.cxa-bu .cxp-stats dt{ font-size: 11px; color: var(--text-muted); margin: 0 0 3px; }
.cxa-bu .cxp-stats dd{ margin: 0; font-family: Manrope, Inter, sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; transition: color .12s; }
.cxa-bu .cxp-stats a:hover dd{ color: var(--brand); }
.cxa-bu .cxp-rank{ display: flex; align-items: center; gap: 8px; }
.cxa-bu .cxp-rank i{ width: 32px; height: 32px; border-radius: 50%; background: #1A1626; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cxa-bu .cxp-rank img{ width: 25px; height: auto; display: block; margin-top: 2px; }
.cxa-bu .cxp-rank span{ display: block; font-size: 13px; line-height: 1.2; }
.cxa-bu .cxp-rank small{ display: block; font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.cxa-bu .cxp-showall{ display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); text-align: center; transition: border-color .12s, background-color .12s; }
.cxa-bu .cxp-showall:hover{ border-color: var(--text-sub); background: var(--subtle); }
.cxa-bu .cxp-seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line); margin: 2px 0 8px; }
.cxa-bu .cxp-seg button{ padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-sub); }
.cxa-bu .cxp-seg button[aria-pressed="true"]{ background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.cxa-bu .cxp-results .cxp-item{ grid-template-columns: 84px minmax(0,1fr) auto; gap: 14px; padding: 13px 8px; }
.cxa-bu .cxp-results .cxp-place{ font-size: 13.5px; padding: 6px 0; }
.cxa-bu .cxp-results .cxp-t{ font-size: 14px; }
.cxa-bu .cxp-results .cxp-m{ font-size: 12px; margin-top: 2px; }
.cxa-bu .cxp-results .cxp-r b{ font-size: 13px; }
.cxa-bu .cxp-teams .cxp-team{ grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; padding: 12px 8px; }
.cxa-bu .cxp-teams .cxp-mark{ width: 44px; height: 44px; font-size: 12px; }
.cxa-bu .cxp-teams .cxp-t{ font-size: 14px; }
.cxa-bu .cxp-teams .cxp-m{ font-size: 12.5px; }
.cxa-bu .cxp-teams .cxp-r{ font-size: 12px; }
.cxa-bu .cxp-mark img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cxa-bu .cxp-compact .cxp-c-hide{ display: none; }
.cxa-bu .cxp-compact #cxp-results-bu li:nth-child(n+4){ display: none !important; }
.cxa-bu .cxp-lightbox{ border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.cxa-bu .cxp-lightbox::backdrop{ background: rgba(11,18,16,.82); }
.cxa-bu .cxp-lightbox img{ display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; margin: 0 auto; }
.cxa-bu .cxp-lightbox button{ position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 36px; cursor: pointer; }
.cxa-bu .cxp-lightbox button:hover{ background: rgba(255,255,255,.22); }
.cxa-bu .cxp-lightbox p{ color: rgba(255,255,255,.75); font: 12px Inter, sans-serif; text-align: center; margin: 10px 0 0; }
@container cxacol (max-width: 640px){
.cxa-bu .cxp-identity{ padding: 0 16px 16px; }
.cxa-bu .cxp-row{ margin-top: -46px; }
.cxa-bu .cxp-avatar{ width: 104px; height: 104px; border-width: 3px; }
.cxa-bu .cxp-name{ font-size: 24px; }
.cxa-bu .cxp-grid{ grid-template-columns: 1fr; }
.cxa-bu .cxp-socials{ grid-template-columns: repeat(2, max-content); }
.cxa-bu .cxp-side{ width: auto; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cxa-bu .cxp-side .cxp-positions{ display: flex; flex-direction: column; gap: 10px; }
.cxa-bu .cxp-pos{ flex-direction: row; text-align: left; }
.cxa-bu .cxp-sec{ padding-left: 16px; padding-right: 16px; }
.cxa-bu .cxp-game{ width: 76px; margin-top: 0; }
.cxa-bu .cxp-item, .cxa-bu .cxp-results .cxp-item{ grid-template-columns: 64px minmax(0,1fr); }
.cxa-bu .cxp-teams .cxp-team{ grid-template-columns: 40px minmax(0,1fr); }
.cxa-bu .cxp-teams .cxp-mark{ width: 40px; height: 40px; }
.cxa-bu .cxp-item .cxp-r{ grid-column: 2; text-align: left; margin-top: -6px; }
.cxa-bu .cxp-item .cxp-r b{ display: inline; margin-right: 6px; }
.cxa-bu .cxp-t{ white-space: normal; }
.cxa-bu .cxp-earn{ text-align: left; white-space: normal; }
.cxa-bu .cxp-team{ grid-template-columns: 32px minmax(0,1fr); }
.cxa-bu .cxp-team .cxp-r{ grid-column: 2; text-align: left; margin-top: -8px; }
.cxa-bu .cxp-sec-head{ flex-direction: column; align-items: flex-start; gap: 4px; }
.cxa-bu .cxp-stats{ grid-template-columns: 1fr 1fr; row-gap: 12px; }
.cxa-bu .cxp-stats > :nth-child(3){ padding-left: 0; border-left: 0; }
.cxa-bu .cxp-stats dd{ font-size: 13.5px; }
.cxa-bu .cxp-stats > *{ padding: 0 10px; }
.cxa-bu .cxp-stats > :first-child, .cxa-bu .cxp-stats > :nth-child(3){ padding-left: 0; }
.cxa-bu .cxp-rank{ gap: 6px; }
.cxa-bu .cxp-rank i{ width: 28px; height: 28px; }
.cxa-bu .cxp-rank img{ width: 22px; }
.cxa-bu .cxp-rank span{ font-size: 12.5px; white-space: normal; }
}
.cxa-bu .cxp-avatar img{ object-position: 50% 30%; }
.cxa-bu .cxp-avatar.is-empty{ background: #ECEBE6; }
.cxa-bu .cxp-avatar.is-empty svg{ width: 56%; height: 56%; margin: 22% auto 0; display: block; fill: #C9C8C1; }
.cxa-bu .cxp-banner img{ object-position: 50% 50%; }
.cxa-bu .cxp-socials{ grid-template-columns: repeat(4, max-content); }
.cxa-bu .cxp-grid > :first-child .cxp-socials{ margin-top: 14px; padding-top: 0; }
.cxa-bu .cxp-grid{ align-items: start; }
.cxa-bu .cxp-social .ic-ig{ fill: url(#cxp-ig-grad-bu); }
.cxa-bu .cxp-social .ic-yt{ fill: #FF0033; }
.cxa-bu .cxp-social .ic-tt, .cxa-bu .cxp-social .ic-x{ fill: #111; }
.cxa-bu .cxp-social:hover{ color: var(--text); border-color: var(--text-sub); }
.cxa-bu .cxp-feats{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cxa-bu .cxp-feat{ display: grid; grid-template-columns: 132px minmax(0,1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.cxa-bu .cxp-feat:hover{ border-color: var(--text-sub); box-shadow: 0 6px 18px rgba(11,18,16,.06); }
.cxa-bu .cxp-feat:hover .cxp-ftitle{ color: var(--brand); }
.cxa-bu .cxp-thumb{ position: relative; display: block; aspect-ratio: 9 / 16; background: #0E1013; overflow: hidden; }
.cxa-bu .cxp-thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cxa-bu .cxp-thumb.tt{ background: radial-gradient(120% 70% at 20% 15%, rgba(37,244,238,.28), transparent 60%), radial-gradient(120% 70% at 85% 90%, rgba(254,44,85,.30), transparent 60%), #0E1013; }
.cxa-bu .cxp-thumb.ig{ background: radial-gradient(120% 70% at 15% 90%, rgba(254,218,117,.35), transparent 60%), radial-gradient(120% 80% at 85% 10%, rgba(150,47,191,.45), transparent 60%), linear-gradient(160deg, #4F5BD5 0%, #D62976 60%, #FA7E1E 100%); }
.cxa-bu .cxp-thumb::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 62%, rgba(0,0,0,.5) 100%); }
.cxa-bu .cxp-plat{ position: absolute; z-index: 1; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.95); display: inline-flex; align-items: center; justify-content: center; }
.cxa-bu .cxp-plat svg{ width: 14px; height: 14px; }
.cxa-bu .cxp-play{ position: absolute; z-index: 1; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; transition: transform .15s, background-color .15s; }
.cxa-bu .cxp-play svg{ width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.cxa-bu .cxp-feat:hover .cxp-play{ transform: scale(1.08); background: rgba(255,255,255,.32); }
.cxa-bu .cxp-tviews{ position: absolute; z-index: 1; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cxa-bu .cxp-tviews svg{ width: 13px; height: 13px; fill: #fff; }
.cxa-bu .cxp-fbody{ padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.cxa-bu .cxp-fsrc{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.cxa-bu .cxp-fsrc b{ color: var(--text); font-weight: 600; }
.cxa-bu .cxp-ftitle{ display: block; margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; transition: color .12s; }
.cxa-bu .cxp-ftags{ display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.cxa-bu .cxp-fhero{ margin-top: auto; padding-top: 12px; }
.cxa-bu .cxp-fhero b{ display: block; font-family: Manrope, Inter, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.cxa-bu .cxp-fhero span{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.cxa-bu .cxp-fstats{ display: grid; grid-template-columns: repeat(2, max-content); gap: 7px 22px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.cxa-bu .cxp-fstats div{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); white-space: nowrap; }
.cxa-bu .cxp-fstats svg{ width: 13px; height: 13px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cxa-bu .cxp-fstats dd{ margin: 0; font-weight: 600; color: var(--text); }
.cxa-bu .cxp-fstats dt{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cxa-bu .cxp-fstats div{ position: relative; }
@container cxacol (max-width: 760px){
.cxa-bu .cxp-feats{ grid-template-columns: 1fr; }
}
@container cxacol (max-width: 640px){
.cxa-bu .cxp-socials{ grid-template-columns: repeat(2, max-content); }
.cxa-bu .cxp-feat{ grid-template-columns: 116px minmax(0,1fr); }
}

@property --cxa-pct { syntax: '<integer>'; inherits: false; initial-value: 100; }

.cxa, .cxa * { box-sizing: border-box; }
.cxa {
  --line: #E3E2DC; --brand: #167A56; --brand-hover: #116245;
  --text: #141816; --text-sub: #4E5651; --text-muted: #78817B;
  width: 100%; margin: 0 auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); -webkit-font-smoothing: antialiased;
}
.cxa-stage { position: relative; container: cxa / inline-size; }
/* Every animation plays once. Default styles are the END state, so with no animation you see both finished profiles. */
.cxa-stage * { animation-iteration-count: 1 !important; animation-fill-mode: both !important; }

/* ---------- Finished profiles: side by side, in normal flow (they set the demo height) ---------- */
.cxa-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.cxa-profiles { display: grid; grid-template-columns: repeat(3, 800px); gap: 24px; align-items: start; width: max-content; margin: 0 auto; }
.cxa-col { container: cxacol / inline-size; min-width: 0; }
.cxa .cxp { max-width: none; }
.cxa .cxp-results:not(.is-all) > li:nth-child(n+4) { display: none; }
.cxa:not(.has-js) [id^="cxp-results-more"] { display: none; }
/* Columns narrower than the original 800px: let the rank names wrap instead of colliding */
@container cxacol (max-width: 760px) {
  .cxa .cxp-stats > * { padding-left: 12px; padding-right: 8px; }
  .cxa .cxp-stats > :first-child { padding-left: 0; }
  .cxa .cxp-stats dd.cxp-rank { white-space: normal; align-items: flex-start; }
  .cxa .cxp-rank span { font-size: 12.5px; line-height: 1.25; }
  .cxa .cxp-rank i { margin-top: 1px; }
}

@keyframes cxa-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cxa-fade { from { opacity: 0; } to { opacity: 1; } }
.cxa-col { --o: 7.05s; }
.cxa-col + .cxa-col { --o: 7.25s; }
.cxa-col + .cxa-col + .cxa-col { --o: 7.45s; }
.cxa-col .cxp { animation: cxa-fade .35s ease; animation-delay: var(--o); }
.cxa-col .cxp-banner { animation: cxa-fade .45s ease; animation-delay: var(--o); }
.cxa-col .cxp-identity { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .1s); }
.cxa-col .cxp-sec[aria-labelledby^="cxp-about-h"] { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .25s); }
.cxa-col .cxp-sec[aria-labelledby^="cxp-results-h"] .cxp-sec-head { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .35s); }
.cxa-col .cxp-stats { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .43s); }
.cxa-col .cxp-results > li:nth-child(1) { animation: cxa-rise .45s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .53s); }
.cxa-col .cxp-results > li:nth-child(2) { animation: cxa-rise .45s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .61s); }
.cxa-col .cxp-results > li:nth-child(3) { animation: cxa-rise .45s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .69s); }
.cxa-col [id^="cxp-results-more"] { animation: cxa-fade .4s ease; animation-delay: calc(var(--o) + .8s); }
.cxa-col .cxp-sec[aria-labelledby^="cxp-feat-h"] { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .4s); }
.cxa-col .cxp-sec[aria-labelledby^="cxp-teams-h"] { animation: cxa-rise .5s cubic-bezier(.2,.7,.2,1); animation-delay: calc(var(--o) + .85s); }

/* ---------- Import card (hidden at the end) ---------- */
.cxa-import { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; animation: cxa-import 7.25s linear 0s; }
@keyframes cxa-import { 0%, 93.8% { opacity: 1; visibility: visible; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

.cxa-card { position: sticky; top: 40px; margin: 24px auto 0; width: min(680px, calc(100% - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 40px 40px 38px; box-shadow: 0 1px 2px rgba(11,18,16,.05), 0 30px 70px -18px rgba(11,18,16,.22); animation: cxa-card-in .45s cubic-bezier(.2,.7,.2,1) 0s; }
@keyframes cxa-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cxa-title em { font-style: normal; background: linear-gradient(90deg, #167A56, #22A06B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cxa-brand { display: flex; align-items: center; gap: 10px; height: 28px; margin-bottom: 22px; }
.cxa-brand img { width: 26px; height: auto; display: block; }
.cxa-brand span { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.cxa-title { position: relative; margin: 0; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 34px; line-height: 40px; letter-spacing: -.02em; color: var(--text); }
.cxa-sub { position: relative; margin: 8px 0 28px; font-size: 16px; line-height: 22px; color: var(--text-sub); }

/* Body: fixed pixel layout so the pointer path lines up exactly */
.cxa-body { position: relative; height: 380px; }
.cxa-form { position: absolute; inset: 0; animation: cxa-out .18s linear 4.5s; }
@keyframes cxa-out { from { opacity: 1; } to { opacity: 0; } }
.cxa-field { position: absolute; left: 0; right: 0; height: 88px; }
.cxa-field-1 { top: 0; } .cxa-field-2 { top: 104px; } .cxa-field-3 { top: 208px; }
.cxa-label { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.cxa-label img { height: 20px; width: auto; display: block; }
.cxa-input { position: relative; height: 58px; border: 1.5px solid var(--line); border-radius: 12px; background: #F9F8F5; font-size: 16px; white-space: nowrap; overflow: hidden; }
.cxa-field-1 .cxa-input { animation: cxa-focus1 2.05s linear 0s; }
.cxa-field-2 .cxa-input { animation: cxa-focus2 3.15s linear 0s; }
.cxa-field-3 .cxa-input { animation: cxa-focus3 4.35s linear 0s; }
@keyframes cxa-focus1 { 0%, 46.3% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } 46.4%, 99.8% { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(22,122,86,.12); } 100% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } }
@keyframes cxa-focus2 { 0%, 65% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } 65.1%, 99.8% { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(22,122,86,.12); } 100% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } }
@keyframes cxa-focus3 { 0%, 72.3% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } 72.4%, 99.8% { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(22,122,86,.12); } 100% { border-color: var(--line); background: #F9F8F5; box-shadow: none; } }
.cxa-input-ico { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--text-muted); }
.cxa-ph, .cxa-val { position: absolute; left: 20px; right: 16px; top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; }
.cxa-ph { color: var(--text-muted); opacity: 0; }
.cxa-field-1 .cxa-ph { animation: cxa-gone 1.6s steps(1, end) 0s; }
.cxa-field-2 .cxa-ph { animation: cxa-gone 2.7s steps(1, end) 0s; }
.cxa-field-3 .cxa-ph { animation: cxa-gone 3.8s steps(1, end) 0s; }
@keyframes cxa-gone { 0% { opacity: 1; } 100% { opacity: 0; } }
.cxa-val { color: var(--text); font-weight: 500; }
.cxa-field-1 .cxa-val { animation: cxa-paste .6s ease-out 1.6s; }
.cxa-field-2 .cxa-val { animation: cxa-paste .6s ease-out 2.7s; }
.cxa-field-3 .cxa-val { animation: cxa-paste .6s ease-out 3.8s; }
@keyframes cxa-paste { 0% { opacity: 0; } 1% { opacity: 1; background: rgba(22,122,86,.18); } 100% { opacity: 1; background: transparent; } }
.cxa-caret { position: absolute; left: 20px; top: 19px; width: 1.5px; height: 20px; background: var(--text); opacity: 0; }
.cxa-field-1 .cxa-caret { animation: cxa-caret1 1.6s linear 0s; }
.cxa-field-2 .cxa-caret { animation: cxa-caret2 2.7s linear 0s; }
.cxa-field-3 .cxa-caret { animation: cxa-caret3 3.8s linear 0s; }
@keyframes cxa-caret1 { 0%, 59.3% { opacity: 0; } 59.4%, 79% { opacity: 1; } 79.1%, 89% { opacity: 0; } 89.1%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cxa-caret3 { 0%, 82.8% { opacity: 0; } 82.9%, 90.7% { opacity: 1; } 90.8%, 94.6% { opacity: 0; } 94.7%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cxa-caret2 { 0%, 75.9% { opacity: 0; } 76%, 87% { opacity: 1; } 87.1%, 93% { opacity: 0; } 93.1%, 99.9% { opacity: 1; } 100% { opacity: 0; } }

.cxa-btn { position: absolute; left: 0; right: 0; top: 318px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: linear-gradient(135deg, #1FA06C 0%, #167A56 55%, #0F5C41 100%); color: #fff; font: 700 17px/1 Inter, sans-serif; letter-spacing: -.005em; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 6px 14px -8px rgba(11,18,16,.35); animation: cxa-press 4.45s linear 0s; }
.cxa-btn span { display: block; line-height: 1; }
.cxa-btn svg { display: block; width: 19px; height: 19px; flex-shrink: 0; }
@keyframes cxa-press { 0%, 97.2% { filter: none; transform: none; } 97.3%, 99.8% { filter: brightness(.9); transform: scale(.98); } 100% { filter: none; transform: none; } }

/* Paste prompts: appear under each box after it is clicked */
.cxa-menu { position: absolute; left: 118px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -6px rgba(11,18,16,.2); z-index: 3; opacity: 0; visibility: hidden; }
.cxa-menu::before { content: ''; position: absolute; left: 22px; top: -6px; width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.cxa-menu-1 { top: 94px; animation: cxa-menu .5s linear 1.15s; }
.cxa-menu-2 { top: 198px; animation: cxa-menu .5s linear 2.25s; }
.cxa-menu-3 { top: 302px; animation: cxa-menu .5s linear 3.35s; }
@keyframes cxa-menu { 0% { opacity: 0; visibility: visible; transform: translateY(-4px); } 15%, 85% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }
.cxa-menu span { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 7px; font-size: 14.5px; font-weight: 500; }
.cxa-menu-1 span { animation: cxa-hot1 1.65s linear 0s; }
.cxa-menu-2 span { animation: cxa-hot2 2.75s linear 0s; }
.cxa-menu-3 span { animation: cxa-hot3 3.75s linear 0s; }
@keyframes cxa-hot1 { 0%, 89.6% { background: transparent; } 89.7%, 100% { background: #EEF5F1; } }
@keyframes cxa-hot3 { 0%, 98% { background: transparent; } 98.1%, 100% { background: #EEF5F1; } }
@keyframes cxa-hot2 { 0%, 93.4% { background: transparent; } 93.5%, 100% { background: #EEF5F1; } }
.cxa-menu span svg { width: 16px; height: 16px; color: var(--text-sub); }
.cxa-menu kbd { margin-left: 18px; font: 12px Inter, sans-serif; color: var(--text-muted); }

/* Progress */
.cxa-progress { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; animation: cxa-fade .2s linear 4.58s; }
.cxa-progress-top { position: relative; display: flex; align-items: baseline; justify-content: space-between; height: 44px; margin-bottom: 14px; }
.cxa-pct { font-family: Manrope, Inter, sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; counter-reset: cxapct var(--cxa-pct); animation: cxa-pct 1.8s cubic-bezier(.3,.1,.3,1) 4.65s; }
.cxa-pct::after { content: counter(cxapct) "%"; }
@keyframes cxa-pct { from { --cxa-pct: 0; } to { --cxa-pct: 100; } }
.cxa-status { position: absolute; right: 0; bottom: 8px; font-size: 15px; font-weight: 600; }
.cxa-status-a { color: var(--text-sub); opacity: 0; animation: cxa-gone 6.45s steps(1, end) 0s; }
.cxa-status-b { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); animation: cxa-pop .3s cubic-bezier(.2,.7,.2,1) 6.45s; }
.cxa-status-b b { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cxa-status-b svg { width: 12px; height: 12px; }
@keyframes cxa-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.cxa-bar { position: relative; height: 14px; border-radius: 999px; background: #ECEBE5; overflow: hidden; }
.cxa-bar > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0F5C41 0%, #167A56 55%, #22A06B 100%); transform-origin: left; animation: cxa-bar 1.8s cubic-bezier(.3,.1,.3,1) 4.65s; }
@keyframes cxa-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cxa-bar > b { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); opacity: 0; animation: cxa-sheen 1.8s linear 4.65s; }
@keyframes cxa-sheen { 0% { left: -30%; opacity: 1; } 48% { left: 60%; opacity: 1; } 48.1% { left: -30%; } 96% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.cxa-sources { margin-top: 18px; display: grid; gap: 8px; }
.cxa-source { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-sub); white-space: nowrap; overflow: hidden; }
.cxa-source img { height: 16px; width: auto; flex-shrink: 0; }
.cxa-source span { overflow: hidden; text-overflow: ellipsis; }

/* Demo pointer (coordinates are inside .cxa-body) */
.cxa-pointer { position: absolute; width: 24px; height: 24px; z-index: 10; pointer-events: none; left: 51%; top: 350px; opacity: 0; animation: cxa-move 4.5s cubic-bezier(.45,.05,.25,1) .2s; }
.cxa-pointer svg { display: block; width: 24px; height: 24px; transform-origin: 3px 2px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25)); animation: cxa-click 4.5s linear .2s; }
@keyframes cxa-move {
  0%          { left: 74%; top: 430px; opacity: 0; }
  4.4%        { left: 71%; top: 410px; opacity: 1; }
  14.4%, 17.8% { left: 150px; top: 56px; opacity: 1; }
  25.6%, 31.1% { left: 168px; top: 116px; opacity: 1; }
  38.9%, 43.3% { left: 150px; top: 160px; opacity: 1; }
  51.1%, 56.7% { left: 168px; top: 220px; opacity: 1; }
  63.3%, 67.8% { left: 150px; top: 264px; opacity: 1; }
  75.6%, 81.1% { left: 168px; top: 324px; opacity: 1; }
  90%, 96.7%  { left: 50%; top: 346px; opacity: 1; }
  100%        { left: 51%; top: 350px; opacity: 0; }
}
@keyframes cxa-click {
  0%, 15.2%, 17.6%, 28.1%, 30.5%, 39.7%, 42.1%, 52.6%, 55%, 64.1%, 66.5%, 77%, 79.4%, 90.8%, 93.2%, 100% { transform: none; }
  16.4%, 29.3%, 40.9%, 53.8%, 65.3%, 78.2%, 92% { transform: scale(.84); }
}

/* Narrow layouts */
@container cxa (max-width: 560px) {
  .cxa-card { padding: 24px; border-radius: 14px; margin-top: 12px; }
  .cxa-title { font-size: 26px; line-height: 32px; }
  .cxa-sub { font-size: 14px; margin-bottom: 20px; }
  .cxa-input { font-size: 15px; }
  .cxa-menu { left: 70px; }
  .cxa-pct { font-size: 34px; }
  .cxa-status { font-size: 13.5px; }
}

/* ---------- Controls (need JavaScript; hidden otherwise) ---------- */
.cxa-controls { display: none; justify-content: flex-end; margin-top: 12px; }
.cxa.has-js .cxa-controls { display: flex; }
.cxa-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font: 500 12.5px Inter, sans-serif; color: var(--text-sub); cursor: pointer; }
.cxa-ctl:hover { color: var(--text); border-color: var(--text-muted); }
.cxa-ctl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cxa-ctl svg { width: 13px; height: 13px; }
/* Wide layouts: scale the whole card up so it reads as the hero of the section */
@container cxa (min-width: 1200px) { .cxa-card { zoom: 1.3; margin-top: 40px; } }
.cxa.is-video .cxa-card { zoom: 1.38; margin-top: 190px; }
.cxa.is-video .cxa-controls { display: none; }
.cxa.is-restarting .cxa-stage, .cxa.is-restarting .cxa-stage * { animation: none !important; }

/* Lightbox for banner / photo */
.cxa-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); }
.cxa-lightbox::backdrop { background: rgba(11,18,16,.82); }
.cxa-lightbox img { display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; }

/* Loop outro: quiet fade before replaying */
.cxa-stage { transition: opacity .45s ease; }
.cxa.is-outro .cxa-stage { opacity: 0; }

/* ---------- Site overrides (not part of the supplied demo) ---------- */
/* Hold on the first frame until the demo is on screen, and honour the page's "Pause motion" control. */
.cxa.is-waiting .cxa-stage, .cxa.is-waiting .cxa-stage *,
.cxa.is-paused .cxa-stage, .cxa.is-paused .cxa-stage * { animation-play-state: paused !important; }
.cxa-scroll { scrollbar-color: rgba(255,255,255,.28) transparent; scroll-snap-type: x proximity; padding-bottom: 6px; }
.cxa-col { scroll-snap-align: center; }
/* Wide screens: all three finished profiles side by side, each shown in full (the cards reflow
   at narrow widths). Smaller screens: one full-width profile at a time, swipe for the next. */
@container cxa (min-width: 1100px) {
  .cxa-scroll { overflow: visible; }
  .cxa-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}
@container cxa (max-width: 1099.98px) {
  .cxa-profiles { grid-template-columns: repeat(3, min(640px, calc(100cqi - 52px))); gap: 12px; padding: 0 16px; }
}
.cxa-controls { margin-top: 16px; }