html,body{width:100vw;height:100vh;margin:0;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{place-items:center;min-width:320px;min-height:100vh;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.main{padding:20px}h1{font-size:3.2em;line-height:1.1}textarea{resize:none;overflow:hidden;width:30em;min-height:10em;border:none;outline:none;padding:.75em 1em;font-size:.9rem;line-height:1.5rem;border-radius:8px;box-sizing:border-box;color:#263238;background-color:#f5f5f5;transition:background-color .2s ease}textarea:focus{background-color:#e0f7fa}button{margin-top:10px;border-radius:8px;outline:none;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:all .25s}button:hover{color:#fff;background-color:#4791db}button:active{color:#fff;background-color:#115293}a{color:#263238;-webkit-tap-highlight-color:rgba(0,0,0,0);text-decoration:none;transition:all .25s ease-out}a:hover{color:#115293}.live{font-size:.8rem;position:fixed;top:.5rem;right:1rem}@media (max-width: 480px){:root{font-size:14px}#root{width:95%}body{min-width:auto}.main{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:flex-start}h1{font-size:2em;margin-bottom:.5em}textarea{width:100%;min-height:10em;font-size:1rem;line-height:1.3rem;padding:1em}button{width:100%;padding:.75em;font-size:1.1em}.live{font-size:1rem;top:1rem;right:1.5rem}}