.presence { min-height: 330px; max-height: 600px; }
.portrait-stage { position: relative; flex: 1; min-height: 290px; height: 380px; max-height: 460px; width: 100%; overflow: hidden; }
#avatarCanvas, .portrait-stage #face { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; display: block; }
#avatarCanvas { top:44px; height:calc(100% - 44px); }
#avatarCanvas[hidden], .portrait-stage #face[hidden], #avatarStatus[hidden] { display: none; }
.visual-modes { position: absolute; top: 10px; left: 0; z-index: 2; display: flex; border-bottom: 1px solid #344348; }
.visual-modes select { max-width:105px; color:#d6faf2; background:#172024; border:1px solid #344348; border-radius:4px; font:inherit; font-size:13px; padding:4px; margin-right:8px; }
.visual-modes select:focus-visible { outline:2px solid #75d7c9; outline-offset:2px; }
.visual-modes button { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 0; background: transparent; color: #a9b9bf; font-size: 13px; }
.visual-modes button[aria-pressed="true"] { border-bottom: 2px solid #75d7c9; color: #d6faf2; }
.visual-modes svg { width: 16px; height: 16px; }
#avatarStatus { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; color: #c5d5da; font-size: 12px; }
.avatar-credit { position:absolute; right:0; top:10px; color:#a6b8bc; padding:8px; }
.avatar-credit svg { width:16px; height:16px; }
#previewJudy { background: transparent; color: #bfe6df; border: 1px solid #415b60; }
@media(max-width:480px) { header { flex-wrap: wrap; } .header-tools { margin-left:auto; } .header-tools .icon { width:36px; height:36px; min-height:36px; padding:6px; } .header-tools a.icon { padding:0 4px; width:auto; } .presence { min-height:320px; } .portrait-stage { height:320px; min-height:280px; } }
@media(orientation:landscape) and (max-height:600px) { .presence { min-height:250px; } .portrait-stage { min-height:220px; height:290px; } }