@import url("https://fonts.googleapis.com/css2?family=Readex+Pro&family=Roboto+Mono&display=swap");*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#app{background:#6ee7b7;background:linear-gradient(-58deg, #6ee7b7, #3b82f6);background-repeat:no-repeat;width:100vw;height:100vh;position:relative;overflow:hidden}#app #code-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:1280px;height:720px;position:absolute;padding-bottom:70px;cursor:grab}#app #code-stepper layout{display:grid;gap:20px;grid-template-rows:1fr 1fr auto;grid-template-columns:840px 380px;height:650px;width:1280px;justify-content:right;padding:20px;border-radius:8px;direction:ltr}#app #code-stepper layout .selected{outline:2px dashed dodgerblue;outline-offset:4px}#app #code-stepper layout .box{border:2px solid #312f60;background:#f1f1f1;display:grid;grid-template-rows:40px 1fr;border-radius:6px;overflow:hidden}#app #code-stepper layout .box .box-header{color:white;border-bottom:2px solid #242729;padding-right:13px;display:block;height:38px;text-align:right;font-family:"Readex Pro", sans-serif;font-optical-sizing:auto;font-weight:900;font-style:normal;font-variation-settings:"HEXP" 0;font-size:14px;line-height:38px}#app #code-stepper layout .box .box-content{overflow:hidden;position:relative}#app #code-stepper layout #code{background:white;grid-area:code}#app #code-stepper layout #code .box-header{background:slateblue}#app #code-stepper layout #memory{background:white;grid-area:memory}#app #code-stepper layout #memory .box-header{background:teal}#app #code-stepper layout #memory text{font-size:16px;font-weight:bold;z-index:2}#app #code-stepper layout #memory square,#app #code-stepper layout #memory circle{z-index:1}#app #code-stepper layout #output{background:white;grid-area:output}#app #code-stepper layout #output .box-header{background:royalblue}#app #code-stepper layout #output wrapper{position:relative;display:block;height:10000px;width:100%;top:0;left:0;z-index:2}#app #code-stepper layout .element{position:absolute;display:none}#app #code-stepper layout .element.active{display:block}#app #code-stepper layout number.element.active{display:flex}#app #code-stepper layout carret{background-color:#000000;height:22px;width:2px}#app #code-stepper layout carret.active{animation:blink-caret 1s step-end infinite}#app #code-stepper layout square{display:block;border:2px solid #000000;z-index:3}#app #code-stepper layout vector{display:block;z-index:3;width:10px;height:10px;background-color:black}#app #code-stepper layout vector line{position:absolute;background:red;width:10px;border:2px solid black;box-shadow:0 0 2px black}#app #code-stepper layout vector line::after{content:"";position:absolute;display:block;height:6px;width:6px;background:red;top:-4px}#app #code-stepper layout vector arrow{position:absolute;display:block;height:50px;width:50px;background-repeat:no-repeat;background-size:contain;background-image:url('data:image/svg+xml,<svg fill="%23000000" width="800px" height="800px" viewBox="0 0 24 24" id="cursor-left-2" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><path id="secondary" d="M21,11v2a1,1,0,0,1-1,1H12.16L13,16.66a1,1,0,0,1-1.41,1.2l-8.06-5a1.07,1.07,0,0,1,0-1.78l8.06-5A1,1,0,0,1,13,7.34L12.16,10H20A1,1,0,0,1,21,11Z" style="fill: rgb(255, 0, 0); stroke-width: 1;"></path><path id="primary" d="M21,11v2a1,1,0,0,1-1,1H12.16L13,16.66a1,1,0,0,1-1.41,1.2l-8.06-5a1.07,1.07,0,0,1,0-1.78l8.06-5A1,1,0,0,1,13,7.34L12.16,10H20A1,1,0,0,1,21,11Z" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;"></path></svg>');z-index:101}#app #code-stepper layout vector arrow::before{content:"";position:absolute;display:block;height:6px;width:6px;background:red;top:22px;left:41px}#app #code-stepper layout vector arrow[face="left"]{transform:rotateZ(0)}#app #code-stepper layout vector arrow[face="right"]{transform:rotateZ(180deg)}#app #code-stepper layout vector arrow[face="up"]{transform:rotateZ(90deg)}#app #code-stepper layout vector arrow[face="down"]{transform:rotateZ(270deg)}#app #code-stepper layout highlight{display:block;background:rgba(255,255,0,0.3);border-radius:8;z-index:1}#app #code-stepper layout enter{display:block;z-index:3}#app #code-stepper layout circle{display:block;border:2px solid #000000;border-radius:100%;z-index:3}#app #code-stepper layout arrow{display:block;height:50px;width:50px;background-repeat:no-repeat;background-size:contain;background-image:url('data:image/svg+xml,<svg fill="%23000000" width="800px" height="800px" viewBox="0 0 24 24" id="cursor-left-2" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><path id="secondary" d="M21,11v2a1,1,0,0,1-1,1H12.16L13,16.66a1,1,0,0,1-1.41,1.2l-8.06-5a1.07,1.07,0,0,1,0-1.78l8.06-5A1,1,0,0,1,13,7.34L12.16,10H20A1,1,0,0,1,21,11Z" style="fill: rgb(255, 0, 0); stroke-width: 1;"></path><path id="primary" d="M21,11v2a1,1,0,0,1-1,1H12.16L13,16.66a1,1,0,0,1-1.41,1.2l-8.06-5a1.07,1.07,0,0,1,0-1.78l8.06-5A1,1,0,0,1,13,7.34L12.16,10H20A1,1,0,0,1,21,11Z" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;"></path></svg>');z-index:3}#app #code-stepper layout arrow[face="left"]{transform:rotateZ(0)}#app #code-stepper layout arrow[face="left"].active{animation:shaking-left 1s ease-in-out infinite alternate}#app #code-stepper layout arrow[face="right"]{transform:rotateZ(180deg)}#app #code-stepper layout arrow[face="right"].active{animation:shaking-right 1s ease-in-out infinite alternate}#app #code-stepper layout arrow[face="up"]{transform:rotateZ(90deg)}#app #code-stepper layout arrow[face="up"].active{animation:shaking-up 1s ease-in-out infinite alternate}#app #code-stepper layout arrow[face="down"]{transform:rotateZ(270deg)}#app #code-stepper layout arrow[face="down"].active{animation:shaking-down 1s ease-in-out infinite alternate}#app #code-stepper layout text{min-height:10px;font-family:"Roboto Mono", monospace;font-optical-sizing:auto;font-weight:700;font-style:normal;font-size:14px}#app #code-stepper layout number{width:28px;height:28px;line-height:28px;text-align:center;font-family:"Roboto Mono", monospace;font-optical-sizing:auto;font-weight:700;font-size:16px;background-color:red;color:white;border-radius:50%;z-index:3;border:2px solid black;align-items:center;justify-content:center}#app #code-stepper layout helper{display:block;position:absolute;top:20px;right:14px;z-index:4;overflow:hidden;direction:rtl;transition:all 0.3s ease-in-out}#app #code-stepper layout helper robot{display:block;width:60px;height:60px;animation:robot-idle 2s ease-in-out infinite alternate}#app #code-stepper layout helper robot svg{display:block}#app #code-stepper layout helper robot svg .s0{fill:#182a53}#app #code-stepper layout helper robot svg .s1{fill:#e3eede}#app #code-stepper layout helper robot svg .s2{fill:#bac0cd}#app #code-stepper layout helper robot svg .s3{fill:#95a0bb}#app #code-stepper layout helper robot svg .s4{fill:#1a417a}#app #code-stepper layout helper robot svg .s5{fill:#0dc3f2}#app #code-stepper layout helper robot svg #eye-left,#app #code-stepper layout helper robot svg #eye-right{animation:blink-eye 3s infinite}#app #code-stepper layout helper hint{background:linear-gradient(-235deg, #bddff4, #e7fdff);text-align:right;direction:rtl;display:block;border:1px solid #83a3c6;border-radius:12px;min-height:62px;line-height:32px;color:black;font-family:"Readex Pro", sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"HEXP" 0;font-size:14px;width:0;padding:15px;position:absolute}#app #code-stepper layout helper hint kbd{display:inline-block;margin:0 0.1em;padding:1px 7px;font-size:13px;line-height:20px;color:#242729;text-shadow:0 1px 0 #fff;background-color:#e1e3e5;border:1px solid #adb3b9;border-radius:3px;box-shadow:0 1px 0 rgba(12,13,14,0.2),0 0 0 2px #fff inset;white-space:nowrap;font-family:"Readex Pro", sans-serif}#app #code-stepper layout helper hint var{font-size:15px;font-family:"Roboto Mono", monospace;font-optical-sizing:auto;font-weight:700;font-style:normal}#app #code-stepper layout helper hint var,#app #code-stepper layout helper hint num,#app #code-stepper layout helper hint str,#app #code-stepper layout helper hint key{font-size:15px;font-family:"Roboto Mono", monospace;font-optical-sizing:auto;font-weight:700;font-style:normal}#app #code-stepper layout helper hint var{color:#a626a4}#app #code-stepper layout helper hint key{color:#0184bb}#app #code-stepper layout helper hint str{color:#d14;display:inline-block;direction:ltr}#app #code-stepper layout helper hint num{color:#286491;display:inline-block;direction:ltr}#app #code-stepper layout helper hint::after{content:"";display:block;position:absolute;border-right:1px solid #83a3c6;border-bottom:1px solid #83a3c6;width:15px;height:15px;background:linear-gradient(135deg, #daf0f2, #e7fdff)}#app #code-stepper layout helper[hint-pos="left"] hint{top:0px;right:82px}#app #code-stepper layout helper[hint-pos="left"] hint::after{transform:rotateZ(-45deg);top:20px;right:-9px}#app #code-stepper layout helper[hint-pos="below"] hint{top:82px;right:0}#app #code-stepper layout helper[hint-pos="below"] hint::after{transform:rotateZ(-135deg);right:21px;top:-9px}#app #code-stepper layout pre{width:100%;margin-bottom:0;text-align:left;direction:ltr;line-height:28px;min-height:28px;font-size:14px;padding:30px 0 0 50px;font-family:"Roboto Mono", monospace;font-optical-sizing:auto;font-weight:700;font-style:normal;color:#383a42;position:absolute;top:0;left:0;z-index:2}#app #code-stepper layout pre span{font-family:inherit}#app #code-stepper layout pre .comment,#app #code-stepper layout pre .quote{color:#99a;font-family:"Readex Pro", sans-serif;font-weight:normal;font-size:12px}#app #code-stepper layout pre .doctag,#app #code-stepper layout pre .keyword,#app #code-stepper layout pre .formula{color:#a626a4}#app #code-stepper layout pre .section,#app #code-stepper layout pre .name,#app #code-stepper layout pre .selector-tag,#app #code-stepper layout pre .deletion,#app #code-stepper layout pre .subst{color:#286491}#app #code-stepper layout pre .literal{color:#0184bb}#app #code-stepper layout pre .string,#app #code-stepper layout pre .regexp,#app #code-stepper layout pre .addition,#app #code-stepper layout pre .attribute,#app #code-stepper layout pre .meta .string{color:#d14}#app #code-stepper layout pre .attr,#app #code-stepper layout pre .variable,#app #code-stepper layout pre .template-variable,#app #code-stepper layout pre .type,#app #code-stepper layout pre .selector-class,#app #code-stepper layout pre .selector-attr,#app #code-stepper layout pre .selector-pseudo,#app #code-stepper layout pre .number{color:#4da0d2}#app #code-stepper layout pre .symbol,#app #code-stepper layout pre .bullet,#app #code-stepper layout pre .link,#app #code-stepper layout pre .meta,#app #code-stepper layout pre .selector-id,#app #code-stepper layout pre .title{color:#4078f2}#app #code-stepper layout pre .built_in,#app #code-stepper layout pre .title.class_,#app #code-stepper layout pre .class .title{color:#c18401}#app #code-stepper layout pre .emphasis{font-style:italic}#app #code-stepper layout pre .strong{font-weight:bold}#app #code-stepper layout pre .link{text-decoration:underline}#app #code-stepper layout[areas="cm-co"]{grid-template-areas:"code memory" "code output"}#app #code-stepper layout[areas="co-mm"]{grid-template-areas:"code output" "memory memory"}#app #code-stepper layout[areas="c-o"]{grid-template-areas:"code output" "code output"}#app #code-stepper layout[areas="c-o"] #memory{display:none}#app #controls{display:none;justify-content:center;align-items:center;gap:15px;position:fixed;z-index:100;width:100%}#app #controls button{cursor:pointer;border:none;transition:background-color 0.3s ease;background-color:unset;display:flex;align-items:center;gap:7px}#app #controls button span{font-size:16px}#app #controls #panel{display:flex;justify-content:center;align-items:center;width:100%;max-width:500px;border-radius:10px;height:50px;background-color:#0c0c37;overflow-x:auto;transition:max-width 0.3s ease-in-out}#app #controls #panel button{color:white;border:none;font-weight:bold;border-radius:12px;height:40px;padding:0 10px;margin:0 10px;transition:all 0.3s ease-in-out}#app #controls #panel button:hover{background-color:#191971}#app #controls #panel #steps-indicator,#app #controls #panel #zoom-indicator{cursor:default;color:white;font-size:16px;font-weight:bold;height:40px;line-height:40px;font-family:monospace}@media (max-width: 420px){#page-options .btn{width:100%}}@keyframes blink-eye{0%{transform:translateY(0) scaleY(1)}10%{transform:translateY(32px) scaleY(0.5)}20%{transform:translateY(0) scaleY(1)}30%{transform:translateY(32px) scaleY(0.5)}40%{transform:translateY(0) scaleY(1)}}@keyframes blink-caret{0%{opacity:0}50%{opacity:1}}@keyframes shaking-left{from{transform:rotateZ(0) translateX(0)}to{transform:rotateZ(0) translateX(5px)}}@keyframes shaking-right{from{transform:rotateZ(180deg) translateX(0)}to{transform:rotateZ(180deg) translateX(-5px)}}@keyframes robot-idle{from{transform:translateY(0)}to{transform:translateY(5px)}}@keyframes shaking-down{from{transform:rotateZ(270deg) translateX(0)}to{transform:rotateZ(270deg) translateX(-5px)}}@keyframes shaking-up{from{transform:rotateZ(90deg) translateX(0)}to{transform:rotateZ(90deg) translateX(5px)}}@media (max-width: 520px){#app #controls #panel{max-width:420px}}@media (max-width: 430px){#app #controls #panel{max-width:400px}}@media (max-width: 400px){#app #controls #panel{max-width:370px}#app #controls #panel button{margin:0 6px}}@media (max-width: 380px){#app #controls #panel{max-width:380px;border-radius:0}}@media (max-width: 360px){#app #controls #panel{max-width:360px;border-radius:0}}@media (max-width: 340px){#app #controls #panel{max-width:340px;border-radius:0}}@media (max-width: 320px){#app #controls #panel{max-width:320px;border-radius:0}}