/* Your character: sign-in, the explorer preview, color swatches. */
.acct{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.charstage{flex:none;display:grid;place-items:center;width:112px;height:150px;background:linear-gradient(#3f84d8 0 62%,#5fd35f 62% 66%,#8b5a2b 66%);border:2px solid var(--edge);border-radius:10px;box-shadow:inset 0 0 0 2px var(--hi)}
canvas.charbig{width:64px;height:96px;image-rendering:pixelated;margin-top:-18px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
.acct-main{flex:1;min-width:240px;display:grid;gap:12px}
.acct-main p{margin:0}
.signin,.profile{display:grid;gap:12px;max-width:420px}
.signin .os-tabs{margin:0}
.swrow{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center}
.swrow>span{font:600 13px var(--px);color:var(--muted)}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.sw{width:22px;height:22px;border:2px solid var(--edge);border-radius:5px;padding:0;cursor:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sw[aria-checked=true]{outline:3px solid var(--gold);outline-offset:1px}
.sw:focus-visible{outline:3px solid #fff}
.acct-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.acct-foot details.help{margin:0}
.acct-foot details form{margin-top:8px}
.warn form{margin-top:8px}
.steam{letter-spacing:.03em}
@media (max-width:640px){
  .charstage{width:100%;height:120px}
}