body{margin:0;font-weight:lighter;font-family:monospace,Consolas,Roboto,-apple-system,BlinkMacSystemFont,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-color);font-size:.9rem}:root{--gap-1: 10px;--gap-2: calc(var(--gap-1) * 2);--gap-3: calc(var(--gap-1) * 3);--gap-4: calc(var(--gap-1) * 4);--gap-5: calc(var(--gap-1) * 5);--gap-6: calc(var(--gap-1) * 6);--btn-bg: #007acc;--btn-hover: #005fa3;--btn-bg-red: #d84315;--btn-hover-red: #a03311;--border-radius: 20px}:root[data-theme=dark]{--bg-color: #1e1e1e;--nav-color: #000;--bg-color-alt: #2c2c2c;--saved-sprites-bg: #252525;--text-color: #ffffff;--hero-bg: #121212;--link-hover: #939797;--bg-link: #ffffff;--link-text: #000000;--feature-bg: #2c2c2c;--scrollbar-thumb: #444;--console-bg: #111;--console-text: #0f0;--console-border: #333;--border-color: #aaa}:root[data-theme=light]{--bg-color: #fffbe8;--nav-color: #49b5fa;--bg-color-alt: #efead3;--saved-sprites-bg: #f6efd4;--text-color: #1e1e1e;--hero-bg: #f5f5f5;--link-hover: #939797;--bg-link: #000000;--link-text: #ffffff;--feature-bg: #efead3;--scrollbar-thumb: #bbb;--console-bg: #f4f4f4;--console-text: #2b2b2b;--console-border: #ccc;--border-color: #000}::-webkit-scrollbar{width:8px;height:8px;background-color:transparent!important}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--scrollbar-thumb)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;background:transparent!important}.navbar{font-size:20px;display:flex;justify-content:space-between;align-items:center;background:var(--bg-color);color:var(--text-color);padding:1rem .5rem;position:relative;flex-direction:row}.navbar.navbar-home{background-color:var(--nav-color)}.nav-logo{font-size:1.5rem;width:100px}.nav-logo img{width:50px}.nav-links{display:flex;gap:1.5rem}.nav-links a{text-decoration:none;color:var(--text-color);font-weight:700}.nav-links a:hover{color:var(--link-hover)}.nav-button{border:none;cursor:pointer;background-color:var(--bg-color);border-radius:30px;display:inline-flex;align-items:center;justify-content:center;padding:.5rem}.navbar.navbar-home .nav-button{background-color:var(--nav-color)}.nav-button img{width:30px;height:30px}@media (min-width: 768px){.nav-links a{text-decoration:none;color:var(--text-color);padding:.4rem .8rem}.nav-links a:hover{color:var(--link-text);border-color:var(--link-hover);background-color:var(--bg-link)}}@media (max-width: 768px){.nav-logo{width:100%}.navbar{flex-direction:column;align-items:stretch;padding:1rem}.nav-logo{display:flex;justify-content:center;margin-bottom:1rem}.nav-links{justify-content:center;align-items:center;gap:1rem;margin-bottom:auto}.theme-toggle{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.nav-button img{width:30px}}.code-snippet{position:relative;border-radius:8px;overflow:hidden;margin:20px 0;text-align:left}.code-snippet.dark{background-color:#2d2d2d;color:#f8f8f2}.code-snippet.light{background-color:#f5f5f5;color:#333}.codemirror-container{overflow:auto;border-radius:8px}.cm-editor{font-family:Fira Code,monospace;font-size:.85rem;height:auto;border-radius:8px}.cm-editor.cm-focused{outline:none}.cm-scroller{padding:10px}.code-snippet .cm-content{padding-left:3rem}.code-snippet.dark .cm-editor{background-color:#2d2d2d;color:#f8f8f2}.code-snippet.dark .cm-gutters{background-color:#2d2d2d;color:#6e6e6e;border-right:1px solid #444}.code-snippet.dark .cm-cursor{border-left-color:#f8f8f2}.code-snippet.dark .cm-selectionBackground{background-color:#4f4f4f!important}.code-snippet.light .cm-editor{background-color:transparent;color:inherit}.code-snippet.light .cm-gutters{background-color:transparent;color:inherit;border-right:1px solid transparent}.code-snippet.light .cm-cursor{border-left-color:currentColor}.code-snippet.light .cm-selectionBackground{background-color:inherit!important}.copy-button{position:absolute;top:10px;right:10px;padding:5px 10px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;z-index:10}.code-snippet.dark .copy-button{background-color:#444;color:#f8f8f2}.code-snippet.light .copy-button{background-color:#ddd;color:#333}.copy-button:hover{opacity:.8}.home-page{background-color:var(--bg-color);color:var(--text-color)}.head-logo{width:200px}.hero{text-align:center;padding:4rem 2rem;background-color:var(--bg-color)}.hero h1{font-size:3rem;margin-bottom:1rem;text-shadow:2px 3px black}.hero-buttons{display:flex;justify-content:center;margin-top:2rem}.hero-buttons a{min-width:150px;margin:0 1rem;padding:.75rem 1.5rem;background-color:var(--btn-bg-red);color:#fff;border-radius:50px;text-decoration:none;font-weight:700}.hero-buttons a:hover{background-color:var(--btn-hover-red)}.hero-buttons a[data-theme=dark]{background-color:var(--btn-bg);color:#fff}.hero-buttons a[data-theme=dark]:hover{background-color:var(--btn-hover)}.features{display:flex;flex-wrap:wrap;justify-content:space-around;padding:4rem 2rem;gap:2rem}.feature{flex:1 1 300px;background:var(--feature-bg);border:1px solid var(--border-color);color:var(--text-color);border-radius:12px;padding:2rem;text-align:center}.feature img{max-width:100px}.codeEditor{border-radius:12px!important;overflow:hidden}.demo-section .cm-editor{border-radius:12px!important;width:400px;padding:2rem 0;font-size:18px!important;background-color:var(--bg-color)}.demo-section .cm-gutters{display:none!important}.demo-section .cm-content{padding-left:12px!important}.demo-section{display:flex;justify-content:space-around;max-width:fit-content;gap:2rem;align-items:center;padding-top:var(--gap-4);padding-bottom:var(--gap-6);margin:0 4rem;background-color:var(--bg-color);color:var(--text-color)}.demo-text{font-size:24px;font-weight:400;color:var(--text-color);padding:var(--gap-4);max-width:400px}.demo-code{min-width:300px}.use-cases{background-color:var(--bg-color-alt);color:var(--text-color);display:flex;flex-direction:column;align-items:center;gap:1rem}.use-cases-title{text-align:center;font-size:2rem;margin-bottom:1rem}.hero.with-video{position:relative;overflow:hidden;color:#fff;display:flex;justify-content:center;background:var(--nav-color)}.background-video{position:absolute;top:0;max-width:700px;width:100%;height:100%;object-fit:cover;z-index:0}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.hero-content{position:relative;z-index:2;text-align:center;padding:4rem 2rem}.fade-in{animation:fadeInUp 1.2s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero-content h1,.hero-content p{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.hero.with-overlay-light{position:relative;background-image:url(/usecase2.gif);background-size:cover;background-position:center;color:#fff;z-index:0}.hero.with-overlay-dark{position:relative;background-image:url(/usecase1.gif);background-size:cover;background-position:center;color:#fff;z-index:0}.hero.with-overlay:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;z-index:1}.hero.with-overlay *{position:relative;z-index:2}.use-cases-background{background-image:url(/usecase1.gif);background-size:cover;background-position:center}@media (max-width: 1024px){.use-cases-background{background-image:url(/usecase1.gif),url(/usecase2.gif);background-size:50% 100%;background-position:left center,right center}}@media (max-width: 768px){.use-cases-background{background-image:url(/usecase1.gif);background-size:cover;background-position:center}}.use-cases-overlay{background-color:#0006;border-radius:12px;height:450px;display:flex;justify-content:center;align-items:center;flex-direction:column}.use-cases-title{font-size:2.5rem;margin-bottom:1.5rem;color:#fff;text-shadow:4px 3px black}.use-cases-subtext{font-size:1.3rem;max-width:800px;text-shadow:3px 2px black;margin:0 auto 2rem}.try-button-container{display:flex;justify-content:center;flex-direction:column;margin-top:3rem}.try-button{padding:1rem 2rem;min-width:150px;text-align:center;background-color:var(--btn-bg-red);color:#fff;text-decoration:none;font-weight:700;border-radius:50px}.about-me-section{padding:4rem 2rem;background-color:var(--bg-color);color:var(--text-color)}.about-me-container{display:flex;align-items:center;gap:2rem;max-width:1000px;margin:0 auto;flex-wrap:wrap}.about-me-image{width:250px;height:auto;border-radius:10px;border:1px solid var(--border-color);object-fit:cover;flex-shrink:0}.about-me-content{flex:1;max-width:768px;font-size:1.2rem}.about-me-content h2{font-size:2rem;margin-bottom:1rem}.about-me-content .email{margin-top:1rem;font-weight:700}.read-more-button{display:inline-block;margin-top:1.5rem;padding:.75rem 1.5rem;background-color:var(--btn-bg);color:#fff;text-decoration:none;font-size:1rem;font-weight:700;border-radius:50px}.read-more-button:hover{background-color:var(--btn-hover)}@media (max-width: 768px){.about-me-container{flex-direction:column;text-align:center}.about-me-image{width:80%;max-width:300px}}@media (max-width: 1024px){.use-case-img{width:30%}}@media (max-width: 768px){.hero-buttons{flex-direction:column}.hero-buttons a{margin-top:2rem}.feature{padding:1rem}.demo-content{flex-direction:column;flex-wrap:wrap}.demo-code{margin-top:2rem;width:100%}.demo-text{padding:0}.demo-section .cm-editor{width:100%}.use-cases{padding:2rem 1rem}.use-case-img{width:100%}}.examples-section{padding:2rem;text-align:center;overflow:visible}.examples-section h2{font-size:2.5rem;margin-bottom:6rem}.examples-container{display:flex;gap:2rem;width:100%;text-align:left;align-items:flex-start;overflow:visible}.example-code{margin-top:3rem;flex:0 0 560px;display:flex;justify-content:center;min-width:0}.example-code .codemirror-container{height:300px;overflow-y:auto}.example-carousel{--example-snippet-height: 320px;position:relative;width:300px;max-width:100%;perspective:1400px;transform-style:preserve-3d;margin:0 auto;outline:none}.example-carousel-track{position:relative;width:100%;height:var(--example-snippet-height);transform-style:preserve-3d}.example-carousel-card{position:absolute;top:0;right:0;bottom:0;left:0;height:var(--example-snippet-height);transform-style:preserve-3d;border-radius:16px;transition:transform .6s ease,opacity .6s ease;box-shadow:0 18px 50px #00000040;overflow:hidden}.example-result-image{width:100%;height:100%;display:block;border-radius:16px;object-fit:cover}.example-carousel-card.is-current{transform:translateZ(0) scale(1);z-index:3}.example-carousel-card.is-prev{transform:translate(-160px) translateZ(-140px) rotateY(20deg) scale(.92);opacity:.8;z-index:2}.example-carousel-card.is-next{transform:translate(160px) translateZ(-140px) rotateY(-20deg) scale(.92);opacity:.8;z-index:2}.example-carousel.carousel-anim-next .example-carousel-card.is-current{animation:orbitNextCurrent .6s ease;z-index:2;opacity:.85}.example-carousel.carousel-anim-next .example-carousel-card.is-prev{animation:orbitNextPrev .6s ease}.example-carousel.carousel-anim-next .example-carousel-card.is-next{animation:orbitNextNext .6s ease;z-index:3;opacity:1}.example-carousel.carousel-anim-prev .example-carousel-card.is-current{animation:orbitPrevCurrent .6s ease;z-index:2;opacity:.85}.example-carousel.carousel-anim-prev .example-carousel-card.is-prev{animation:orbitPrevPrev .6s ease;z-index:3;opacity:1}.example-carousel.carousel-anim-prev .example-carousel-card.is-next{animation:orbitPrevNext .6s ease}@keyframes orbitNextCurrent{0%{transform:translate(0) translateZ(0) rotateY(0) scale(1)}to{transform:translate(-160px) translateZ(-140px) rotateY(20deg) scale(.92)}}@keyframes orbitNextPrev{0%{transform:translate(-160px) translateZ(-140px) rotateY(20deg) scale(.92)}to{transform:translate(160px) translateZ(-140px) rotateY(-20deg) scale(.92)}}@keyframes orbitNextNext{0%{transform:translate(160px) translateZ(-140px) rotateY(-20deg) scale(.92)}to{transform:translate(0) translateZ(0) rotateY(0) scale(1)}}@keyframes orbitPrevCurrent{0%{transform:translate(0) translateZ(0) rotateY(0) scale(1)}to{transform:translate(160px) translateZ(-140px) rotateY(-20deg) scale(.92)}}@keyframes orbitPrevPrev{0%{transform:translate(-160px) translateZ(-140px) rotateY(20deg) scale(.92)}to{transform:translate(0) translateZ(0) rotateY(0) scale(1)}}@keyframes orbitPrevNext{0%{transform:translate(160px) translateZ(-140px) rotateY(-20deg) scale(.92)}to{transform:translate(-160px) translateZ(-140px) rotateY(20deg) scale(.92)}}.example-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem;padding:0 1.5rem 1.5rem}.example-side-fade{animation:exampleSideFadeIn .36s ease both}@keyframes exampleSideFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.example-title{margin:1rem 0;font-size:1.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-color)}.example-title:after{content:"";display:block;width:150px;height:4px;margin-top:.5rem;border-radius:999px;background:var(--btn-bg)}.example-try-button{display:inline-block;padding:.65rem 1.1rem;border-radius:999px;background-color:var(--btn-bg);color:#fff;text-decoration:none;font-weight:700;width:fit-content}.example-try-button:hover{background-color:var(--btn-hover)}.example-snippet-panel{padding:0}.example-snippet-panel .code-snippet{margin:0;border-radius:16px;height:320px;overflow:hidden;border:1px solid var(--border-color)}.example-snippet-panel .cm-editor{height:100%}.example-snippet-panel .cm-scroller{overflow:auto}.editor-showcase-section{position:relative;margin:4rem 1rem;padding:2rem 2rem 6rem;border-radius:18px;background-color:var(--bg-color);overflow:hidden;isolation:isolate}.editor-showcase-header{text-align:center;color:var(--text-color);max-width:760px;margin:0 auto 1.5rem;padding-bottom:1.5rem}.editor-showcase-header h2{margin:0 0 .6rem;font-size:2.2rem}.editor-showcase-grid{position:relative;width:min(860px,100%);min-height:360px;margin:0 auto;perspective:1400px;transform-style:preserve-3d}.editor-showcase-card{position:relative;min-height:300px;border-radius:16px;overflow:hidden;text-decoration:none;border:2px solid #aaa;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .26s ease,box-shadow .26s ease}.editor-showcase-card--sprite{position:absolute;top:0;left:6%;width:min(440px,62%);z-index:2;background-image:url(/sprite-editor.png);transform:rotateY(18deg) rotateX(5deg) translateZ(100px)}.editor-showcase-card--sfx{position:absolute;right:4%;top:72px;width:min(520px,72%);z-index:1;background-image:url(/sfx-editor.png);transform:rotateY(-13deg) rotateX(3deg) translateZ(0)}.editor-showcase-overlay{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;color:#fff}.editor-showcase-overlay h3{margin:0 0 .4rem;font-size:1.35rem}.editor-showcase-card:hover{border-color:#ffffff7a;box-shadow:0 20px 36px #0000004d}.editor-showcase-card--sprite:hover{transform:rotateY(16deg) rotateX(4deg) translateZ(140px)}.editor-showcase-card--sfx:hover{transform:rotateY(-11deg) rotateX(2deg) translateZ(170px)}.shell-download-section{margin:3rem 2rem 1rem;padding:2rem;border-radius:18px;background:linear-gradient(140deg,#0c1220,#1a2238,#2d3b63);color:#f5f7ff;display:flex;align-items:center;justify-content:space-between;gap:2rem}.shell-download-hero{flex:0 0 360px;max-width:100%;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px #00000059}.shell-download-image{width:100%;height:100%;display:block;object-fit:cover}.shell-download-content{flex:1;min-width:0}.shell-download-content h2{margin:0 0 .75rem;font-size:2rem;letter-spacing:.5px}.shell-download-content p{margin:0;font-size:1.05rem;line-height:1.65;max-width:60ch;opacity:.95}.shell-download-button{display:inline-block;margin-top:1.2rem;padding:.7rem 1.2rem;border-radius:999px;background-color:var(--btn-bg-red);color:#fff;text-decoration:none;font-weight:700}.shell-download-button:hover{background-color:var(--btn-hover-red)}@media (max-width: 900px){.examples-container{flex-direction:column;align-items:center}.example-side,.example-snippet-panel{width:100%}.editor-showcase-section{margin:2.5rem 1rem 1rem;padding:2rem 0rem}.shell-download-section{flex-direction:column;margin:2.5rem 1rem 1rem;padding:1.25rem;text-align:center}.shell-download-hero{flex:0 1 auto;width:100%;max-width:480px}.shell-download-content p{max-width:100%}}@media (max-width: 768px){.examples-section h2{position:relative;z-index:20;transform:translateY(-8px)}.example-carousel{width:100%;perspective:none}.example-code{flex:1 1 auto;width:100%}.example-carousel--compact{position:relative}.example-carousel--compact .example-carousel-card{position:static;transform:none;opacity:1;box-shadow:0 12px 30px #0000002e;animation:none!important;height:var(--example-snippet-height)}}@media (min-width: 1200px){.examples-section{margin:0 6.5rem}}._container_4k8ub_4{display:flex;flex-direction:row;background:var(--bg-color);color:#fff;padding-bottom:5rem;margin:2rem 0;height:100%}._leftPanel_4k8ub_17{position:relative;flex:1;max-width:50%;height:100%;background-color:var(--bg-color);border-right:2px solid var(--bg-color);display:flex;flex-direction:column;padding:1rem}._codeEditor_4k8ub_32{flex:0 0 500px;overflow:hidden;width:100%;height:500px;max-height:500px;min-height:500px;font-size:15px;font-family:consolas,monospace;font-weight:lighter;position:relative;border:1px solid black;border-radius:20px}.cm-editor{height:100%!important}.cm-scroller{overflow-y:scroll!important;overflow-x:auto!important;scrollbar-gutter:stable;position:relative;height:100%!important;padding:0}._rightPanel_4k8ub_63{flex:1;display:flex;flex-direction:column;align-items:center;background-color:var(--bg-color);padding:1rem;height:100%;overflow:hidden}._buttonGroup_4k8ub_77{gap:.5rem;margin-bottom:1rem}._codeButtons_4k8ub_85{position:relative;min-width:100px;display:flex}._runButton_4k8ub_91,._stopButton_4k8ub_92{position:absolute;bottom:10px;padding:0!important;z-index:20;pointer-events:auto}._runButton_4k8ub_91{left:24px}._stopButton_4k8ub_92{left:75px}._buttonIcon_4k8ub_108{width:40px;height:40px;display:block}._exampleSelector_4k8ub_117{padding:.7rem;border-radius:50px;background:var(--bg-color);color:var(--text-color);border:1px solid black;max-width:150px}._codeExamples_4k8ub_126{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-around;gap:.5rem}._codeExampleHeader_4k8ub_135{color:var(--text-color);font-weight:100;font-size:15px}._saveHint_4k8ub_141{margin:.5rem 0 0;font-size:.85rem;color:var(--text-color);opacity:.8}canvas{max-width:100%;image-rendering:pixelated;border:2px solid #444;border-radius:20px;background-color:#29adff;margin-bottom:1rem;aspect-ratio:1 / 1}._consoleContainer_4k8ub_164{position:relative;padding:8px;max-width:100%;width:500px;min-height:100px;max-height:100px;flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--console-bg, #111);color:var(--console-text, #0f0);font-family:monospace;font-size:.9rem;border:2px solid var(--console-border, #333);border-radius:20px}._consoleOutput_4k8ub_183{flex:1;overflow-y:auto;padding:34px 8px 8px}._consoleLine_4k8ub_189{white-space:pre-wrap}._clearButton_4k8ub_196{position:absolute;top:8px;right:8px;margin:0;border-radius:50px;padding:4px 10px!important;font-size:.8rem;z-index:25}._ribbonContainer_4k8ub_210{position:absolute;bottom:10px;right:10px;z-index:30;display:flex;flex-direction:column;align-items:flex-end}._menuButton_4k8ub_221{position:relative;right:20px;bottom:0;width:50px;height:50px;border-radius:50%;font-size:18px;padding:0;cursor:pointer;z-index:40;opacity:.5}._menuButton_4k8ub_221:hover{opacity:1}._ribbon_4k8ub_210{position:absolute;bottom:-8px;right:13px;height:420px;display:flex;flex-direction:column;gap:12px;align-items:center;padding:10px 6px;border-radius:50px;background:var(--bg-color);border:1px solid var(--border-color);transform-origin:bottom center;transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease}._ribbonOpen_4k8ub_267{transform:translateY(0);opacity:1;pointer-events:auto}._ribbon_4k8ub_210>*{transform:translateY(10px);opacity:0;transition:transform .25s ease,opacity .25s ease}._ribbonOpen_4k8ub_267>*{transform:translateY(0);opacity:1}._ribbon_4k8ub_210>button{width:50px;height:50px;border-radius:50%;padding:0}@media (min-width: 1280px){._container_4k8ub_4{padding:0 8rem}canvas{height:80%}}@media (max-width: 768px){._container_4k8ub_4{flex-direction:column-reverse;height:100%;margin:0}._leftPanel_4k8ub_17{max-width:100%;min-height:50vh;border-right:none}._rightPanel_4k8ub_63{height:50vh}._ribbon_4k8ub_210{bottom:0;right:0}._menuButton_4k8ub_221{right:7px;bottom:5px}._saveHint_4k8ub_141{display:none}}.editor-container{background:var(--bg-color);padding:20px;border:1px solid var(--border-color);border-radius:10px;width:90%;max-width:720px;max-height:90%;overflow-y:auto;margin:0 8px;position:relative}.editor-button{display:flex;justify-content:center;align-items:center;margin:5px 5px 0;padding:0}.sprite-editor-title{color:var(--text-color)}.editor-button img{width:30px;height:30px;color:#fff}.sprite-button{padding:8px 16px;display:flex;justify-content:center;font-weight:900;background:#007acc;color:#fff;border:none;border-radius:50px;cursor:pointer;transition:background .2s ease-in-out}.sprite-editor{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0 0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.editor-buttons-container{display:flex;align-items:center;justify-content:center;margin-bottom:10px;padding-top:1rem}.color-palette-container{display:flex;justify-content:center;align-items:center;height:100%}.palette-arrow{background:transparent;color:#aaa;border:none;font-size:20px;cursor:pointer;margin:4px;padding:4px}.palette-arrow:hover{opacity:.7}.editor-drawing-area{display:flex;justify-content:space-around;align-items:center}.color-palette{display:grid;grid-template-columns:repeat(4,0fr);margin-bottom:10px}.color{width:64px;height:64px;cursor:pointer;box-sizing:border-box}.editor-canvas{overflow:auto;border:2px solid var(--border-color);border-radius:20px;margin-bottom:10px}.canvas-nav-wrapper{display:flex;flex-direction:column;align-items:center}.canvas-coordinates{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--text-color);font-size:12px;margin-top:6px}.canvas-center-button{border:1px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--text-color);padding:2px 8px;font-size:12px;cursor:pointer}.canvas-center-button:disabled{opacity:.35;cursor:not-allowed}.canvas-coordinates-text{color:var(--text-color);margin-bottom:0;width:100%;display:flex;justify-content:center;gap:16px;font-size:15px}.canvas-nav-row{display:flex;align-items:center;gap:8px}.canvas-nav-arrow{background:transparent;color:#aaa;border:none;font-size:20px;cursor:pointer;margin:4px;padding:4px}.canvas-nav-arrow:disabled{opacity:.35;cursor:not-allowed}.editor-controls-section{margin:8px 16px;display:flex;align-items:center;justify-content:space-around;gap:16px}.editor-controls-section .canvas-coordinates{margin-top:0;width:auto}.editor-slider-container{margin:0;display:flex;justify-content:flex-start;gap:16px;flex-wrap:nowrap;padding:8px 0;align-items:center}.editor-slider-text{color:var(--text-color)}.editor-close-button{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--text-color);z-index:1100}.editor-close-button:hover{color:#aaa}.saved-sprites-grid{margin-top:20px;height:150px;display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto;background-color:var(--saved-sprites-bg);scrollbar-width:none;-ms-overflow-style:none;border:2px solid #c3bfbf;border-radius:20px;padding:16px 0}.saved-sprites-grid::-webkit-scrollbar{width:0;height:0;display:none}.sprite-preview{display:inline-flex;flex-direction:column;border:2px solid transparent;border-radius:8px;padding:2px;height:fit-content}.sprite-preview-selected{border-color:#22c55e;background:#22c55e26}.sprite-preview-drag-over{border-color:#007acc;background:#007acc1f}.sprite-row{display:flex}@media (max-width: 768px){.editor-drawing-area{flex-direction:column-reverse;align-items:center}.editor-buttons-container{flex-wrap:wrap}.saved-sprites-grid{justify-content:center}.editor-controls-section{flex-direction:column;align-items:center}.editor-slider-container{margin-left:0;justify-content:flex-start}}:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:.9;--rt-transition-show-delay:.15s;--rt-transition-closing-delay:.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{background:inherit;position:absolute;z-index:-1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay) ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay) ease-in}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;padding:8px 16px;width:max-content}.styles-module_arrow__K0L3T{height:var(--rt-arrow-size);width:var(--rt-arrow-size)}[class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}.button{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;transition:all .3s ease;padding:8px 16px;color:#fff;cursor:pointer}.button--primary{background-color:var(--btn-primary-bg, #007acc)}.button--primary:hover:not(:disabled){background-color:var(--btn-primary-hover, #005fa3)}.button--danger{background-color:var(--btn-danger-bg, #d84315)}.button--danger:hover:not(:disabled){background-color:var(--btn-danger-hover, #a03311)}.button--round{border-radius:50px}.button--icon{padding:10px}.button--border{border:1px solid black}.button--sm{padding:6px 12px;font-size:.875rem}.button--lg{padding:12px 20px;font-size:1.1rem}.button--xl{padding:16px 24px;font-size:1.25rem}.button--blue{background:#007acc}.button--blue:hover:not(:disabled){background:#005fa3}.button--red{background:#d84315}.button--red:hover:not(:disabled){background:#a03311}.button--green{background:#2e7d32}.button--green:hover:not(:disabled){background:#309136}.button--purple{background:#6a1b9a}.button--purple:hover:not(:disabled){background:#4a148c}.button--orange{background:#f57c00}.button--orange:hover:not(:disabled){background:#ef6c00}.button:disabled,.button--disabled{background:#555;cursor:not-allowed;opacity:.6}.dropdown-container{position:relative;display:inline-block;min-width:150px}.dropdown-button{padding:0 8px;border:none;width:100%;background-color:var(--bg-color);color:var(--text-color);cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--text-color)}.dropdown-arrow{margin-left:16px;width:16px}.dropdown-list{position:absolute;top:100%;left:0;right:0;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);max-height:500px;overflow-y:scroll;border:none;list-style:none;z-index:100}.dropdown-item{padding:8px 16px;cursor:pointer;font-size:14px;color:var(--text-color);transition:background-color .2s}.dropdown-item:hover{background-color:#007acc;color:#fff}.sfx-editor-container{background:var(--bg-color);color:var(--text-color);width:90%;max-width:720px;max-height:90%;padding:20px;margin:0 8px;border:1px solid var(--border-color);border-radius:10px;background-color:var(--bg-color-alt);overflow-y:auto;--sfx-grid-border: var(--console-border);--sfx-grid-bg: var(--console-bg);--sfx-text-color-light: rgba(255, 255, 255, .5);--sfx-label-color: #aaa;--sfx-control-bg: #333;--sfx-control-border: #555;--sfx-control-text: #fff;--sfx-muted-text: #ccc;--sfx-canvas-bg: #000;--sfx-canvas-border: #555;--sfx-thumb-border: #fff}.sfx-editor-actions button{width:50px;height:50px}button img{width:35px;height:35px}.sfx-editor{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.sfx-pitch-canvas{height:256px;width:100%;border-radius:20px;border:1px solid var(--sfx-canvas-border);background:#000;image-rendering:pixelated}.sfx-volume-canvas{height:128px;width:100%;border-radius:20px;border:1px solid var(--sfx-canvas-border);background:#000;image-rendering:pixelated}html[data-theme=light] .sfx-editor-container{--sfx-grid-border: var(--console-border);--sfx-grid-bg: var(--bg-color);--sfx-text-color-light: rgba(0, 0, 0, .5);--sfx-label-color: #555;--sfx-control-bg: #fffbe8;--sfx-control-border: #bdb39a;--sfx-control-text: #1e1e1e;--sfx-muted-text: #555;--sfx-canvas-bg: #5f5f5f;--sfx-canvas-border: #000000;--sfx-thumb-border: #1e1e1e}.sfx-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sfx-editor-title{margin:0}.sfx-editor-close{background:transparent;border:none;color:var(--text-color);font-size:20px;cursor:pointer;padding:0;line-height:1}.sfx-editor-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:center}@media (max-width: 768px){.sfx-editor-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}.sfx-control{display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;color:var(--text-color)}.sfx-control input[type=text],.sfx-control select{background-color:var(--sfx-control-bg);border:1px solid var(--text-color);color:var(--sfx-control-text);border-radius:0;padding:.5rem}.sfx-control input[type=range]{width:100%}.sfx-grid{padding:2rem 0;display:flex;flex-direction:column;gap:1rem}.sfx-grid-row{display:flex;align-items:stretch;gap:1rem}.sfx-grid-label{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:.8rem;font-weight:700;color:var(--sfx-label-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.sfx-grid-selected{font-size:.7rem;color:var(--sfx-theme-color);white-space:nowrap}.sfx-grid-columns{display:flex;flex-grow:1;border:1px solid var(--sfx-grid-border);border-radius:4px;overflow:hidden;position:relative;background-color:var(--sfx-grid-bg)}.sfx-grid-cell{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;border-right:1px solid var(--sfx-grid-border)}.sfx-grid-cell:last-child{border-right:none}.sfx-grid-cell[data-playing=true]{background-color:#ffffff1a}.sfx-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:100%;background:transparent;margin:0;cursor:pointer;writing-mode:bt-lr}.sfx-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;background:var(--sfx-theme-color);border:1px solid var(--sfx-thumb-border)}.sfx-slider::-moz-range-thumb{width:100%;height:5px;background:var(--sfx-theme-color);border:1px solid var(--sfx-thumb-border);border-radius:0}.sfx-grid-index{position:absolute;bottom:2px;font-size:8px;color:var(--sfx-text-color-light);pointer-events:none}.sfx-saved{display:flex;flex-direction:column;gap:.5rem}.sfx-saved-list{display:flex;flex-wrap:wrap;gap:.5rem}.sfx-saved-item{background-color:var(--sfx-control-bg);border:1px solid var(--sfx-control-border);color:var(--sfx-muted-text);border-radius:20px;padding:.5rem 1rem;cursor:pointer;font-size:.8rem}.sfx-saved-item.active{background-color:var(--sfx-theme-color);color:var(--sfx-control-text);font-weight:700}.sfx-editor-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;padding-top:1rem}.sfx-control-value{text-align:center;font-size:.8rem;color:var(--sfx-muted-text)}.docs-layout{display:flex;height:100vh;font-family:sans-serif;position:relative;background:var(--bg-color);color:var(--text-color);min-height:100vh}.menu-toggle{display:none;position:absolute;top:-3.6rem;left:1rem;z-index:1000;font-size:1.5rem;background:none;border:none;color:var(--text-color);cursor:pointer}.sidebar{width:300px;overflow:scroll;background:var(--bg-color);color:var(--text-color);padding:1rem 0;transition:transform .3s ease}.sidebar h2{margin-bottom:1rem;font-size:1.4rem;padding-left:1rem;color:var(--text-color)}.sidebar nav button{display:block;background:none;border:none;color:var(--text-color);padding:.5rem 0 .5rem 1rem;width:100%;text-align:left;cursor:pointer;font-size:1rem;font-weight:900;transition:background .2s}.sidebar nav button:hover,.sidebar nav button.active{background:var(--bg-link);color:var(--link-text)}.doc-content{flex:1;padding:2rem 8rem;overflow-y:auto;font-size:16px;background:var(--bg-color);color:var(--text-color);font-family:consolas,monospace}.doc-content h1{font-size:2rem;margin-bottom:1rem}.doc-content h3{font-size:1.2rem;margin-bottom:1rem}.doc-content pre{padding:1rem;border-radius:8px;max-width:500px;text-wrap:auto}.doc-content code{font-size:15.5px!important;font-family:consolas,monospace}.doc-content table{border:1px solid var(--text-color);border-collapse:separate;border-spacing:1rem}.doc-content th,.doc-content td{padding:.5rem 1rem;text-align:left;vertical-align:top}.doc-content a{color:#07c;text-decoration:none}.nav-buttons{display:flex;justify-content:flex-end;margin-bottom:1rem}.docs-nav-button{min-width:100px;margin-left:1rem}.go-top-btn{position:fixed;bottom:6rem;right:2rem;padding:6px!important;border:none;display:flex;cursor:pointer;z-index:999;transition:opacity .2s ease}.go-top-btn:hover{opacity:.8}.go-top-btn img{width:40px;fill:var(--text-color)}.section-title{font-weight:700;text-align:left;padding:.75rem 1rem;width:100%}.subsections{padding-left:1.5rem}.subsection{text-align:left;padding:.5rem 1rem;font-size:.9em;width:100%}@media (max-width: 1024px){.doc-content{padding:1rem 2rem}}@media (max-width: 768px){.docs-layout{flex-direction:column}.menu-toggle{display:block}.sidebar{position:absolute;top:0;left:0;height:100vh;z-index:999;transform:translate(-101%);width:80%;max-width:250px;overflow:scroll;border:1px solid var(--text-color)}.sidebar.open{transform:translate(-1%)}.doc-content{padding:1rem 1.5rem}.doc-content h1{text-align:center}.nav-buttons{justify-content:center;margin-right:1rem}}.about-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.about{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;margin:0 5rem;background-color:var(--bg-color);color:var(--text-color);max-width:768px}.about-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background-color:var(--bg-color);color:var(--text-color);max-width:768px}.my-photo{max-width:200px;width:100%;border-radius:var(--border-radius);border:1px solid var(--border-color)}.preview-image{max-width:300px;width:100%}.section{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:4rem;gap:2rem}.section.reverse{flex-direction:row-reverse}.section img{max-width:300px;width:100%;border-radius:12px;box-shadow:0 4px 10px #0003}.section .content{flex:1;min-width:300px}.section h2{font-size:2rem;margin-bottom:1rem}.section p{font-size:1rem;line-height:1.6}.contact{margin:4rem 2rem;text-align:center;font-size:1.1rem}.contact a{color:var(--btn-bg);text-decoration:none;font-weight:700}.contact a:hover{text-decoration:underline}@media (max-width: 1024px){.about{margin:0}}@media (max-width: 768px){.about{padding:0}.section{flex-direction:column;text-align:center}.section.reverse{flex-direction:column}}.page-not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:2rem;min-height:100vh}.page-not-found h1{font-size:3rem;margin-bottom:1rem;color:var(--text-color)}.page-not-found p{font-size:1.2rem;margin-bottom:2rem;color:var(--text-color)}.page-not-found img{width:250px;border-radius:50px}.home-link{min-width:150px;margin:0 1rem;padding:.75rem 1.5rem;background-color:var(--btn-bg-red);color:#fff;border-radius:50px;text-decoration:none;font-weight:700}.footer{background-color:var(--bg-color);color:var(--text-color);padding:2rem 1rem;font-size:.9rem}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-links a{margin:0 .75rem;color:var(--text-color);text-decoration:none}.footer-links a:hover{color:var(--text-color);text-decoration:underline}.logo{width:300px}@media (max-width: 600px){.footer-content{flex-direction:column-reverse;align-items:center}.footer-links{width:100%;display:flex;justify-content:center;margin-top:1rem}.footer-links a{display:block;margin:1rem}}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#121212cc;color:#fff;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center}.spinner{border:5px solid #444;border-top:5px solid #29adff;border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}