*{touch-action:none}html{color-scheme:dark;background-color:#002;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;overflow:hidden}body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}container{display:contents}button{border:none;padding:5px}.editor{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}.editor .canvas-container{position:relative;width:100%;flex:1;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;container-type:size}.editor .canvas-container canvas{display:block;grid-area:1 / 1;inline-size:min(100cqi,calc(100cqb * var(--ratio)));block-size:min(100cqb,calc(100cqi / var(--ratio)));border-radius:10px}.editor .canvas-container .desktop-overlay{position:relative;grid-area:1 / 1;inset:0;inline-size:min(100cqi,calc(100cqb * var(--ratio)));block-size:min(100cqb,calc(100cqi / var(--ratio)));pointer-events:none}.editor .canvas-container .desktop-overlay>*{pointer-events:auto}.editor .canvas-container .desktop-overlay .drag-handle{position:absolute;left:10px;top:10px;width:20px;height:20px;cursor:pointer;background-color:#000;border:2px solid #fff;border-radius:50%;touch-action:none;translate:-50% -50%}.editor .canvas-container .desktop-overlay .drag-handle:hover{background-color:#226}.editor .canvas-container .desktop-overlay.editing-clip .drag-handle{border-radius:0}.editor .toolbar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;background-color:#111;border-top:1px solid #333}.editor .toolbar>button{background:none;border:none;color:#fff;font-size:32px;padding:10px;cursor:pointer}@media(hover:hover){.editor .toolbar>button:hover{background-color:#333}}.editor .toolbar>button.selected{background-color:#555}@media(hover:hover){.editor .toolbar>button.selected:hover{background-color:#777}}.editor .toolbar>button:disabled{color:#555;cursor:default}.editor .toolbar>div.toolbar-separator{width:1px;height:24px;background-color:#333;margin:0 10px}.dialog{position:absolute;inset:0;-webkit-backdrop-filter:brightness(.5);backdrop-filter:brightness(.5);display:flex;justify-content:center;align-items:end}.dialog *{touch-action:manipulation}.dialog .dialog-contents{background-color:#222;max-width:500px;max-height:80vh;overflow:hidden;overflow-y:scroll;scrollbar-width:thin;border-radius:10px;padding:10px}.emote-dialog .search-container{display:flex;justify-content:center;margin-bottom:10px}.emote-dialog .search-container .search{width:100%;padding:8px;border-radius:5px;border:none;font-size:16px}.emote-dialog .emote-list{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;justify-content:center}.emote-dialog .emote-list .emote-button{width:64px;max-height:64px;background-color:#333;border:none;border-radius:5px;padding:5px;cursor:pointer;display:flex;justify-content:center;align-items:center}.emote-dialog .emote-list .emote-button img{max-width:100%;max-height:100%}@media(hover:hover){.emote-dialog .emote-list .emote-button:hover{background-color:#555}}.emote-dialog .emote-list .emote-button.refresh-button{font-size:48px;color:#fff}
