.skill-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;overflow:hidden;border-radius:6px;background:#14251e;border:1px solid #b6a57988;vertical-align:middle;box-shadow:inset 0 1px #ffffff12;pointer-events:none;isolation:isolate}
.skill-icon__fallback{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-size:22px;line-height:1;z-index:0}
.skill-icon__art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:1}
.skill-icon__art[hidden]{display:none}
.skill-icon--tip{width:38px;height:38px;margin-right:7px;vertical-align:middle;border-color:#c3ad75}
.skill-icon--preview{width:18px;height:18px;vertical-align:-4px;margin-right:3px;border-radius:3px;box-shadow:none}
.skill-icon--preview .skill-icon__fallback{font-size:13px}
.cbtn .ic.skill-illustration{position:absolute;inset:3px;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:4px}
.cbtn .ic.skill-illustration .skill-icon{width:100%;height:100%;border:0;border-radius:inherit;box-shadow:none}
.cbtn .ic.skill-illustration~.pips{background:linear-gradient(0deg,#07110ee8,transparent);bottom:1px;padding-top:6px;text-shadow:0 1px 2px #000}
.mbtn .ic.skill-illustration{position:absolute;inset:3px;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;overflow:hidden}
.mbtn .ic.skill-illustration .skill-icon{width:100%;height:100%;border:0;border-radius:inherit;box-shadow:none}
.mbtn .ic.skill-illustration .skill-icon__art{border-radius:50%}
.mbtn .ic.skill-illustration~.hk{bottom:3px;background:#09130ed9;padding:1px 5px;border-radius:5px;text-shadow:0 1px 2px #000}
.hc-s .skill-icon--preview{margin-top:1px;margin-bottom:1px}
.cbtn.locked .skill-icon__art,.mbtn.locked .skill-icon__art{opacity:.78}
@media (prefers-reduced-motion:reduce){.skill-icon{transition:none}}