:root{--color-accent: #0086cf;--color-bg: #e3e3e3}html,body{margin:0;padding:0;width:100%;height:100%;font-family:sans-serif;background:var(--color-bg);font-weight:lighter;font-size:16px}body{display:flex;flex-direction:column}header,footer{padding:0 1rem;text-align:center;font-size:.7rem;font-weight:lighter}#app{width:100%;height:100%;display:flex;flex-direction:column}main{flex:1;display:flex;flex-direction:column}.frameHeader{position:absolute;display:flex;width:100%;justify-content:space-between;padding-left:2rem;padding-right:2rem;height:3rem;top:-1rem;font-weight:700;font-size:1.1rem}.btn{cursor:pointer;opacity:.75}.btn:hover{opacity:1}.upload-area{border:2px dashed #aaa;margin:1rem 1rem 3rem;border-radius:8px;background:#fafafa}.upload-area.dragover{background-color:#e0f7ff;border-color:var(--color-accent)}.file-list{font-size:.9rem;margin-top:.5rem}.iframe-container{flex:1;display:flex}iframe{flex:1;border:2px double var(--color-accent);border-radius:8px;margin:15px;background:#fafafa}.avatarContainer{display:flex;background:#e8f1f6;border-radius:36px;padding:0 15px;border:3px solid #ffffff;zoom:.7}.avatarContainer>img{opacity:1}.clickable{cursor:pointer}.consoleContainer{position:absolute;height:calc(100% - 14rem);width:30%;background-color:#ffffffed;border-radius:.4rem;border:2px double var(--color-accent);padding:.5rem;white-space:pre-wrap;right:1.2rem;bottom:5rem;display:none}.consoleToggle{position:absolute;right:1.5rem;bottom:1.5rem;background:#eaeaeaab;border-radius:50%;width:3rem;height:3rem;display:flex;justify-content:center;align-items:center;border:1px dashed rgba(222,14,255,.74)}.consoleToolbar{position:absolute;right:.5rem;top:.5rem;display:flex;background:#eaeaeaab;padding:4px 10px;border-radius:1rem}.consoleLogCanvas{font-size:14px;font-family:monospace;height:100%;width:100%;overflow:auto}