*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}html{--black: #282a36;--inactive: #808391;--white: #f8f8f2;--pink: #ff79c6;--red: #ff5555;--orange: #ffad55;--yellow: #f1fa8c;--green: #50fa7b;--cyan: #8be9fd;--blue: #4395d4;--purple: #9674c8}body{display:flex;overflow:hidden;font-family:monospace}#editor-container{display:flex;flex-direction:column;background-color:var(--black);padding:0 0 5px 5px}#output{display:flex}iframe{border:none;flex:1}#toolbar{color:var(--white);font-weight:900;padding:3px 0 3px 7px;display:flex;align-items:center;justify-content:space-between;user-select:none}#icons{color:var(--inactive);display:flex;align-items:center;position:relative}i:hover{color:var(--pink);cursor:pointer}#pattern-dropdown{z-index:100;display:none;position:absolute;font-size:small;font-weight:400;font-family:monospace;background-color:var(--black);right:0;color:var(--white);flex-direction:column;align-items:end;padding:3px;border:1px solid var(--pink);border-radius:5px}#pattern-dropdown>div{width:100%;padding:3px;text-align:end;border-radius:3px}#pattern-dropdown>div:hover{background-color:#3e404c}#pattern-icon:hover #pattern-dropdown{display:flex}#html-container,#js-container,#css-container{flex:1;border:1px solid var(--color);border-radius:0 5px 5px;overflow-x:auto}.editor{display:flex}.editor-title{display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;position:relative}.editor-title>span{writing-mode:vertical-lr;transform:rotate(180deg);font-weight:900;font-size:smaller;border-top-right-radius:5px;border-bottom-right-radius:5px;background-color:var(--color);padding:5px 0}.editor-title>i{color:var(--inactive)}.editor-title>i:hover{color:var(--color)}*{scrollbar-width:thin;scrollbar-color:blue var(--color)}*::-webkit-scrollbar{width:5px;height:5px}*::-webkit-scrollbar-track{background:var(--black)}*::-webkit-scrollbar-thumb{background-color:var(--color);border:none}.success .copied{visibility:visible;opacity:1;transition:none}.copied{visibility:hidden;opacity:0;transition:visibility 0s 1s,opacity 1s linear;z-index:100;position:absolute;left:100%;background-color:var(--color);color:var(--black);font-family:monospace;padding:5px;border-radius:5px;line-height:normal}.gutter{background-color:var(--black)}.gutter-horizontal{cursor:col-resize}.gutter-vertical{cursor:row-resize}.cm-editor.cm-focused{outline:none}.cm-editor{height:100%}