@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap";.app-container{display:flex;flex-direction:row;height:100vh;width:100%;overflow:hidden;font-family:var(--tl4k-font-family-body, "Roboto", sans-serif)}.editor-section{flex:1 1 0;min-width:0;padding:var(--tl4k-spacing-sm, 10px);display:flex;flex-direction:column;border-right:2px solid var(--tl4k-neutral-300, #ccc);overflow:hidden}.preview-section{flex:0 0 clamp(280px,30vw,440px);min-width:0;padding:var(--tl4k-spacing-sm, 10px);display:flex;flex-direction:column;overflow:hidden}.tier-wide .preview-section{flex-basis:clamp(360px,38%,640px);padding:var(--tl4k-spacing-md, 20px)}.tier-wide .editor-section{padding:var(--tl4k-spacing-md, 20px)}.tier-narrow{flex-direction:column}.tier-narrow .editor-section{flex:1 1 0;border-right:none;border-bottom:2px solid var(--tl4k-neutral-300, #ccc)}.tier-narrow .preview-section{flex:0 0 38vh}.preview-section h2{font-size:1rem;margin-bottom:6px}.preview-stage{flex:1 1 0;min-height:0;display:flex;align-items:flex-start;justify-content:center}h2{margin-top:0;font-family:"Press Start 2P",cursive;color:#2c3e50;text-align:center}.controls{display:flex;gap:10px;margin-bottom:10px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .3s}.btn-run{background:none;border:none;padding:0;cursor:pointer;width:40px;height:40px;transition:transform .1s}.btn-run:hover{transform:scale(1.1)}.btn-run:active{transform:scale(.95)}.btn-run img{width:100%;height:100%;display:block}.btn-stop{padding:8px 16px;font-size:16px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer}.btn-stop:hover:not(:disabled){background-color:#c0392b}.btn-stop:disabled{background-color:#bdc3c7;cursor:not-allowed}.blockly-area{flex:1;width:100%;height:100%;position:relative;overflow:hidden}.blockly-div{position:absolute;width:100%;height:100%}#pixi-canvas{width:min(100%,calc((100vh - 110px) * 4 / 3));aspect-ratio:4 / 3;border:2px solid var(--tl4k-neutral-300, #ccc);border-radius:8px;background-color:#f0f0f0;position:relative;overflow:hidden}.tier-narrow #pixi-canvas{width:min(100%,calc((38vh - 70px) * 4 / 3))}#pixi-canvas canvas{display:block}html,body,#root{margin:0;height:100%}