#root{width:100%;min-height:100vh;display:flex;flex-direction:column}body{width:100%;margin:0;padding:0;font-family:sans-serif}*{box-sizing:border-box}#scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:transparent}#scroll::-webkit-scrollbar{width:.6rem;background-color:transparent}#scroll::-webkit-scrollbar-thumb{background-color:green;border-radius:8px;border:2px solid green}.ant-drawer-header-title{display:flex;justify-content:center;align-items:center}.ant-drawer-title{color:#fff!important;flex:.2!important;text-align:center;font-size:clamp(14px,2vw,20px)}@keyframes blink{0%{box-shadow:green 0 5px 15px}50%{box-shadow:orange 0 5px 15px}75%{box-shadow:red 0 5px 15px}to{box-shadow:green 0 5px 15px}}.blinking{animation:blink 1s infinite}@keyframes letterblink{0%{color:green}50%{color:orange}75%{color:red}to{color:green}}.letterblink{animation:letterblink 1s infinite}@keyframes exeBlink{0%{box-shadow:#8d0505 0 5px 15px}50%{box-shadow:#c83232 0 8px 18px}to{box-shadow:#8d0505 0 5px 15px}}.exeBlinking{animation:exeBlink 1s infinite}@keyframes bit-change{0%{top:-30px}25%{top:-20px}50%{top:-10px}75%{top:0}to{top:3px}}.change-bit{animation:bit-change .7s infinite;position:relative}.main-container{display:flex;flex:1;width:100%;height:100%;overflow:hidden}.control-panel{flex:.25;background:#fff}.play-ground{flex:.75;background:#00122e;display:flex;align-items:center;justify-content:center;min-height:300px}.user-simulation-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;position:relative}.user-simulation-header{position:absolute;top:5px;left:10px;display:flex;align-items:center;margin-block:10px}.user-simulation-body{flex:.9;width:100%;height:100%;display:flex;justify-content:center;align-items:center;max-height:90%}.user-simulation-content{width:100%;background:transparent;height:90%;box-shadow:green 0 5px 15px;border-radius:20px;padding:10px;display:flex;flex:.9;justify-content:space-between}.left-panel{flex:.49;display:flex;border-radius:20px;flex-direction:column;justify-content:space-between}.right-panel{flex:.49;box-shadow:green 0 5px 15px;border-radius:20px;width:100%;display:flex;flex-direction:column;max-width:50%}.drag-box{box-shadow:green 0 5px 15px;flex:.4;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column}.drag-box-content{display:flex;flex-direction:column;width:100%;justify-content:space-between;flex:1}.drag-box-header{height:40px;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;flex:.1}.drag-box-title{text-align:center;margin:1px;color:#000}.drag-box-body{display:flex;flex:.7;justify-content:center}.url-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:10px;width:100%;box-sizing:border-box}.url-item{background:#f0f0f0;border-radius:8px;padding:12px;text-align:center;cursor:grab;transition:background .3s ease}.url-item-title{margin:0}.image-item{width:150px;height:150px;margin-inline:15px;cursor:grabbing}.image-item-img{width:100%;height:100%;margin-inline:15px}.output-box{box-shadow:green 0 5px 15px;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;max-width:100%}.output-box-header{height:40px;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px}.output-box-title{text-align:center;margin:1px;color:#000}.modified-image-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.modified-image{width:80%;height:100%}.next-step-button-container{display:flex}.next-step-button{margin-top:10px;outline:none}.binary-container{flex:.49;display:flex;align-items:center;justify-content:center;flex-direction:column}.binary-title{color:#f5f5f5}.binary-grid{display:flex;width:450px;flex-wrap:wrap}.binary-item{width:15px;height:20px;margin:1.5px}.binary-item-text{margin:0;font-size:14px;text-align:center}.pixel-container{width:100%;padding:10px;box-sizing:border-box}.pixel-title{color:#fff;text-align:center;margin-bottom:10px}.pixel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;justify-items:center}.no-output{display:flex;align-items:center;justify-content:center;height:100%}.input-box-header{width:100%;height:40px;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;flex:.05;display:flex;align-items:center}.input-box-title{text-align:end;color:#000;margin:0;flex:.6}.input-box-code-icon{flex:.4;display:flex;justify-content:flex-end;margin-right:15px}.code-icon{font-size:20px;color:#000}.input-box-content{flex:1;display:flex;height:100%;flex-direction:column;overflow:hidden}.drop-area{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;height:100%;width:100%}.dropped-image{width:200px;height:200px}.dropped-item{width:300px;height:40px;background:#fff;border-radius:30px;padding:10px;color:#000;box-shadow:green 0 5px 15px;margin-inline:5px;cursor:grabbing;margin-block:10px}.dropped-item-title{margin:0}.encode-button-container{width:100%;display:flex;align-items:center;justify-content:center}.encode-button{width:100%;border-bottom-right-radius:20px;border-bottom-left-radius:20px;margin:0;color:#000;outline:none}.encode-button:disabled{color:#fff}@media (max-width: 1024px){.ant-drawer-title{font-size:clamp(12px,2.5vw,18px)}}@media (max-width: 768px){#root{flex-direction:column;padding:.5rem}.main-container{flex-direction:column}.control-panel{flex:none;width:100%}.url-list{grid-template-columns:1fr 1fr}.play-ground{flex:none;width:100%;min-height:50vh}.user-simulation-content{flex-direction:column}.left-panel,.right-panel{flex:none;width:100%;max-width:100%;margin-bottom:20px}.pixel-grid{grid-template-columns:1fr 1fr}.ant-drawer-title{flex:1!important;font-size:clamp(12px,3vw,16px)}}@media (max-width: 480px){#scroll::-webkit-scrollbar{width:.4rem}.url-list{grid-template-columns:1fr;overflow-y:auto;max-height:60vh}.pixel-grid{grid-template-columns:1fr}.ant-drawer-title{font-size:14px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}