html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:18px;background:#000}body{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;font-weight:600;color:rgba(0,0,0,.87)}body,html{-ms-overflow-style:none}body::-webkit-scrollbar{display:none}*,:after,:before{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}ol,ul{padding:0;margin:0;list-style:none}a{text-decoration:none}button{outline:none;border:none;background:transparent;cursor:pointer;transition:all .2s ease-in-out;color:inherit}button:disabled{filter:grayscale(100%);opacity:.12;cursor:default}.x-all,.x-bottom,.x-left,.x-right,.x-top{width:100%}.x-top{padding-top:env(safe-area-inset-top)}.x-right{padding-right:env(safe-area-inset-right)}.x-bottom{padding-bottom:env(safe-area-inset-bottom)}.x-left{padding-left:env(safe-area-inset-left)}.x-all{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.character,.intro,.logo,.panel--input,.panel--output,.welcome-enter-active,.welcome-leave-active{transition-duration:.5s;transition-timing-function:ease-out;transition-property:all}.welcome-enter-active .intro,.welcome-leave-active .intro{transform:scale(1)}.welcome-enter-active .logo,.welcome-leave-active .logo{transform:translateY(0)}.welcome-enter-active .character,.welcome-leave-active .character{opacity:1}.welcome-enter-active .panel--input,.welcome-enter-active .panel--output,.welcome-leave-active .panel--input,.welcome-leave-active .panel--output{transform:translateX(0)}.welcome-enter .intro,.welcome-leave-to .intro{transform:scale(.5)}.welcome-enter .logo,.welcome-leave-to .logo{transform:translateY(-100%)}.welcome-enter .character,.welcome-leave-to .character{opacity:0}.welcome-enter .panel--input,.welcome-leave-to .panel--input{transform:translateX(-100%)}.welcome-enter .panel--output,.welcome-leave-to .panel--output{transform:translateX(100%)}h1{font-size:2rem}h1,h2{font-weight:900;letter-spacing:-.05em}h2{font-size:1.5rem;margin-top:0}h3{font-size:1.25rem}.layout{z-index:1;position:relative;height:100vh;display:flex;align-items:stretch;flex-wrap:nowrap}.logo{z-index:2;position:fixed;top:2rem;left:2rem;margin:0}.logo a{color:rgba(0,0,0,.87)}a:hover .logo__wordmark{text-decoration:line-through;-webkit-text-decoration-style:wavy;text-decoration-style:wavy;-webkit-text-decoration-color:#d41d1d;text-decoration-color:#d41d1d}.logo__symbol{color:#d41d1d}.logo__wordmark{margin-left:.25em}.toggle-sidebar{color:#fff;z-index:2;position:fixed;top:2rem;right:2rem;transition:all .2s ease-out;transform:rotate(0deg);margin:0;padding:0}.toggle-sidebar--active{transform:rotate(180deg);color:#000}.toggle-sidebar svg{display:block}.sidebar{letter-spacing:normal;flex:0 0 0%;max-width:0;background:#000;overflow:hidden;transition:all .2s ease-out;will-change:max-width,flex}.sidebar--active{flex:0 0 480px;max-width:480px}.sidebar__inner{min-height:100%;width:480px;background:#fff;height:100%;overflow:auto;padding:2rem}.panels{position:relative;min-height:100%;max-width:100%;display:flex;align-items:stretch;flex-wrap:nowrap;flex-shrink:0;flex-grow:1;transition:all .2s ease-out;will-change:max-width,flex;font-size:2rem}.panel{display:flex;align-items:center;width:100%;flex:0 0 50%;max-width:50%}.panel .content{width:100%;max-width:640px;padding:4rem}.panel--input{background:#fff}.panel--input .content{margin-left:auto}.panel--output{background:#d41d1d;color:#fff}.panel--output .content{margin-right:auto}.character{z-index:1;position:absolute;top:20%;left:50%;transform:translateX(-50%)}.character button{position:relative;background:#fff;border-radius:9999px;box-shadow:0 .5rem 1rem rgba(0,0,0,.12);display:block;height:4rem;width:4rem}.character button:hover{transform:scale(1.1);box-shadow:0 .75rem 1rem rgba(0,0,0,.06)}.character button svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}textarea{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;resize:none;width:100%;min-width:100%;max-width:100%;border:none;padding:0;margin:0;overflow:hidden;background:transparent}textarea:focus{outline:none}