.px-profile, .px-contact-spray {
  --px-navy: #1d3557;
  --px-navy-2: #223b5d;
  --px-blue: #457b9d;
  --px-blue-soft: #a8dadc;
  --px-red: #e63946;
  --px-red-ink: #8f1728;
  --px-paper: #edf2f4;
  --px-muted: #687d8d;
  --px-line: #d2dee4;
}

.px-profile {
  overflow: hidden;
  border: 1px solid var(--px-line);
  border-radius: 24px;
  background: var(--px-paper);
  box-shadow: 0 22px 55px rgba(29, 53, 87, .13);
  color: var(--px-navy);
}

.px-profile [hidden] { display: none !important; }

.px-card-tools { display:grid; align-items:start; padding:12px 20px 0; background:#fff; }
.px-role-toggle { grid-column:1; grid-row:1; justify-self:start; display:flex; position:relative; z-index:1; margin:4px 0; border:1px solid var(--px-line); border-radius:8px; overflow:hidden; }
.px-role-toggle button { border:0; padding:8px 12px; font:600 .75rem var(--font-body); background:white; color:var(--px-navy); cursor:pointer; }
.px-role-toggle button[aria-pressed="true"] { background:var(--px-navy); color:white; }
.px-role-toggle button:disabled { color:#8b969e; background:#f3f5f6; cursor:default; }
.px-role-toggle button:focus-visible { outline:2px solid var(--px-blue); outline-offset:-3px; }
.px-filters { width: 100%; text-align: right; }
.px-card-tools > .px-filters { grid-column:1; grid-row:1; }
.px-filters > summary { display: list-item; width: fit-content; margin-left: auto; cursor: pointer; font-weight: 700; padding: 8px 12px; }
.px-filters .pf-bar { justify-content: flex-end; margin: 8px 0 12px; }
.px-tournament-list { display: grid; gap: 16px; }
.px-tournament-result { min-width: 0; overflow: hidden; padding: clamp(16px, 3vw, 25px); border: 1px solid var(--px-line); border-top: 4px solid var(--px-blue); border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(15,46,67,.08); }
.px-event-heading { padding-bottom: 16px; border-bottom: 1px solid var(--px-line); }
.px-event-heading h3 { margin: 0 0 8px; font: 700 1.2rem/1.2 var(--font-head); text-transform: uppercase; }
.px-event-heading p { margin: 0; color: var(--px-muted); font-size: .74rem; }
.px-event-performance { padding-top: 20px; }
.px-event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.px-event-top > div:first-child { min-width: 0; }
.px-event-rank { color: var(--px-red); text-transform: uppercase; letter-spacing: .1em; font: 600 .72rem var(--font-head); }
.px-event-top h4 { margin: 8px 0 4px; color: var(--px-navy); font: 700 clamp(1.6rem, 2.5vw, 2.25rem)/1.1 var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }
.px-event-score { flex-shrink: 0; padding: 10px 11px; border-radius: 12px; background: var(--px-navy); text-align: center; }
.px-event-score strong { display: block; color: #fff; font: 700 1.8rem/1 var(--font-head); }
.px-event-score span { display: block; margin-top: 5px; color: #b7cbd8; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.px-event-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 20px 0; }
.px-event-stats div { padding: 11px 3px; border-radius: 9px; background: #edf4f7; text-align: center; }
.px-event-stats strong { display: block; color: var(--px-navy-2); font: 700 1.22rem/1 var(--font-head); }
.px-event-stats span { display: block; margin-top: 5px; color: var(--px-muted); font-size: .61rem; letter-spacing: .08em; }
.px-event-footer { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--px-line); }
.px-event-finish { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; }
.px-event-finish strong { color: var(--px-navy); font: 700 1.12rem var(--font-head); }
.px-event-finish span { color: var(--px-muted); }
.px-tournament-awards { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.px-tournament-awards > div { display: flex; align-items: center; gap: 9px; font-size: .72rem; }
.px-tournament-awards img { width: 46px; height: 46px; object-fit: contain; }

.px-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 34px;
  padding: 34px 36px 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--px-line);
  background:
    radial-gradient(circle at 88% 10%, rgba(168, 218, 220, .34), transparent 32%),
    linear-gradient(145deg, #fff 0%, #f4f8fa 100%);
  color: var(--px-navy);
}

.px-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border: 72px solid rgba(69, 123, 157, .06);
  border-radius: 50%;
  pointer-events: none;
}

.px-identity, .px-hero-side { position: relative; z-index: 1; min-width: 0; }

.px-kicker, .px-pane-heading > span, .px-section-label > span,
.px-situations > header span, .px-data-chart > header span {
  color: var(--px-red);
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.px-identity h2 {
  margin: 8px 0 7px;
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.px-identity h2 small {
  color: var(--px-blue);
  font-size: .42em;
  letter-spacing: .02em;
}

.px-identity > p {
  margin: 0;
  color: var(--px-muted);
  font-size: 1rem;
}

.px-traits {
  margin-top: 16px;
  color: var(--px-muted);
  font-size: .78rem;
  line-height: 1.5;
}

.px-hero-side {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
}

.px-headline-line strong {
  display: block;
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1;
  white-space: nowrap;
}

.px-headline-line em { color: var(--px-red); font-style: normal; }

.px-headline-line span {
  display: block;
  margin-top: 8px;
  color: var(--px-blue);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.px-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  width: 100%;
}

.px-hero-actions > span {
  color: var(--px-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.px-profile .px-share {
  margin: 0;
  min-height: 44px;
  padding: 10px 18px;
  border-color: rgba(230, 57, 70, .55);
  background: #fff;
  color: var(--px-red-ink);
  font-size: .72rem;
}

.px-profile .px-share:hover:not(:disabled) {
  border-color: var(--px-red);
  background: #fff3f4;
  color: var(--px-red-ink);
}

.px-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--px-line);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 18px rgba(29, 53, 87, .08);
  scrollbar-width: thin;
}

.px-tabs button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--px-muted);
  cursor: pointer;
  font: 700 .78rem var(--font-body);
  white-space: nowrap;
}

.px-tabs button:hover { color: var(--px-navy); background: #f3f7f9; }
.px-tabs button.is-active { background: var(--px-navy); color: #fff; }
.px-tabs button:focus-visible { outline: 3px solid rgba(69, 123, 157, .3); }

.px-body { padding: 28px; }

.px-pane-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
}

.px-pane-heading h3 {
  margin: 0;
  color: var(--px-navy);
  font-size: 1rem;
  font-weight: 500;
}

.px-card, .px-data-chart, .px-situations {
  border: 1px solid var(--px-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(29, 53, 87, .07);
}

.px-primary-card {
  overflow: hidden;
}

.px-stat-table {
  overflow-x: auto;
  border-bottom: 1px solid var(--px-line);
  scrollbar-width: thin;
}

.px-stat-row {
  display: grid;
  grid-auto-columns: minmax(70px, 1fr);
  grid-auto-flow: column;
  min-width: max-content;
}

.px-stat-row > * {
  display: grid;
  min-width: 76px;
  min-height: 62px;
  place-items: center;
  padding: 10px;
  border-right: 1px solid var(--px-line);
}

.px-stat-row > *:last-child { border-right: 0; }

.px-stat-row.is-label > * {
  min-height: 38px;
  color: var(--px-muted);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.px-stat-row:not(.is-label) > * {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: 1.35rem;
}

.px-signature {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: 24px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--px-red) 34%, var(--px-line));
  border-radius: 18px;
  background: linear-gradient(110deg, #fff, #fff6f6);
}

.px-signature-mark {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  align-content: center;
  border: 5px solid var(--px-red);
  border-radius: 50%;
  color: var(--px-red);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
}

.px-signature-mark b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-size: 2.4rem;
}

.px-signature > div strong {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: 1.45rem;
  text-transform: uppercase;
}

.px-signature > div p {
  margin: 5px 0 0;
  color: var(--px-muted);
  line-height: 1.55;
}

.px-interpretation { padding: 24px; }
.px-card > .px-interpretation:first-child { padding-top: 24px; }

.px-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.px-section-label > strong {
  color: var(--px-muted);
  font-size: .7rem;
  text-transform: uppercase;
}

.px-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.px-metric {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 7px;
  padding: 15px;
  border: 1px solid #d9e5ea;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7fbfc, #e6f0f4);
}

.px-metric span {
  color: var(--px-muted);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.px-metric strong {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: 1.55rem;
}

.px-percentile-profile {
  margin: 24px;
  padding: 24px;
  border: 1px solid var(--px-line);
  border-radius: 18px;
  background: #fff;
}

.px-percentile-profile > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.px-percentile-profile > header > div:first-child {
  display: grid;
  gap: 4px;
}

.px-percentile-profile > header > div:first-child > span,
.px-command-meters > header span {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.px-percentile-profile > header small,
.px-command-meters > header small {
  color: var(--px-muted);
  font-size: .62rem;
}

.px-percentile-scale {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px;
}

.px-percentile-scale span {
  color: var(--px-muted);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.px-comparison-legend { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:18px; color:var(--px-muted); font-size:.65rem; }
.px-comparison-legend .px-percentile-scale { display:flex; gap:18px; }
.px-stat-info { display:inline-grid; place-items:center; width:26px; height:26px; padding:0; margin-left:4px; border:1px solid var(--px-line); border-radius:50%; background:white; color:var(--px-blue); font:700 .7rem var(--font-body); cursor:pointer; }
.px-stat-info:hover, .px-stat-info:focus-visible { border-color:var(--px-blue); background:#edf3f7; }
.px-stat-dialog { width:min(640px,calc(100vw - 32px)); max-height:85dvh; box-sizing:border-box; padding:0; border:1px solid #d2dee4; border-radius:18px; color:#1d3557; background:white; box-shadow:0 20px 80px #10243955; }
.px-stat-dialog::backdrop { background:rgba(12,27,43,.6); }
.px-stat-dialog > header { position:sticky; top:0; display:flex; align-items:center; gap:16px; justify-content:space-between; padding:20px 24px; background:white; border-bottom:1px solid #d2dee4; }
.px-stat-dialog h2 { margin:0; font:700 1.3rem/1.3 var(--font-head); }
.px-stat-dialog header button { flex-shrink:0; border:1px solid #d2dee4; border-radius:6px; background:white; padding:8px 12px; color:#1d3557; cursor:pointer; }
.px-stat-guide-body { padding:0 24px 20px; font:400 15px/1.6 var(--font-body); }
.px-stat-guide-body h3 { margin:20px 0 8px; font-size:17px; }
.px-stat-guide-body dt { margin-top:14px; font-weight:700; }
.px-stat-guide-body dd { margin:3px 0 0; }
.px-stat-formula { padding:12px; background:#edf3f7; border-radius:8px; font-weight:700; }
.px-stat-sources { border-top:1px solid #d2dee4; padding-top:14px; font-size:12px; }
.px-stat-sources a { color:#285e82; text-decoration:underline; }

.px-percentile-row {
  display: grid;
  grid-template-columns: 118px minmax(180px, 1fr) 70px;
  gap: 14px;
  align-items: center;
  min-height: 47px;
  border-top: 1px dashed #c8d9df;
}

.px-percentile-row > span {
  color: var(--px-navy);
  font-size: .7rem;
  font-weight: 750;
}

.px-percentile-row > strong {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: .92rem;
  text-align: right;
}

.px-percentile-track {
  position: relative;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    #edf2f4 0 49.5%,
    #d7e2e7 49.5% 50.5%,
    #edf2f4 50.5% 100%
  );
}

.px-percentile-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #72a9b7;
}

.px-percentile-track b {
  position: absolute;
  top: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #528ba0;
  box-shadow: 0 2px 5px rgba(29, 53, 87, .24);
  color: #fff;
  font-size: .6rem;
  font-weight: 850;
  transform: translate(-50%, -50%);
}

.px-percentile-profile.is-pitching .px-percentile-track i {
  background: #e25a62;
}

.px-percentile-profile.is-pitching .px-percentile-track b,
.px-percentile-row.is-elite .px-percentile-track b {
  background: #d93846;
}

.px-percentile-row.is-elite .px-percentile-track i { background: #df4a4c; }
.px-percentile-row.is-low .px-percentile-track i { background: #63799a; }
.px-percentile-row.is-low .px-percentile-track b { background: #465d82; }

.px-percentile-row.is-unqualified .px-percentile-track i { background: #aab9c2; }
.px-percentile-row.is-unqualified .px-percentile-track b {
  width: 34px;
  height: 34px;
  background: #788b98;
  font-size: .5rem;
  letter-spacing: .03em;
}

.px-percentile-row.is-unranked .px-percentile-track i {
  background: #9bb0bd;
}

.px-percentile-row.is-unranked .px-percentile-track b {
  background: #6e8491;
}

.px-percentile-row.is-two-out {
  margin-top: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(230, 57, 70, .22);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(168, 218, 220, .16), rgba(230, 57, 70, .08));
}

.px-percentile-row.is-two-out .px-percentile-track i {
  background: linear-gradient(90deg, var(--px-navy), var(--px-blue));
}

.px-percentile-row.is-two-out > strong { color: var(--px-red-ink); }

.px-two-out-profile-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.px-two-out-profile-label i {
  color: var(--px-red);
  font-size: .78rem;
  font-style: normal;
  letter-spacing: -.14em;
}

.px-two-out-profile-label b {
  color: var(--px-navy);
  font-size: .62rem;
  letter-spacing: .05em;
  line-height: 1.05;
}

.px-two-out-profile-label em { color: var(--px-red); font-style: normal; }

.px-command-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--px-line);
}

.px-command-meters > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.px-command-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 13px;
  border-radius: 11px;
  background: #f2f6f8;
}

.px-command-meter span {
  color: var(--px-muted);
  font-size: .64rem;
  font-weight: 750;
}

.px-command-meter strong {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-size: .88rem;
}

.px-command-meter > i {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6ea;
}

.px-command-meter > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef7a80, var(--px-red));
}

.px-visual-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 26px;
  margin: 8px 24px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--px-line);
}

.px-visual-profile.is-solo { grid-template-columns: 1fr; }
.px-visual-profile > div, .px-visual-side { min-width: 0; }
.px-visual-profile.is-solo .px-visual-side {
  padding-left: 0;
  border-left: 0;
}

.px-visual-profile .px-percentile-profile {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.px-visual-side {
  display: grid;
  align-content: start;
  gap: 28px;
  padding-left: 26px;
  border-left: 1px solid var(--px-line);
}

.px-hit-mix > header,
.px-game-trend > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.px-trend-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--px-muted);
  font-size: .56rem;
  white-space: nowrap;
}

.px-trend-control > span {
  color: var(--px-muted) !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.px-trend-control select {
  max-width: 134px;
  min-height: 28px;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--px-line);
  border-radius: 5px;
  color: var(--px-navy);
  background: #fff;
  font: 700 .58rem var(--font-body);
}

.px-trend-note {
  display: block;
  margin: -8px 0 12px;
  color: var(--px-muted);
  font-size: .56rem;
  line-height: 1.35;
}

.px-hit-mix > header span,
.px-game-trend > header span {
  color: var(--px-navy);
  font: 700 1.02rem/1 var(--font-head);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.px-hit-mix > header small,
.px-game-trend > header small {
  color: var(--px-muted);
  font-size: .56rem;
  line-height: 1.35;
  text-align: right;
}

.px-hit-stack {
  display: flex;
  width: 100%;
  height: 20px;
  overflow: hidden;
  border-radius: 5px;
  background: #dce7eb;
}

.px-hit-stack i { display: block; height: 100%; }
.px-hit-stack .is-single { background: #2d789a; }
.px-hit-stack .is-double { background: #6656c6; }
.px-hit-stack .is-triple { background: #e7a628; }
.px-hit-stack .is-homer { background: #d72d67; }

.px-hit-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.px-hit-legend span {
  color: var(--px-muted);
  font-size: .56rem;
  white-space: nowrap;
}

.px-hit-legend span > i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
}

.px-hit-legend b { color: var(--px-navy); font-size: .68rem; }
.px-hit-legend .is-single > i { background: #2d789a; }
.px-hit-legend .is-double > i { background: #6656c6; }
.px-hit-legend .is-triple > i { background: #e7a628; }
.px-hit-legend .is-homer > i { background: #d72d67; }

.px-trend-plot {
  display: grid;
  max-height: 360px;
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: #9db8c6 transparent;
  scrollbar-width: thin;
}

.px-trend-game {
  display: grid;
  grid-template-columns: minmax(112px, .8fr) minmax(88px, 1fr) 45px auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.px-trend-label { display: grid; min-width: 0; }
.px-trend-label small { color: var(--px-muted); font-size: .5rem; text-transform: uppercase; }

.px-trend-label span {
  overflow: hidden;
  color: var(--px-navy);
  font-size: .58rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-trend-track {
  height: 13px;
  overflow: hidden;
  border-radius: 3px;
  background: #dce7eb;
}

.px-trend-track b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #4d91ae;
}

.px-trend-track.is-pitching b { background: #dd5861; }

.px-trend-game > strong {
  color: var(--px-navy);
  font: 700 .72rem/1 var(--font-head);
  text-align: right;
  white-space: nowrap;
}

.px-trend-game > i {
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--px-red);
  font: 700 .46rem var(--font-body);
  font-style: normal;
  white-space: nowrap;
}

.px-approach-grid, .px-moment-grid { display: grid; gap: 18px; }
.px-approach-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.px-moment-grid > .situational-panel { margin: 0; }

.px-approach-profile { padding: 22px; }

.px-approach-profile > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--px-line);
}

.px-approach-profile > header > div { display: grid; gap: 4px; }
.px-approach-profile > header span,
.px-quality > header span,
.px-approach-group > header span {
  color: var(--px-navy);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.px-approach-profile > header span, .px-quality > header span { font-size: 1rem; }
.px-approach-profile > header small,
.px-approach-group > header small {
  color: var(--px-muted);
  font-size: .58rem;
  line-height: 1.35;
}

.px-approach-profile > header > strong {
  color: var(--px-red-ink);
  font-size: .62rem;
  white-space: nowrap;
}

.px-approach-groups { display: grid; gap: 18px; margin-top: 18px; }

.px-approach-group > header {
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
}

.px-approach-group > header span { font-size: .78rem; }

.px-approach-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  min-height: 52px;
  padding: 9px 0;
  border-top: 1px dashed #c8d9df;
}

.px-approach-stat > div { display: grid; gap: 2px; }
.px-approach-stat span { color: var(--px-navy); font-size: .66rem; font-weight: 780; }
.px-approach-stat small { color: var(--px-muted); font-size: .54rem; line-height: 1.3; }
.px-approach-stat > strong {
  color: var(--px-navy);
  font: 700 .94rem/1 var(--font-head);
  text-align: right;
}

.px-approach-stat > i {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf1;
}

.px-approach-stat > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--px-blue);
}

.px-stat-row > strong.is-team-leader { color:var(--px-red, #bd2031); }
.px-leader-note { margin:8px 22px; color:var(--px-muted); font-size:.56rem; }
.px-approach-stat > .px-approach-comparison { grid-column:1 / -1; gap:7px; padding-top:7px; }
.px-approach-comparison-row { display:grid; grid-template-columns:120px minmax(0, 1fr) 50px; align-items:center; gap:10px; }
.px-approach-comparison-row > span { font-size:.54rem; font-weight:500; }
.px-approach-comparison-row > strong { text-align:right; color:var(--px-navy); font-size:.6rem; }
.px-approach-comparison-row > i { height:9px; background:#e4edf1; border-radius:3px; overflow:hidden; }
.px-approach-comparison-row > i > b { display:block; height:100%; background:var(--px-blue); }
.px-approach-comparison-row.is-peer > i > b { background:#95a8b3; }
@media(max-width:600px) {
  .px-approach-comparison-row { grid-template-columns:100px minmax(0, 1fr) 42px; gap:6px; }
}

.px-compact-profile { padding: 22px; }
.px-compact-profile > header {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--px-line);
}
.px-compact-profile > header > div { display: grid; gap: 4px; }
.px-compact-profile > header span {
  color: var(--px-navy);
  font: 700 1rem/1 var(--font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.px-compact-profile > header small { color: var(--px-muted); font-size: .58rem; }
.px-compact-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-compact-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px dashed #c8d9df;
}
.px-compact-stat:nth-child(odd) { padding-right: 18px; }
.px-compact-stat:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--px-line);
}
.px-compact-stat span { color: var(--px-muted); font-size: .66rem; font-weight: 750; }
.px-compact-stat strong { color: var(--px-navy); font: 700 1rem/1 var(--font-head); }

.px-contact-spray { padding: 22px; }
.px-field-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.px-field-header h3 { margin:0; font:700 1.05rem/1.2 var(--font-head); text-transform:uppercase; color:var(--px-navy); }
.px-field-header p { margin:4px 0 0; color:var(--px-muted); font-size:.64rem; }
.px-spray-stage { display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(190px, 1fr); gap:24px; align-items:center; }
.px-spray-canvas { position:relative; min-width:0; }
.px-spray-canvas > svg { display:block; width:100%; height:auto; }
.px-field-label { fill:#658578; font:700 17px var(--font-body); text-anchor:middle; letter-spacing:2px; }
.px-field-label text:last-child { font-size:11px; }
.px-field-marker { position:absolute; display:grid; place-items:center; width:7.5%; aspect-ratio:1; min-width:0; min-height:0; padding:0; border:2px solid white; border-radius:50%; transform:translate(-50%, -50%); box-shadow:0 2px 5px #183d3d30; font:700 clamp(10px, 1.3vw, 15px)/1 var(--font-body); cursor:pointer; }
.px-field-marker.has-large-count { font-size:clamp(9px, 1.1vw, 13px); }
.px-field-marker.is-single, .px-field-key .is-single { background:#2d8760; color:white; }
.px-field-marker.is-xbh, .px-field-key .is-xbh { background:#c32f42; color:white; border-radius:3px; transform:translate(-50%, -50%) rotate(45deg); }
.px-field-marker.is-xbh > span { transform:rotate(-45deg); }
.px-field-marker.is-nonhit, .px-field-key .is-nonhit { background:#fff; border-color:#344c64; color:#344c64; }
.px-field-marker:hover, .px-field-marker:focus-visible, .px-field-marker.is-selected { outline:3px solid #153450; outline-offset:3px; z-index:1; }
.px-spray-selection { margin:0 0 12px; color:var(--px-muted); font-size:.64rem; }
.px-contact-mix { margin-top:16px; }
.px-contact-mix h4 { margin:0; font:700 .75rem/1.2 var(--font-head); color:var(--px-navy); text-transform:uppercase; }
.px-contact-mix > p { margin:4px 0 8px; color:var(--px-muted); font-size:.52rem; }
.px-contact-type { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 8px; width:100%; min-height:40px; padding:7px 8px; margin-top:4px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--px-navy); font:500 .57rem/1.3 var(--font-body); text-align:left; cursor:pointer; }
.px-contact-type strong { font-weight:800; }
.px-contact-type small { color:var(--px-muted); font-size:.49rem; align-self:center; min-width:38px; text-align:right; }
.px-contact-type > i { grid-column:1 / -1; height:3px; background:#e4edf1; border-radius:3px; overflow:hidden; }
.px-contact-type > i > b { display:block; height:100%; background:var(--px-blue); }
.px-contact-type[aria-pressed="true"] { background:#e8f0f4; border-color:#86acbe; }
.px-contact-type:hover { background:#f0f5f7; }
.px-contact-type:focus-visible { outline:2px solid var(--px-navy); outline-offset:2px; }
.px-spray-totals { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 14px; }
.px-spray-totals > div { display:grid; gap:5px; border-bottom:1px solid var(--px-line); padding-bottom:12px; }
.px-spray-totals strong { font:700 1.4rem/1 var(--font-head); color:var(--px-navy); }
.px-spray-totals span { font-size:.54rem; color:var(--px-muted); }
.px-field-key { display:flex; flex-wrap:wrap; gap:12px 16px; margin:18px 0; font-size:.54rem; color:var(--px-navy); }
.px-field-key > span { display:flex; align-items:center; gap:7px; }
.px-field-key i { display:inline-block; width:10px; height:10px; border-radius:50%; border:1px solid transparent; }
.px-field-key .is-xbh { transform:rotate(45deg); }
.px-spray-detail { margin:0; padding:12px; border-radius:8px; background:#edf3f5; color:var(--px-navy); font-size:.58rem; line-height:1.5; min-height:65px; }
.px-spray-unlocated { margin:12px 0 0; font-size:.52rem; line-height:1.4; color:var(--px-muted); }
.px-field-footnote { border-top:1px solid var(--px-line); padding-top:12px; margin-top:12px; color:var(--px-muted); font-size:.54rem; line-height:1.5; }
.px-spray-no-location { position:absolute; top:45%; left:20%; width:60%; text-align:center; color:var(--px-navy); font-size:.65rem; }
@media(max-width:650px) {
  .px-field-header { align-items:flex-start; gap:10px; }
  .px-field-header h3 { font-size:.86rem; }
  .px-spray-stage { grid-template-columns:1fr; gap:4px; }
  .px-spray-totals { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .px-spray-totals strong { font-size:1.1rem; }
  .px-spray-selection { margin-bottom:8px; }
  .px-field-key { margin:12px 0; }
}
.px-contact-spray .bip-grid-panel { margin: 0; }
.px-contact-spray .bip-head h3 {
  color: var(--px-navy);
  font: 700 1rem/1 var(--font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.px-contact-spray .bip-scope,
.px-contact-spray .bip-legend { color: var(--px-muted); }
.px-contact-spray .bip-stat,
.px-contact-spray .bip-rowtotal,
.px-contact-spray .bip-coltotal,
.px-contact-spray .bip-cell.heat-0 { background: #e7eff2; }
.px-contact-spray .bip-stat strong,
.px-contact-spray .bip-count,
.px-contact-spray .bip-rowhead strong { color: var(--px-navy); }
.px-contact-spray .bip-cell.heat-1 { background: #d9e9ed; }
.px-contact-spray .bip-cell.heat-2 { background: #bedbe2; }
.px-contact-spray .bip-cell.heat-3 { background: #91c2cf; }
.px-contact-spray .bip-cell.heat-4 { background: #4e98af; color: #fff; }
.px-contact-spray .bip-cell.heat-5 { background: #2f7e99; color: #fff; }
.px-contact-spray .bip-xbh { background: var(--px-red); }

.px-data-chart, .px-situations { padding: 24px; }

.px-data-chart > header,
.px-situations > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.px-data-chart > header > div { display: grid; gap: 4px; }
.px-data-chart > header small, .px-situations > header small {
  color: var(--px-muted);
  font-size: .7rem;
}

.px-data-chart > header > strong {
  color: var(--px-red-ink);
  font-family: var(--font-head);
  font-size: .82rem;
  white-space: nowrap;
}

.px-chart-empty, .px-empty {
  margin: 0;
  padding: 30px;
  border: 1px dashed #bdccd3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  color: var(--px-muted);
  text-align: center;
}

.px-spray-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1.15fr .85fr;
  gap: 8px;
  min-height: 330px;
  padding: 12px;
  border-radius: 17px;
  background: linear-gradient(180deg, #d9edf0 0 57%, #e9dfc7 57% 100%);
}

.px-spray-zone {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  border: 1px solid rgba(44, 91, 111, .15);
  border-radius: 14px;
  background: rgba(255, 255, 255, .42);
}

.px-spray-zone.is-infield {
  border-color: rgba(133, 94, 42, .14);
  background: rgba(255, 250, 237, .56);
}

.px-spray-zone > span {
  position: absolute;
  top: 9px;
  left: 10px;
  color: #5f7886;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.px-spray-bubble {
  display: grid;
  width: var(--bubble);
  height: var(--bubble);
  place-items: center;
  align-content: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--px-navy-2);
  box-shadow: 0 7px 18px rgba(29, 53, 87, .2);
  color: #fff;
}

.px-spray-bubble.is-hit { background: #3184aa; }
.px-spray-bubble.is-xbh { background: var(--px-red); }
.px-spray-bubble strong { font-family: var(--font-head); font-size: .9rem; }
.px-spray-bubble small { margin-top: 3px; font-size: .48rem; text-transform: uppercase; }

.px-spray > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  margin-top: 12px;
  color: var(--px-muted);
  font-size: .64rem;
}

.px-spray > footer span { display: flex; align-items: center; gap: 5px; }
.px-spray > footer i { width: 8px; height: 8px; border-radius: 50%; background: #3184aa; }
.px-spray > footer i.is-xbh { background: var(--px-red); }

.px-decision-key {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--px-muted);
  font-size: .66rem;
}

.px-decision-key-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.px-decision-key-side.is-swing { justify-content: flex-end; text-align: right; }
.px-decision-key-side strong { color: var(--px-navy); text-transform: uppercase; }
.px-decision-key-side span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.px-decision-key-side i { width: 10px; height: 10px; border-radius: 2px; }
.px-decision-key .is-ball, .px-decision-segment.is-ball { background: #dce3ed; }
.px-decision-key .is-called, .px-decision-segment.is-called { background: var(--px-navy-2); }
.px-decision-key .is-whiff, .px-decision-segment.is-whiff { background: #b3282d; }
.px-decision-key .is-foul, .px-decision-segment.is-foul { background: #e8a6a9; }
.px-decision-key .is-out, .px-decision-segment.is-out { background: #8a96ac; }
.px-decision-key .is-hit, .px-decision-segment.is-hit { background: #2d8760; }
.px-decision-key .is-safe, .px-decision-segment.is-safe { background: #c9a227; }
.px-decision-key .is-unknown-contact, .px-decision-segment.is-unknown-contact { background: #b8adca; }
.px-decision-rows { display: grid; gap: 4px; }

.px-decision-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 3px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 6px;
}

.px-decision-row.is-two-strikes {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  background: transparent;
  border-radius: 2px;
}

.px-decision-count { font-family: var(--font-head); font-size: .9rem; }
.px-decision-half { display: flex; min-width: 0; gap: 2px; overflow: hidden; }
.px-decision-half.is-take { justify-content: flex-end; }
.px-decision-segment { flex: 0 0 auto; min-width: 2px; height: 17px; }
.px-decision-spine { width: 3px; height: 25px; background: var(--px-navy-2); }
.px-decision-total { color: var(--px-muted); font-size: .66rem; text-align: right; white-space: nowrap; }
.px-count-coverage { color:var(--px-muted); font-size:.7rem; margin:8px 0 0; }
.px-quality { border: 1px solid var(--px-line); background: white; border-radius: 12px; padding: 14px 22px; }
.px-quality > header { margin-bottom:10px; }
.px-quality-scroll { overflow-x:auto; border:1px solid var(--px-line); border-radius:14px; }
.px-quality-grid { width:100%; min-width:1000px; table-layout:fixed; border-collapse:collapse; text-align:center; background:white; }
.px-quality-grid th { padding:9px 10px; font-family:var(--font-body); font-size:.66rem; line-height:1.4; font-weight:780; color:var(--px-navy); vertical-align:top; border-right:1px solid var(--px-line); }
.px-quality-grid td { padding:6px 10px 12px; vertical-align:top; border-right:1px solid var(--px-line); }
.px-quality-grid th:last-child, .px-quality-grid td:last-child { border-right:0; }
.px-quality-grid strong { display:block; white-space:nowrap; font:700 .94rem/1 var(--font-head); color:var(--px-navy); }
.px-quality-grid small { display:block; margin-top:6px; color:var(--px-muted); font-family:var(--font-body); font-size:.54rem; }
.px-quality-scroll-hint { display:none; }
@media(max-width:1150px) { .px-quality-scroll-hint { display:inline; } }
.px-quality > p { margin: 10px 0 0; font-size: .65rem; color: var(--px-muted); }

.px-decision-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--px-line);
  color: var(--px-muted);
  font-size: .65rem;
}

.px-decision-footer strong { color: var(--px-red-ink); text-align: right; }

.px-situation + .px-situation { margin-top: 16px; }

.px-situation > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 12px;
}

.px-situation span { color: var(--px-navy); font-weight: 700; }
.px-situation strong { color: var(--px-navy); font-family: var(--font-head); font-size: 1.45rem; }
.px-situation small { color: var(--px-muted); white-space: nowrap; }
.px-situation-track { height: 9px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #e8f0f3; }
.px-situation-track i { display: block; height: 100%; border-radius: inherit; background: var(--px-blue); }

.px-situation.is-two-out {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(69, 123, 157, .08), rgba(230, 57, 70, .08));
}

.px-situation.is-two-out span { color: var(--px-red-ink); letter-spacing: .08em; }
.px-situation.is-two-out span i { color: var(--px-red); font-style: normal; letter-spacing: -.08em; }
.px-situation.is-two-out .px-situation-track i { background: linear-gradient(90deg, var(--px-blue) 0 72%, var(--px-red) 72%); }

.px-source-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 24px 24px;
  padding: 11px 13px;
  border-left: 4px solid var(--px-red);
  border-radius: 8px;
  background: #fff6f6;
  color: var(--px-muted);
  font-size: .68rem;
  line-height: 1.45;
}

.px-source-note strong {
  flex: 0 0 auto;
  color: var(--px-red-ink);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.px-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.px-game {
  overflow: hidden;
  border: 1px solid var(--px-line);
  border-radius: 17px;
  background: #fff;
}

.px-game-summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  width: 100%;
  padding: 17px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.px-game-summary:hover { background: #f5f9fb; }
.px-game-summary:focus-visible {
  outline: 3px solid rgba(69, 123, 157, .35);
  outline-offset: -3px;
}

.px-game-result {
  display: grid;
  min-height: 64px;
  place-items: center;
  align-content: center;
  border-radius: 12px;
  background: var(--px-navy-2);
  color: #fff;
  font-family: var(--font-head);
  text-align: center;
}

.px-game-result.is-w { background: #227254; }
.px-game-result.is-l { background: #a63c45; }
.px-game-result small { margin-top: 3px; font: 600 .65rem var(--font-body); }
.px-game-meta span { color: var(--px-muted); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.px-game-meta h4 { margin: 4px 0 0; color: var(--px-navy); font-size: .92rem; }
.px-game-summary > p { grid-column: 2; margin: -4px 0 0; color: var(--px-blue); font-size: .72rem; font-weight: 700; }

.px-game-open-label {
  grid-column: 2;
  color: var(--px-red-ink);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.px-game-expanded {
  display: grid;
  gap: 12px;
  padding: 0 17px 17px 104px;
  border-top: 1px dashed var(--px-line);
}

.px-game-expanded[hidden] { display: none; }
.px-game-expanded section { padding-top: 12px; }
.px-game-expanded section > strong {
  color: var(--px-muted);
  font-size: .56rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.px-game-expanded section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.px-game-expanded section span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #edf4f7;
  color: var(--px-muted);
  font-size: .56rem;
}

.px-game-expanded section span b { color: var(--px-navy); font-size: .7rem; }
.px-game-expanded > small { color: var(--px-muted); font-size: .6rem; }

.px-games-more {
  display: block;
  width: min(100%, 440px);
  margin: 18px auto 0;
  padding: 11px 16px;
  border: 1px solid var(--px-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--px-navy);
  cursor: pointer;
  font: 750 .72rem var(--font-body);
}

.px-games-more:hover { background: #edf5f8; }
.px-games-more:focus-visible { outline: 3px solid rgba(69, 123, 157, .35); outline-offset: 2px; }

.px-game-log-view { padding: 20px; }
.px-game-log-view > p {
  margin: 0 0 14px;
  color: var(--px-muted);
  font-size: .68rem;
}
.px-game-log-view .game-log-block h5 {
  color: var(--px-navy);
  font: 700 .84rem/1 var(--font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.px-game-log-view .game-log-table th { background: #edf3f6; }

.px-profile-details { padding: 4px; }
.px-profile-details > .px-interpretation { margin: 0; }
.px-profile-details > .external-profiles,
.px-profile-details > .player-evidence,
.px-profile-details > .intel-limitations { margin: 12px; }

@media (max-width: 920px) {
  .px-hero { grid-template-columns: 1fr; }
  .px-hero-side { min-height: 0; align-items: flex-start; text-align: left; }
  .px-hero-actions { justify-content: flex-start; }
  .px-approach-grid { grid-template-columns: 1fr; }
  .px-visual-profile { grid-template-columns: 1fr; }
  .px-visual-side { padding-top: 22px; padding-left: 0; border-top: 1px solid var(--px-line); border-left: 0; }
  .px-games { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .px-profile { margin-inline: 0; border-radius: 18px; }
  .px-hero { padding: 27px 20px 24px; gap: 24px; }
  .px-identity h2 { font-size: clamp(2.2rem, 12vw, 3.6rem); }
  .px-headline-line strong { font-size: clamp(1.65rem, 8vw, 2.35rem); white-space: normal; }
  .px-hero-actions { align-items: flex-start; flex-direction: column; }
  .px-tabs { padding-inline: 10px; }
  .px-body { padding: 18px 10px 22px; }
  .px-stat-row { min-width: 0; grid-auto-columns: minmax(0, 1fr); }
  .px-stat-row > * { min-width: 0; min-height: 52px; padding: 8px 2px; }
  .px-stat-row.is-label > * { min-height: 34px; font-size: .46rem; letter-spacing: .02em; }
  .px-stat-row:not(.is-label) > * { font-size: .88rem; }
  .px-pane-heading { align-items: flex-start; flex-direction: column; gap: 4px; padding-inline: 6px; }
  .px-signature { grid-template-columns: 78px minmax(0, 1fr); gap: 15px; margin: 14px; padding: 15px; }
  .px-signature-mark { width: 72px; height: 72px; border-width: 4px; font-size: .48rem; }
  .px-signature-mark b { font-size: 1.8rem; }
  .px-signature > div strong { font-size: 1.12rem; }
  .px-signature > div p { font-size: .78rem; }
  .px-interpretation, .px-data-chart, .px-situations { padding: 16px; }
  .px-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-percentile-profile { margin: 14px; padding: 16px; }
  .px-percentile-scale { display: none; }
  .px-percentile-row { grid-template-columns: 92px minmax(120px, 1fr) 52px; gap: 10px; }
  .px-percentile-row > span { font-size: .64rem; }
  .px-percentile-row.is-two-out { grid-template-columns: 108px minmax(105px, 1fr) 34px; }
  .px-command-meters { grid-template-columns: 1fr; }
  .px-visual-profile { gap: 20px; margin: 4px 14px 18px; padding-top: 18px; }
  .px-visual-side { gap: 22px; padding-top: 18px; }
  .px-hit-mix > header, .px-game-trend > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .px-hit-mix > header small, .px-game-trend > header small { text-align: left; }
  .px-trend-game { grid-template-columns: minmax(92px, .8fr) minmax(76px, 1fr) 42px auto; gap: 7px; }
  .px-spray-field { min-height: 265px; padding: 7px; gap: 5px; }
  .px-spray-zone > span { top: 6px; left: 7px; font-size: .52rem; }
  .px-decision-key { display: grid; gap: 8px; }
  .px-decision-key-side.is-swing { justify-content: flex-start; text-align: left; }
  .px-decision-row { grid-template-columns: 32px minmax(0, 1fr) 2px minmax(0, 1fr) 68px; }
  .px-decision-total { font-size: .58rem; }
  .px-approach-profile { padding: 16px; }
  .px-compact-profile { padding: 16px; }
  .px-compact-stats { grid-template-columns: 1fr; }
  .px-compact-stat:nth-child(odd), .px-compact-stat:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }
  .px-contact-spray { padding: 14px; }
  .px-contact-spray .bip-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .px-contact-spray .bip-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .px-contact-spray .bip-stat {
    min-width: 0;
    padding: 7px 3px;
  }
  .px-contact-spray .bip-stat strong { font-size: 1rem; }
  .px-contact-spray .bip-stat span { font-size: .52rem; letter-spacing: .04em; }
  .px-contact-spray .bip-scroll { overflow-x: visible; }
  .px-contact-spray .bip-grid {
    width: 100%;
    table-layout: fixed;
    border-spacing: 2px;
    font-size: .66rem;
  }
  .px-contact-spray .bip-rowhead {
    width: 52px;
    max-width: 52px;
    white-space: normal;
  }
  .px-contact-spray .bip-rowhead strong { font-size: .7rem; }
  .px-contact-spray .bip-rowmeta { font-size: .52rem; }
  .px-contact-spray .bip-dirhead { font-size: .54rem; letter-spacing: .03em; }
  .px-contact-spray .bip-depthhead { font-size: .5rem; }
  .px-contact-spray .bip-cell,
  .px-contact-spray .bip-rowtotal {
    min-width: 0;
    padding: 6px 1px;
  }
  .px-contact-spray .bip-rate { font-size: .55rem; }
  .px-contact-spray .bip-xbh { padding-inline: 3px; font-size: .48rem; }
  .px-contact-spray .bip-legend { font-size: .58rem; line-height: 1.4; }
  .px-approach-profile > header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .px-situation > div:first-child { grid-template-columns: minmax(0, 1fr) auto; }
  .px-situation small { grid-column: 1; grid-row: 2; }
  .px-source-note { align-items: flex-start; flex-direction: column; margin: 0 14px 18px; }
  .px-game-summary { grid-template-columns: 64px minmax(0, 1fr); padding: 13px; }
  .px-game-summary > p { font-size: .67rem; }
  .px-game-expanded { padding: 0 13px 13px 90px; }
}

.px-approach-grid { grid-template-columns:minmax(0,1fr); }
.px-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.px-summary-metric { min-width:0; padding:12px; background:#f3f6f8; border-radius:8px; }
.px-summary-metric > span, .px-summary-metric > small { display:block; color:var(--px-muted); font-size:.75rem; line-height:1.4; }
.px-summary-metric > strong { display:block; margin:6px 0; color:var(--px-navy); font:700 1.25rem/1.2 var(--font-head); }
.px-summary-metric > small { font-size:.68rem; }
.px-summary-key { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px; font-size:.7rem; color:var(--px-muted); }
.px-summary-key span { display:flex; align-items:center; gap:5px; }
.px-summary-key i { width:10px; height:10px; border-radius:2px; }
.px-summary-buckets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.px-summary-bucket { min-width:0; border:1px solid var(--px-line); border-radius:12px; padding:16px; }
.px-summary-bucket h3 { margin:0; color:var(--px-red-ink); font:700 .85rem/1.3 var(--font-head); text-transform:uppercase; letter-spacing:.05em; }
.px-summary-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.px-summary-heading > div:first-child { min-width:0; }
.px-summary-heading .px-summary-counts { margin-bottom:0; }
.px-summary-average { flex:none; text-align:right; color:var(--px-navy); }
.px-summary-average strong { display:block; font:700 clamp(1.8rem,3vw,2.6rem)/1 var(--font-head); font-variant-numeric:tabular-nums; }
.px-summary-average span { display:block; margin-top:5px; color:var(--px-muted); font-size:.65rem; font-weight:700; letter-spacing:.08em; }
.px-summary-counts { margin:4px 0 12px; color:var(--px-muted); font-size:.68rem; line-height:1.5; }
.px-summary-rate { margin:0 0 12px; color:var(--px-muted); font-size:.75rem; }
.px-summary-rate strong { margin-right:6px; color:var(--px-navy); font:700 1.25rem/1 var(--font-head); }
.px-summary-bar { display:flex; width:100%; height:16px; overflow:hidden; border-radius:3px; }
.px-summary-bar i { display:block; height:100%; }
.px-summary-note { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--px-line); font-size:.7rem; color:var(--px-muted); line-height:1.5; }
.px-summary-empty { margin:12px 0; color:var(--px-muted); font-size:.62rem; }
.px-summary-two { border:2px solid var(--px-navy); }
.px-summary-two .px-summary-metric { padding:8px 0; background:none; }
.px-summary-two .px-summary-strip { margin-bottom:10px; }
@media(max-width:650px) {
  .px-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-summary-buckets { grid-template-columns:minmax(0,1fr); }
  .px-approach-summary > header { align-items:start; flex-direction:column; }
}
@media(max-width:650px) {
  .px-decision-key { align-items:start; }
  .px-decision-footer { display:block; }
  .px-decision-footer strong { display:block; margin-top:6px; }
}