body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}:root{--bg-color:#fff;--text-color:#27272a;--border-color:#a1a1aa;--textarea-bg:#fff;--textarea-text:#18181b}@media (prefers-color-scheme:dark){:root{--bg-color:#18181b;--text-color:#d4d4d8;--border-color:#52525b;--textarea-bg:#1e1e24;--textarea-text:#e4e4e7}}body{background-color:var(--bg-color);color:var(--text-color);width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}.app{flex-direction:row;width:100vw;height:100vh;display:flex}.panel-webview{background-color:#fff;flex:1}.panel-input{background-color:var(--bg-color);border-left:1px solid var(--border-color);flex-direction:column;flex:1;align-items:stretch;display:flex}.panel-input-htmlinput,.panel-input-cssinput{flex:1}iframe{border:0;width:100%;height:100%}.webview{border:0;padding:0}textarea{box-sizing:border-box;border:none;border-bottom:1px solid var(--border-color);background-color:var(--textarea-bg);width:100%;height:50%;color:var(--textarea-text);resize:none;outline:none;padding:1rem;font:1.1em monospace;transition:background-color .3s,color .3s,border-color .3s}textarea:last-child{border-bottom:none}textarea:focus{background-color:var(--bg-color)}