.body{height:100vh;overflow-y:scroll}.cards{pointer-events:none;width:50vw;min-width:450px;padding:20px;position:relative}.viewer-wrapper{width:100%;position:sticky;top:0;right:0}.viewer-wrapper .sticky{justify-content:center;width:50%;min-width:400px;height:100vh;position:absolute;top:0;right:0}.viewer-wrapper .svg-viewer{width:100%;height:100%}.cards textarea{resize:vertical;width:100%;height:60px;padding:15px;display:block}.card{pointer-events:initial;background:#fff;border:1px solid #0000001a;border-radius:10px;margin:0 10px 20px;padding:10px;position:relative;box-shadow:5px 5px 40px #0000001a}code{color:#000;background:#0000000d;padding:3px 5px}.cards ul{padding-left:25px}.cards li{padding:0}.cards li+li{padding-top:10px}.error-message{color:red;margin-top:10px}.help-link{text-underline-position:under;cursor:help;color:#000;-webkit-text-decoration:underline dotted #000;text-decoration:underline dotted #000}.explanations{width:100%;padding:0;position:absolute;top:0;left:0}.explanations .animation-wrapper{padding:30px 10px 20px 30px}@media (width<=850px){.cards{margin-bottom:calc(100vh - 80px)}}@media (width<=450px){.cards,.sticky{width:100vw;min-width:0}}.cancel-button{color:#0074d9;cursor:pointer;background:0 0;border:0;padding:10px;font-size:16px;text-decoration:none;position:absolute;top:0;right:0}.done-button{color:#0074d9;cursor:pointer;background:0 0;border:1px solid #0000001a;border-radius:10px;margin:20px auto 20px 50%;padding:10px 30px;font-size:16px;text-decoration:none;display:inline-block;transform:translate(-50%)}@media (prefers-color-scheme:dark){body{color:#fafafa;background:#09090b}.card{background:#18181b}code{color:#fafafa;background:#27272a}textarea{color:#fafafa;background:#262626;border-color:#52525b}.help-link{color:#fafafa;text-decoration-color:#fafafa}}.bezier-explanation video{width:100%}.text-with-illustration{flex-direction:row;display:flex}.examples{-ms-overflow-style:none;flex-direction:row;display:flex;overflow-x:scroll}.examples::-webkit-scrollbar{display:none}.example{text-align:center;cursor:pointer;stroke:#000;background:#fff;border:1px solid #0000001a;border-radius:10px;padding:10px}.example+.example{margin-left:10px}.example.example-selected{box-shadow:0 0 10px #006eff33}.example svg{width:50px;margin:auto;display:block}@media (prefers-color-scheme:dark){.example{color:#fafafa;stroke:#fafafa;background:#262626;border-color:#52525b}}.github-corner svg{fill:#151513;color:#fff;border:0;position:absolute;top:0;right:0}.github-corner:hover .octo-arm{animation:.56s ease-in-out octocat-wave}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (width<=500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:.56s ease-in-out octocat-wave}}