.tp-avatar { display:inline-block; position:relative; flex:none; width:34px; height:34px; overflow:hidden; border-radius:50%; background:#e4f5f3; vertical-align:middle; }
.tp-avatar img { position:absolute; width:170%; height:170%; max-width:none; object-fit:contain; left:-35%; top:-5%; }
.tp-avatar--boy img, .tp-avatar--girl img { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:center 22%; }
.tp-studentbtn { display:inline-flex; align-items:center; gap:8px; }
.tp-avatarPicker { margin:16px 0; padding:0; border:0; }
.tp-avatarPicker legend { font-size:.95rem; font-weight:600; margin-bottom:8px; }
.tp-avatarPicker__options { display:flex; flex-wrap:wrap; gap:10px; }
.tp-avatarPicker__option { position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:90px; padding:10px 14px; border:2px solid #d9e6e9; border-radius:16px; background:#fff; color:#173958; font-weight:600; }
.tp-avatarPicker__option input { position:absolute; width:1px; height:1px; opacity:0; }
.tp-avatarPicker__option:has(input:checked) { border-color:#25817d; background:#edf9f7; box-shadow:0 0 0 1px #25817d; }
.tp-avatarPicker__option:has(input:focus-visible) { outline:3px solid #173958; outline-offset:3px; }
.tp-avatarPicker__option .tp-avatar { width:64px; height:64px; }
.tp-learnerRecord + .tp-learnerRecord { border-top:1px solid #d9e6e9; padding-top:20px; margin-top:20px; }
.tp-learnerHero { display:block; width:100%; height:100%; overflow:hidden; }
.math-path__guide .tp-learnerHero { width:240px; height:240px; border-radius:24px; }
.tp-mmPath__numberGuide .tp-learnerHero { min-height:176px; }
@media(max-width:600px) { .tp-avatarPicker__options { gap:8px; } .tp-avatarPicker__option { min-width:72px; padding:8px; } .tp-avatarPicker__option .tp-avatar { width:52px; height:52px; } .tp-mmPath__numberGuide .tp-learnerHero { min-height:140px; } }