.app{display:grid;grid-template-columns:35rem 1fr;grid-gap:4rem}.aside{position:fixed;top:2rem;height:calc(100vh - 4rem);overflow:scroll;padding-bottom:2rem}.steps{position:sticky;bottom:2rem;padding:2rem;background-color:var(--color-gray-5);border-radius:1rem;z-index:2}.step{display:inline-block;padding:1rem;margin:1rem;background-color:var(--color-purple);border-radius:1rem;border:2px solid var(--color-purple);cursor:grab;color:var(--color-gray-7)}.step-solved{background-color:rgba(from var(--color-purple),.5);text-decoration:line-through;color:var(--color-purple)}.target{position:relative;padding:2rem;background-color:var(--color-gray-7);border:2px dashed var(--color-gray-4);border-radius:1rem;color:transparent;-webkit-user-select:none;user-select:none;transition:all .3s ease-in-out;margin:0 .5fr}.target:before{transition:all .3s ease-in-out;position:absolute;right:-2rem;top:calc(50% - 2rem);content:"";width:0;height:0;border-top:2rem solid transparent;border-bottom:2rem solid transparent;border-left:2rem solid var(--color-gray-4);border-right:none}.target.target-right:before{left:-2rem;right:auto;border-top:2rem solid transparent;border-bottom:2rem solid transparent;border-left:none;border-right:2rem solid var(--color-gray-4)}.target.target-none:before{display:none}.target-hover{border-color:var(--color-purple);box-shadow:0 0 1rem 0 var(--color-purple)}.target-solved{background-color:var(--color-purple);border-color:var(--color-purple);color:var(--color-gray-7)}.target.target-solved:before,.target.target-hover:before{border-left-color:var(--color-purple)}.target.target-solved.target.target-right:before,.target.target-hover.target.target-right:before{border-right-color:var(--color-purple)}.target-i{position:absolute;left:2rem;top:calc(50% - 1rem);display:inline-block;color:var(--color-gray-1);background-color:var(--color-gray-4);font-size:1rem;width:2rem;height:2rem;line-height:2rem;text-align:center;border-radius:50%}.target-solved .target-i{display:none}.columns-container{position:relative;padding-top:100px}.columns{display:grid;grid-template-columns:repeat(4,1fr);min-width:100%;padding:40px 0}.column{grid-column:1;margin-bottom:20px;grid-column-start:1}.column-headers{position:absolute;top:0;bottom:0;left:0;z-index:-1;padding:0}.column-header{position:relative}.column-header+.column-header h2{margin-left:2rem}.column-header h2{padding:2rem;margin:0;font-size:2rem;color:var(--color-gray-1);background:var(--color-gray-5);border-radius:1rem;text-align:center;font-weight:400}.column-header:before{position:absolute;top:6.5rem;bottom:0;left:calc(50% - 2px);content:" ";width:2px;background:var(--color-gray-5)}.column-span{grid-column:1 / 4}.columns-content{padding:0 2rem;height:calc(100vh - 14rem);overflow:scroll}:root{--color-gray-0: #1b2b34;--color-gray-1: #343d46;--color-gray-2: #4f5b66;--color-gray-3: #65737e;--color-gray-4: #a7adba;--color-gray-5: #c0c5ce;--color-gray-6: #cdd3de;--color-gray-7: #d8dee9;--color-gray-dark: var(--color-gray-0);--color-gray-medium: var(--color-gray-4);--color-gray-light: var(--color-gray-7);--color-red: #ec5f67;--color-orange: #f99157;--color-yellow: #fac863;--color-green: #99c794;--color-teal: #5fb3b3;--color-blue: #6699cc;--color-pink: #c594c5;--color-brown: #ab7967;--color-purple: #3f59e4;--color-primary: var(--color-green);--color-seconday: var(--color-teal);--color-danger: var(--color-red);--color-success: var(--color-green);--color-info: var(--color-blue);--color-warning: var(--color-yellow)}*{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;box-sizing:border-box}html{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:10px;background-color:var(--color-gray-6);color:var(--color-gray-1)}body{font-size:1.6rem;padding:1rem}body>#root{width:100%}