hero-list{overflow-y:auto;flex:1;display:flex;flex-wrap:wrap;margin-right:.25em;padding:.25em;border:2px solid silver}@media screen and (max-width: 576px){hero-list{overflow-x:hidden;overflow-y:auto;margin-right:0;padding:.125em}}hero-list button{border:none;padding:0;background-color:rgba(0,0,0,0);color:inherit}hero-list .hero-option-wrap{flex:1 0 auto;min-width:8.75em;width:20%}hero-list .hero-option-wrap:focus{box-shadow:inset 0 0 .25em .25em rgba(135,206,235,.25)}hero-list .hero-option-wrap.active .hero-option{border-color:skyblue;background-color:rgba(135,206,235,.25)}hero-list .hero-option-wrap.filter{visibility:hidden;height:0}hero-list .hero-option-wrap:has(.icon-collect:not(.hidden)){order:-1}hero-list .hero-option{display:flex;flex-direction:column;justify-content:center;margin:.25em;padding:.25em;border:2px solid gray;cursor:pointer}@media screen and (max-width: 576px){hero-list .hero-option{margin:.125em}}hero-list .hero-option .name{flex:1;display:flex;align-items:center}hero-list .hero-option .rarity{overflow:hidden;display:inline-flex;justify-content:center;align-items:center;margin-right:.25em;width:1.75em;height:1.75em;border-width:3px;border-style:double;font-size:.75em;text-align:center}hero-list .hero-option .hero-name{flex:1;display:inline-flex;align-items:center}hero-list .hero-option .icon-collect{margin-left:auto;padding-left:.25em}hero-list .hero-option .icon-collect.hidden{display:none}hero-list .hero-option .state-mark{display:flex;justify-content:flex-start;align-items:center;margin-top:.25em;height:1em}hero-list .hero-option .state-mark .icon{width:1em;height:1em;font-size:.75em}hero-list .hero-option .state-mark .icon:not(:last-child){margin-right:.25em}hero-list .hero-option .state-mark .open-timing{font-weight:bold}hero-list .hero-option .state-mark .has-skin{color:#deb887}hero-introduction{flex:1;display:flex;flex-direction:column;margin:.5em;margin-bottom:0}@media screen and (max-width: 768px){hero-introduction{font-size:.9em}}@media screen and (max-width: 576px){hero-introduction{font-size:.8em}}hero-introduction .hero-header{position:sticky;top:0;display:flex;align-items:center;margin:0;margin-right:.25em;margin-bottom:.25em;background-color:#142331;font-size:2em}hero-introduction .hero-header .flag{position:relative;margin-right:.25em;width:1.5em;height:1.5em;color:gold}hero-introduction .hero-header .flag svg{display:block}hero-introduction .hero-header .flag .fa-flag{height:100%;width:100%}hero-introduction .hero-header .flag .svg-text{position:absolute;top:0;bottom:0;left:0;right:0}hero-introduction .hero-header .name{font-size:1em}hero-introduction .hero-header .rarity{display:flex;align-items:center;justify-content:center;margin:0 .25em;height:2.75em;width:1.75em;border-width:3px;border-style:double;font-size:.5em;writing-mode:vertical-lr}hero-introduction .hero-header .rarity[data-rarity="-1"]{writing-mode:revert}@media screen and (max-width: 576px){hero-introduction .hero-header .rarity{padding-right:.125em}}hero-introduction .hero-header .profession{margin:0 .5em;padding:.25em .5em;border-radius:1em;border:2px solid gray;color:#f5f5f5;font-size:.5em}hero-introduction .hero-header .sex{margin:.25em;margin-left:auto;font-size:.75em;color:#6c7a89}hero-introduction .hero-header .sex .icon{display:none}hero-introduction .hero-header .sex[data-sex=male] .icon-male{display:revert}hero-introduction .hero-header .sex[data-sex=female] .icon-female{display:revert}hero-introduction .hero-header .sex[data-sex=""] .icon-none{display:revert}hero-introduction .hero-header .user-collect{margin-left:.5em;font-size:.75em}hero-introduction .hero-header .user-collect .user-collect-state{display:none}hero-introduction .hero-header .user-collect .user-collect-state:checked~.no{display:none}hero-introduction .hero-header .user-collect .user-collect-state:not(:checked)~.yes{display:none}hero-introduction .hero-content{overflow-y:auto}hero-introduction details{margin-bottom:.5em;border:.125em solid #347}hero-introduction details:not([open]){display:inline-block}hero-introduction .details-title{cursor:pointer;position:sticky;top:0;padding:.25em .75em .375em;background-color:#347;font-size:1.25em}hero-introduction .details-content{padding:1em;background-color:rgba(0,0,0,.25);line-height:1.5}hero-introduction .effect-list{margin:0;padding-left:1em}hero-introduction .effect-list.empty{padding:0}hero-introduction .effect-list .effect{display:flex}hero-introduction .effect-list .effect:not(:last-child){margin-bottom:.5em}hero-introduction .effect-list .effect:not(.sub)::before{content:"♦";margin-right:.5em}hero-introduction .effect-list .effect.sub{color:#48d1cc}hero-introduction .effect-list .effect.sub::before{content:"";margin-right:1em}hero-introduction .effect-list .effect.sub:not(:last-child){margin-bottom:.25em}hero-introduction .effect-list .effect.sub:has(+:not(.sub)){margin-bottom:.5em}hero-introduction .hero-basic-attributes .details-content{display:flex;flex-wrap:wrap}hero-introduction .basic-attribute{min-width:50%;display:flex;align-items:center}@media screen and (max-width: 768px){hero-introduction .basic-attribute{width:50%}hero-introduction .basic-attribute:nth-child(2n+1){padding-right:.5em}hero-introduction .basic-attribute:nth-child(2n+2){padding-left:.5em}}hero-introduction .basic-attribute .bar{margin:0 .5em}@media screen and (max-width: 768px){hero-introduction .basic-attribute .bar{flex:1}}hero-introduction .hero-talent .talent-name{margin:0 0 .25em;color:gold}hero-introduction .hero-talent .effect-list{margin:.5em 0 0}hero-introduction .hero-talent .effect-list.empty{margin-top:0}@media screen and (max-width: 576px){hero-introduction .hero-fate .effect{flex-wrap:wrap}}hero-introduction .hero-fate .effect .prefix{display:flex;margin-right:.5em}hero-introduction .hero-fate .effect .skill-name{margin-right:.5em;white-space:nowrap}hero-introduction .hero-fate .effect .support{color:#add8e6;white-space:nowrap}hero-introduction .hero-fate .effect .support::after{content:"：";color:#fff}@media screen and (max-width: 576px){hero-introduction .hero-fate .effect .info{margin-left:1em;width:100%}}@media screen and (max-width: 576px){hero-introduction .hero-skin .effect{flex-wrap:wrap}}hero-introduction .hero-skin .effect .prefix{display:flex;margin-right:.5em}hero-introduction .hero-skin .effect .skin-name{margin-right:.5em;white-space:nowrap}hero-introduction .hero-skin .effect .price{color:#deb887;white-space:nowrap}hero-introduction .hero-skin .effect .price::after{content:"：";color:#fff}hero-introduction .hero-skin .effect .info{margin-right:1em}@media screen and (max-width: 576px){hero-introduction .hero-skin .effect .info{margin-left:1em;width:100%}}hero-introduction .hero-skin .effect .open-timing{color:#48d1cc}@media screen and (max-width: 576px){hero-introduction .hero-skin .effect .open-timing{margin-left:1em}}hero-introduction .hero-base-skill .skill-item:not(:last-child){margin-right:1em}hero-introduction .hero-base-skill .level{color:#add8e6}hero-introduction .hero-resolve .item:not(:last-child){margin-right:1em}hero-introduction .hero-get-info .key{margin-right:1em}hero-introduction .hero-get-info .key::after{content:"："}main{flex-direction:row;padding:.5em 0}@media screen and (max-width: 576px){main{flex-direction:column-reverse;padding:.25em 0}}.rarity[data-rarity="-1"]{border-color:#b1b1b1;color:#b1b1b1}.rarity[data-rarity="0"]{border-color:#ba6e40;color:#ba6e40}.rarity[data-rarity="1"]{border-color:#e9e9d8;color:#e9e9d8}.rarity[data-rarity="2"]{border-color:#eac788;color:#eac788}.rarity[data-rarity="3"]{border-color:#dab273;color:#dab273}.rarity[data-rarity="4"]{border-color:#82ffc6;color:#82ffc6}.icon-collect{color:red}.hero{flex:1;display:flex;flex-direction:column}@media screen and (max-width: 576px){.hero{transition:height .5s;flex:revert;margin-top:.25em;height:2em}.hero.show-list{height:100%}.hero.show-list .hero-list-title{cursor:auto}}.hero-list-title{cursor:pointer;display:none;font-size:1em;text-align:center}@media screen and (max-width: 576px){.hero-list-title{display:revert}}.hero-introduction-wrap{overflow-y:auto;display:flex;min-width:30rem;width:50%;border:2px solid #00bfff}@media screen and (max-width: 768px){.hero-introduction-wrap{min-width:revert;width:100%;max-width:100%}}@media screen and (max-width: 576px){.hero-introduction-wrap{flex:1}}