:where(.astro-tx4wnphh){box-sizing:border-box}.navigation:where(.astro-tx4wnphh){display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin-bottom:1rem}.maker-container:where(.astro-tx4wnphh){display:flex;gap:1rem;margin-top:1rem;height:calc(100vh - 150px);max-height:800px}.side-panel:where(.astro-tx4wnphh){width:250px;min-width:250px;background-color:#f0f0f0;padding:1rem;border-radius:8px;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.block-selector:where(.astro-tx4wnphh){display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.block-button:where(.astro-tx4wnphh){display:flex;flex-direction:column;align-items:center;padding:.5rem;background-color:#fff;border:2px solid #ddd;border-radius:4px;cursor:pointer;transition:border-color .2s}.block-button:where(.astro-tx4wnphh):hover{border-color:#aaa}.block-button:where(.astro-tx4wnphh).selected{border-color:#4a5568;background-color:#e2e8f0}.block-button:where(.astro-tx4wnphh) img:where(.astro-tx4wnphh){width:40px;height:40px;object-fit:contain}.block-button:where(.astro-tx4wnphh) span:where(.astro-tx4wnphh){color:#4a5568;margin-top:.25rem;font-size:.8rem;text-align:center}.block-button:where(.astro-tx4wnphh):hover:not(.selected) span:where(.astro-tx4wnphh){color:#fff}.block-button:where(.astro-tx4wnphh).selected span:where(.astro-tx4wnphh){color:#1a202c;font-weight:600}.block-button:where(.astro-tx4wnphh):disabled,.block-button:where(.astro-tx4wnphh).disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.combined-image:where(.astro-tx4wnphh){position:relative;width:40px;height:40px}.combined-image:where(.astro-tx4wnphh) img:where(.astro-tx4wnphh){position:absolute;top:0;left:0;width:100%;height:100%}.combined-image:where(.astro-tx4wnphh) .overlay:where(.astro-tx4wnphh){position:absolute;top:0;left:0;z-index:1;background-color:#00ff0080;width:100%;height:100%}.grid-controls:where(.astro-tx4wnphh),.actions:where(.astro-tx4wnphh){display:flex;flex-direction:column;gap:.5rem}.grid-size:where(.astro-tx4wnphh){display:flex;flex-direction:column;gap:.5rem}.grid-size:where(.astro-tx4wnphh) label:where(.astro-tx4wnphh){display:flex;justify-content:space-between;align-items:center}.grid-size:where(.astro-tx4wnphh) input:where(.astro-tx4wnphh){width:60px;padding:.25rem}button:where(.astro-tx4wnphh){padding:.5rem;background-color:#4a5568;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}button:where(.astro-tx4wnphh):hover{background-color:#2d3748}.grid-container:where(.astro-tx4wnphh){flex:1;overflow:auto;padding:1rem;background-color:#f8f9fa;border-radius:8px;display:flex;justify-content:center;align-items:flex-start;user-select:none}.grid:where(.astro-tx4wnphh){display:grid;gap:1px;background-color:#ccc;border:1px solid #ccc}.grid-cell:where(.astro-tx4wnphh){width:40px;height:40px;aspect-ratio:1/1;background-color:#f8f9fa;cursor:pointer;display:flex;justify-content:center;align-items:center;position:relative;transition:transform .1s ease-in-out;padding:0;overflow:hidden}.grid-cell:where(.astro-tx4wnphh):hover{transform:scale(1.05);box-shadow:0 0 3px #0000004d;z-index:1}.grid-cell:where(.astro-tx4wnphh) img:where(.astro-tx4wnphh){width:100%;height:100%;object-fit:contain;image-rendering:pixelated;padding:0;margin:0}.export-area:where(.astro-tx4wnphh){margin-top:1rem}#export-code:where(.astro-tx4wnphh){width:100%;height:100px;font-family:monospace;padding:.5rem;resize:vertical}.validation-message:where(.astro-tx4wnphh){margin-top:.5rem;font-size:.9rem}.validation-message:where(.astro-tx4wnphh).error{color:#e53e3e}.validation-message:where(.astro-tx4wnphh).success{color:#38a169}.import-area:where(.astro-tx4wnphh){margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}#import-code-area:where(.astro-tx4wnphh){width:100%;font-family:monospace;padding:.5rem;resize:vertical;border:1px solid #ddd;border-radius:4px}.help-section:where(.astro-tx4wnphh){margin-top:1rem;border-top:1px solid #ddd;padding-top:1rem}.shortcuts:where(.astro-tx4wnphh){display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem;font-size:.9rem}.tip:where(.astro-tx4wnphh){margin-top:.5rem;font-size:.9rem;font-style:italic;color:#4a5568}@media (max-width: 768px){.maker-container:where(.astro-tx4wnphh){flex-direction:column;height:auto;max-height:none}.side-panel:where(.astro-tx4wnphh){width:100%}}