#hero-profile{width:46px;min-width:46px;padding:3px}#hero-profile svg{width:34px;height:34px}
#hero-sheet{box-sizing:border-box;width:min(520px,94vw);max-height:94dvh;overflow:auto;border:3px solid #997947;border-radius:16px;background:#203c32;color:#f3e6c8;padding:12px;font:15px system-ui;box-shadow:0 16px 70px #0009}#hero-sheet::backdrop{background:#14251faa}
#hero-sheet header,#hero-sheet footer,.tabs{display:flex;align-items:center;gap:8px}#hero-sheet header{justify-content:space-between}#hero-sheet h2{margin:0;font-size:21px}#hero-sheet .sample{margin:3px 0 8px;font-size:12px;color:#d0d9bd}
#hero-sheet button{font:inherit;min-width:44px;min-height:44px;border:1px solid #9d8056;border-radius:9px;background:#314e40;color:#f3e6c8;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px;cursor:pointer}#hero-sheet button:disabled{opacity:.4;cursor:default}#hero-sheet button:focus-visible{outline:3px solid #327b80;outline-offset:2px}#hero-sheet button[aria-pressed=true],#hero-confirm{background:#49694f}#hero-sheet svg{width:30px;height:30px}
#hero-content{min-height:155px}#hero-content p{margin:8px 0}.attribute-list{display:flex;gap:8px;justify-content:space-between}.attribute-list>div{display:grid;grid-template-columns:44px 25px 44px;align-items:center;text-align:center;gap:3px}.attribute-list strong{grid-column:1/-1}.attribute-list output{font-weight:bold;font-size:20px}#hero-sheet small{display:block;font-size:12px;margin:9px 0;color:#d0d9bd}#hero-sheet footer{justify-content:flex-end;margin-top:8px}.known-skills{display:flex;gap:6px;justify-content:space-between}.known-skills figure{margin:0;text-align:center}.known-skills img{width:32px;height:32px}.known-skills figcaption{font-size:12px}
@media(max-height:440px){#hero-sheet{padding:8px 12px}#hero-content{min-height:125px}#hero-sheet h2{font-size:18px}#hero-sheet small{margin:5px 0}#hero-sheet footer{margin-top:3px}}

.skill-allocation{display:flex;align-items:center;gap:2px}.skill-allocation output{min-width:16px;font-weight:bold}.skill-allocation button{padding:0!important;width:44px}
@media(max-height:440px){#hero-sheet header h2{align-self:flex-start}#hero-sheet .sample{position:absolute;top:30px;left:12px;margin:0;font-size:10px}#hero-sheet .tabs{margin-top:0}#hero-sheet .known-skills img{width:28px;height:28px}}
@media(max-width:480px){.known-skills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}}

.hero-lab{display:grid;place-items:center;min-width:44px;min-height:44px;color:#efd89e;background:#233e34;border:1px solid #58735d;border-radius:9px}.hero-lab svg{width:28px;height:28px}