html,body,main,section,div,label,input,select,frameset{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;padding:0;overflow:hidden}main{--middle:50%;position:relative;&.isDragging:before{content:"";z-index:1;background:0 0;width:100%;height:100%;position:absolute;top:0;left:0}}section{position:absolute;top:.5rem;bottom:.5rem}#divider{width:1rem;left:var(--middle);cursor:col-resize;z-index:2;background:#fff;position:absolute;top:.5rem;bottom:.5rem;transform:translate(-50%);&:before,&:after{content:"";background:#999;width:2px;height:50px;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&:before{margin-left:-2px}&:after{margin-left:2px}&:hover:before,&:hover:after{height:100%;top:0;transform:translate(-50%)}}#code{width:calc(100% - var(--middle) - 1rem);flex-direction:column;display:flex;right:.5rem}#wysiwyg{width:100%;height:100%}#html{width:calc(var(--middle) - 1rem);left:.5rem}#editor{flex:1;width:100%;font-size:1rem;overflow-x:hidden;& .cm-editor{height:100%}}.tabs{user-select:none;align-items:center;gap:.25rem;display:flex;position:relative;& input[type=radio]{position:absolute;top:-9999px;left:-9999px;&:checked+label{color:#abb2bf;background:#2a313d}}& #entity{margin-left:auto}& label[for*=lang-]{cursor:pointer;background:#efefef;border:0;border-radius:.25rem .25rem 0 0;padding:.5rem 2rem;font-family:monospace;display:block}}.toggle{margin-left:1rem;display:block;& input{position:absolute;top:-9999px;left:-9999px;&:checked+label{&:before{background-color:var(--toggle-on)}&:after{left:calc(var(--toggle-size) + var(--toggle-padding))}}&+label{--toggle-off:#fd632f;--toggle-on:#34c759;--toggle-size:20px;--toggle-padding:2px;line-height:var(--toggle-size);white-space:nowrap;cursor:pointer;gap:.5rem;font-family:monospace;display:flex;position:relative;&:before{content:"";width:calc(2 * var(--toggle-size));height:var(--toggle-size);background-color:var(--toggle-off);border-radius:var(--toggle-size);transition:background-color .3s;display:block;box-shadow:inset 0 0 .25em #0004}&:after{content:"";top:var(--toggle-padding);left:var(--toggle-padding);width:calc(var(--toggle-size) - 2 * var(--toggle-padding));height:calc(var(--toggle-size) - 2 * var(--toggle-padding));border-radius:var(--toggle-size);background-color:#fff;transition:left .3s;position:absolute;box-shadow:0 .05em .5em #0007}}}}