.d4pf{container-type:inline-size;display:grid;align-content:start;gap:8px}.d4pf[hidden]{display:none}.d4pf__text{display:grid;gap:2px;min-inline-size:0}.d4pf__text b{color:var(--d4lp-ink);font-size:14px;font-weight:700;line-height:1.3}.d4pf__text small{display:none;color:var(--d4lp-muted);font-size:12px;line-height:1.4}.d4pf-seg{--n: 2;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px}.d4pf-seg [data-mark=battledotnet]{--mark: oklch(0.7 0.16 250)}.d4pf-seg [data-mark=steam]{--mark: oklch(0.8 0.1 230)}.d4pf-seg [data-mark=playstation]{--mark: oklch(0.66 0.16 258)}.d4pf-seg [data-mark=xbox]{--mark: oklch(0.72 0.17 145)}.d4pf-seg [role=radio]{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;min-inline-size:0;margin:0;padding-block:0;padding-inline:12px;border:0;border-radius:var(--d4lp-r-control);background:var(--d4lp-control);color:var(--d4lp-copy);font:inherit;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer}.d4pf-seg [role=radio][hidden]{display:none}.d4pf-seg [aria-checked=true]{background:var(--d4lp-active);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--d4lp-tint) 46%,transparent);color:var(--d4lp-ink)}@media(hover:hover)and (pointer:fine){.d4pf-seg [role=radio]:hover:not([aria-checked=true]){background:color-mix(in oklch,var(--d4lp-active) 55%,var(--d4lp-control));color:var(--d4lp-ink)}}.d4pf-seg [role=radio]:active:not([aria-checked=true]){background:color-mix(in oklch,var(--d4lp-active) 80%,var(--d4lp-control))}.d4pf-seg [role=radio]:focus-visible{outline:2px solid var(--d4lp-focus);outline-offset:2px}.d4pf-seg svg{flex:none;inline-size:auto;block-size:16px;block-size:1.6cap;fill:currentColor;opacity:.55}.d4pf-seg [aria-checked=true] svg{fill:var(--mark, currentColor);opacity:1}@container (max-width: 439px){.d4pf[data-wide] .d4pf-seg [role=radio]{padding-inline:8px}.d4pf[data-wide] .d4pf-seg [role=radio] span{position:absolute;inline-size:1px;block-size:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}.d4pf[data-wide] .d4pf-seg svg{block-size:20px;block-size:2cap}.d4pf[data-wide] .d4pf__text small:not(:empty){display:block}}.d4pf-seg [role=radio]{transition:background-color .2s var(--d4lp-ease),color .2s var(--d4lp-ease),box-shadow .2s var(--d4lp-ease)}.d4pf-seg svg{transition:fill .2s var(--d4lp-ease),opacity .2s var(--d4lp-ease)}