*{margin:0;padding:0;box-sizing:border-box}html{text-size-adjust:100%}body{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-family:Fira Code,monospace;font-size:16px;line-height:28px}.app{display:flex;flex-direction:column;align-items:center;width:100vw;min-height:100dvh;padding:14px;transition:background-color .12s;gap:14px}@media screen and (min-width: 960px){.app{padding:28px;gap:28px}}.app--vscode{background-color:#075688}.app--sublimetext{background-color:#4b4b4b}.app--atom{background-color:#367d5b}.app__header{display:flex;flex-direction:column;width:100%;max-width:1440px;color:#fff;text-align:center}@media screen and (min-width: 960px){.app__header{flex-direction:row;align-items:center;justify-content:space-between}}.app__title{position:relative;font-size:16px}.app__title:before{content:"${1:";opacity:.5}.app__title:after{content:"}";opacity:.5}.app__subtitle{font-size:14px}.app__link{color:inherit}.app__main{display:flex;flex-direction:column;flex-grow:1;gap:6px;width:100%;max-width:1440px}@media screen and (min-width: 960px){.app__main{flex-direction:row}}.app__half{display:flex;flex-grow:1;flex-direction:column;border-radius:3px;background:#ffffffbf;overflow:hidden;gap:4px;padding:4px}@media screen and (min-width: 960px){.app__half{flex-basis:50%}}.app__halftop{display:flex;gap:4px;flex-basis:60px;flex-shrink:0}.app__input{flex:1;width:100%;padding:0 16px;transition:box-shadow .12s;border:0;border-radius:3px;outline:none;background-color:#fff;font:inherit;box-shadow:inset 0 0 0 1px #00000040}.app--vscode .app__input:focus{box-shadow:inset 0 0 0 2px #075688}.app--sublimetext .app__input:focus{box-shadow:inset 0 0 0 2px #4b4b4b}.app--atom .app__input:focus{box-shadow:inset 0 0 0 2px #367d5b}.app__halfbottom{display:flex;position:relative;flex:1;min-height:160px;overflow:hidden}.app__textarea{display:flex;flex:1;padding:16px;transition:box-shadow .12s;border:none;border-radius:3px;outline:none;background-color:#fff;font:inherit;box-shadow:inset 0 0 0 1px #00000040;resize:none}.app--vscode .app__textarea:focus{box-shadow:inset 0 0 0 2px #075688}.app--sublimetext .app__textarea:focus{box-shadow:inset 0 0 0 2px #4b4b4b}.app--atom .app__textarea:focus{box-shadow:inset 0 0 0 2px #367d5b}.app__info{display:none;position:absolute;right:12px;bottom:6px;font-size:12px}@media screen and (min-width: 960px){.app__info{display:block}}.app__infoselect{transition:color .12s;-moz-user-select:all;-ms-user-select:all;-webkit-user-select:all;user-select:all}.app--vscode .app__infolink{color:#075688}.app--sublimetext .app__infolink{color:#4b4b4b}.app--atom .app__infolink{color:#367d5b}.app__button{flex:1;transition:background-color .12s;border:0;border-radius:3px;outline:0;background-color:#00000059;color:#fff;font:inherit;white-space:nowrap;cursor:pointer;font-size:15px}.app__button--vscode.app__button--active{background-color:#075688}.app__button--sublimetext.app__button--active{background-color:#4b4b4b}.app__button--atom.app__button--active{background-color:#367d5b}.app__pre{flex:1;padding:16px;border:none;border-radius:3px;background-color:#fff;font:inherit;box-shadow:inset 0 0 0 1px #00000040;overflow:auto;resize:none;-moz-user-select:all;-ms-user-select:all;-webkit-user-select:all;user-select:all}.app__btn{padding:0 24px;border:0;border-radius:3px;color:#fff;font:inherit;font-size:15px;line-height:48px;cursor:pointer}.app--vscode .app__btn{background-color:#075688}.app--sublimetext .app__btn{background-color:#4b4b4b}.app--atom .app__btn{background-color:#367d5b}.app__buttons{position:absolute;right:8px;bottom:8px}