/* One accessible character choice component in the landing and step 1. */
.yp-character-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:400px}
.yp-character-choice .yp-character-option{position:relative;display:block!important;margin:0!important;min-width:0;cursor:pointer;font:inherit}
.yp-character-choice .yp-character-option input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.yp-character-choice .yp-character-option span{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:48px;box-sizing:border-box;border:1px solid #b9b2a7;border-radius:2px;padding:10px 18px;background:transparent;color:#202631;font:500 15px/1.4 "Avenir Next",Avenir,"Trebuchet MS","Segoe UI",sans-serif;transition:border-color .15s,background-color .15s}
.yp-character-choice .yp-character-option input:checked+span{border:2px solid #405f4c;padding:9px 17px;background:#e7ecdf}
.yp-character-choice .yp-character-option input:checked+span::after{content:'✓';color:#405f4c}
.yp-character-choice .yp-character-option input:focus-visible+span{outline:2px solid #405f4c;outline-offset:4px}
.yp-character-choice .yp-character-option:hover span{border-color:#5C8D73}
@media(prefers-reduced-motion:reduce){.yp-character-choice .yp-character-option span{transition:none}}