html,body{color:#222;margin:0;font-family:Roboto Mono,monospace}.m0{margin:0}.p0{padding:0}.mt-0{margin-top:0}.pt-0{padding-top:0}.display-block{display:block}.display-none{display:none}.snpt{position:relative}.container{width:100%;height:100vh;display:flex}.container pre,.snippets{width:50%;height:calc(100vh - 1em);margin:0;padding:1em 1em 0;overflow:auto}.snippets{background:#f2f2f2}.header{position:relative}.container pre{font-size:18px}.frameworks{margin:0;padding:0;display:flex}.frameworks li{cursor:pointer;margin-left:1em;list-style-type:none;position:relative}.frameworks li.active:before,.frameworks li:hover:before{visibility:visible;transform:scaleX(1)}.frameworks li:first-child{margin-left:0}.frameworks li:before{content:"";visibility:hidden;background-color:#222;width:100%;height:2px;transition:all .3s ease-in-out;position:absolute;bottom:-5px;left:0;transform:scaleX(0)}.frameworks li.react:before{background-color:#00b3e6}.frameworks li.redux:before{background-color:#764abc}.frameworks li.vue:before{background-color:#42b883}.frameworks li.styled-components:before{background-color:#db7093}.notification{background:#fff;border-radius:5px;justify-content:center;align-items:center;height:40px;padding:0 10px;transition:height 5ms;display:flex;position:absolute;right:1em}.not-active{animation:.1s ease-in slideIn;top:1em}.not-inactive{animation:.1s ease-out slideOut;top:-40px}@keyframes slideIn{0%{top:-40px}to{top:10px}}@keyframes slideOut{0%{bottom:10px}to{bottom:-40px}}@keyframes mobileSlideIn{0%{bottom:-40px}to{bottom:10px}}.github-corner{opacity:.55;transition:all 1s;position:absolute;bottom:1em;right:1em}.github-corner:hover{opacity:1}.modal{background:#0009;width:100%;height:100%;position:fixed;top:0;left:0}.modal-main{background:#fff;width:30%;height:auto;padding:1em;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%)}.modal-close{cursor:pointer;background:0 0;border:0;position:absolute;top:1.5em;right:1em}input[type=checkbox]{display:none}input[type=checkbox]+label{cursor:pointer;margin:.2em;padding:.2em;display:block}input[type=checkbox]+label:before{content:"✔";vertical-align:bottom;color:#0000;border:.1em solid #000;border-radius:.2em;width:1em;height:1em;margin-right:.55em;padding-bottom:.3em;padding-left:.2em;transition:all .2s;display:inline-block}input[type=checkbox]:checked+label:before{color:#222}input[type=checkbox]:disabled+label:before{border-color:#aaa}.feather-github:hover{fill:#fff}@media screen and (width<=768px){.container pre,.snippets{width:100%}.container{flex-wrap:wrap}.notification{top:auto}.not-active{animation:.1s ease-in mobileSlideIn;bottom:10px}.not-inactive{animation:.1s ease-out mobileSlideOut;bottom:-40px}}