:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;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}}#root{text-align:center;width:100%;margin:0;padding:0}.app-container{box-sizing:border-box;flex-direction:column;align-items:center;min-height:100vh;padding:1rem;display:flex}header h1{letter-spacing:-1px;margin:0 0 1rem;font-family:Courier New,Courier,monospace;font-size:1.5rem}.home-header{justify-content:flex-start;align-items:center;gap:.75rem;width:100%;max-width:600px;margin-bottom:1.5rem;display:flex}.home-logo{width:32px;height:32px;image-rendering:pixelated}.home-header h1{margin:0;line-height:1}.editor-header{justify-content:space-between;align-items:center;gap:.5rem;width:100%;max-width:600px;margin-bottom:1rem;display:flex}.title-section{flex-direction:column;flex:1;align-items:flex-start;display:flex;overflow:hidden}.editor-header h1{white-space:nowrap;text-overflow:ellipsis;align-items:center;width:100%;margin:0;font-size:1.2rem;display:flex;overflow:hidden}.save-status{margin-top:-2px;font-family:monospace;font-size:.7rem;transition:opacity .3s}.save-status.saving{color:#888}.save-status.saved{color:#4caf50;opacity:.7}.back-btn{cursor:pointer;color:inherit;background:0 0;border:none;padding:0 .5rem;font-size:1.5rem}.export-btn{cursor:pointer;color:inherit;background:0 0;border:none;padding:0 .5rem;font-size:1.2rem}.header-actions{align-items:center;display:flex}.more-menu-container{position:relative}.more-btn{cursor:pointer;color:inherit;background:0 0;border:none;align-items:center;padding:0 .5rem;display:flex}.more-menu{z-index:50;background:#fff;border:1px solid #eee;border-radius:8px;min-width:150px;margin-top:.5rem;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 4px 12px #0000001a}.menu-item{cursor:pointer;text-align:left;color:#333;background:0 0;border:none;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:background .1s;display:flex}.menu-item:hover{background:#f5f5f5}.menu-divider{background:#eee;height:1px;margin:4px 0}.menu-item.danger{color:#dc3545}.menu-item.danger:hover{background:#fff5f5}.project-name{cursor:pointer;color:#555;text-overflow:ellipsis;margin-left:.3rem;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;overflow:hidden}.project-name-input{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;border-bottom:1px solid #ccc;outline:none;flex:1;min-width:50px;margin:0 0 0 .3rem;padding:0}main{flex-direction:column;gap:1rem;width:100%;max-width:600px;display:flex}.palette-select-container{align-items:center;gap:.5rem;display:flex}.palette-import-buttons{gap:2px;display:flex}.palette-import-buttons button{cursor:pointer;color:#666;background:#f9f9f9;border:1px solid #ddd;border-radius:4px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex}.palette-import-buttons button.active{color:#fff;background:#333;border-color:#333}.lospec-import-row{background:#f5f5f5;border:1px solid #eee;border-radius:6px;gap:4px;padding:4px;display:flex}.lospec-import-row input{border:1px solid #ddd;border-radius:4px;flex:1;padding:4px 8px!important;font-size:.8rem!important}.import-submit-btn,.lospec-link-btn{cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.import-submit-btn{color:#fff;background:#4caf50;border:none}.import-submit-btn:disabled{opacity:.5;cursor:not-allowed}.lospec-link-btn{color:#666;background:#eee;border:1px solid #ddd;text-decoration:none}.modal-description{color:#666;margin-top:-1rem;margin-bottom:1rem;font-size:.9rem}@media (prefers-color-scheme:dark){.palette-import-buttons button{color:#aaa;background:#2a2a2a;border-color:#444}.palette-import-buttons button.active{color:#1a1a1a;background:#eee;border-color:#eee}.lospec-import-row{background:#222;border-color:#333}.lospec-import-row input{color:#fff!important;background:#1a1a1a!important;border-color:#444!important}.lospec-link-btn{color:#aaa;background:#333;border-color:#444}.modal-description{color:#aaa}}.palette-selector{flex-direction:column;gap:1rem;display:flex}.palette-preview-strip{border:1px solid #0000001a;border-radius:2px;flex-direction:row;width:100%;height:12px;display:flex;overflow:hidden}.preview-color{flex:1;height:100%}.preview-more{background:#eee;padding:0 2px;font-size:8px;line-height:10px}.preview-loading{color:#888;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.palette-container{scrollbar-width:thin;background:#fff;border:1px solid #eee;border-radius:8px;flex-direction:column;gap:4px;max-width:100%;padding:8px;display:flex;overflow-x:auto;box-shadow:0 2px 4px #0000000d}.palette-row{flex-direction:row;gap:4px;display:flex}.palette-select{color:#333;background:#fff;border:1px solid #ddd;border-radius:4px;width:100%;padding:.6rem;font-size:1rem}@media (prefers-color-scheme:dark){.palette-container{background:#1a1a1a;border-color:#333}.palette-select{color:#fff;background:#2a2a2a;border-color:#444}}.color-swatch{cursor:pointer;box-sizing:border-box;border:2px solid #0003;border-radius:4px;flex-shrink:0;width:32px;min-width:32px;height:32px;padding:0;transition:transform .1s,border .1s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{z-index:1;border:3px solid #0006;transform:scale(1.2)}.color-swatch.temp{border-style:dashed}@media (prefers-color-scheme:dark){.color-swatch{border:2px solid #fff3}.color-swatch.active{border:3px solid #fff6}}.toolbar{background:#fff;border:1px solid #eee;border-radius:12px;flex-direction:row;justify-content:center;align-items:center;gap:.5rem;padding:.4rem;display:flex;box-shadow:0 2px 8px #0000000d}.control-group{flex-direction:row;gap:2px;display:flex}.divider{background:#eee;width:1px;height:20px;margin:0 4px}.control-group button{cursor:pointer;color:#666;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-family:monospace;font-size:.9rem;font-weight:700;transition:all .1s;display:flex}.control-group button:disabled{opacity:.3;cursor:not-allowed}.control-group button:hover:not(:disabled){background:#f0f0f0}.control-group button.active{color:#fff;background:#333}.control-group button[title=Draw],.control-group button[title=Erase]{font-size:1.1rem}@media (prefers-color-scheme:dark){.palette-bar,.toolbar{background:#1a1a1a;border-color:#333;box-shadow:0 2px 8px #0000004d}.more-menu{background:#1a1a1a;border-color:#333}.menu-item{color:#eee}.menu-item:hover{background:#2a2a2a}.menu-item.danger{color:#ff4d4d}.menu-item.danger:hover{background:#331a1a}.project-name{color:#aaa}.project-name:hover{color:#fff}.control-group button:hover{background:#333}.control-group button.active{color:#000;background:#eee}.divider{background:#333}.color-swatch.active{box-shadow:0 0 0 2px #eee}.save-status.saved{color:#81c784}}.modal-overlay{z-index:100;-webkit-overflow-scrolling:touch;background:#00000080;justify-content:center;align-items:flex-start;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-content{text-align:center;background:#fff;border-radius:12px;flex-direction:column;gap:1rem;width:320px;max-width:100%;margin:auto;padding:2rem;display:flex;box-shadow:0 10px 25px #0003}.modal-content h3{color:#333;margin-top:0;margin-bottom:1.5rem}.export-options{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.export-options button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:8px;padding:1rem;font-size:1rem;font-weight:700}.export-options button:hover{background:#444}.close-modal{color:#888;cursor:pointer;background:0 0;border:none;text-decoration:underline}.new-project-form{text-align:left;flex-direction:column;gap:1.2rem;display:flex}.input-group{flex-direction:column;gap:.4rem;display:flex}.input-group label{color:#666;text-transform:uppercase;font-size:.8rem;font-weight:700}.input-group input{color:#333;background:#fff;border:1px solid #ddd;border-radius:4px;padding:.6rem;font-size:1rem}.size-inputs{gap:1rem;display:flex}.size-inputs .input-group{flex:1}.size-presets{justify-content:center;gap:.5rem;display:flex}.size-presets button{cursor:pointer;color:#333;background:#f9f9f9;border:1px solid #ddd;border-radius:4px;padding:.4rem .8rem;font-size:.8rem}.modal-actions{gap:1rem;margin-top:.5rem;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.file-dropzone{cursor:pointer;color:#666;background:#f9f9f9;border:2px dashed #ccc;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;padding:1.5rem 1rem;font-family:inherit;transition:background .15s,border-color .15s,color .15s;display:flex}.file-dropzone:hover{color:#333;background:#f0f0f0;border-color:#888}.file-dropzone-title{font-size:.95rem;font-weight:600}.file-dropzone-hint{opacity:.7;font-size:.75rem}.file-selected{cursor:pointer;color:#2f5ea0;text-align:left;background:#f0f7ff;border:1px solid #c9dcf2;border-radius:6px;align-items:center;gap:.6rem;padding:.6rem .8rem;font-family:inherit;transition:background .15s;display:flex}.file-selected:hover{background:#e4eefc}.file-selected-icon{flex-shrink:0}.file-selected-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.9rem;overflow:hidden}.file-selected-change{opacity:.7;flex-shrink:0}@media (prefers-color-scheme:dark){.file-dropzone{color:#aaa;background:#242424;border-color:#444}.file-dropzone:hover{color:#eee;background:#2a2a2a;border-color:#777}.file-selected{color:#8fb6ea;background:#1f2a3a;border-color:#2f4262}.file-selected:hover{background:#253349}}.import-preview{background:#f9f9f9;border:1px solid #eee;border-radius:6px;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;display:flex}.import-preview-stage{background-color:#f0f0f0;background-image:linear-gradient(45deg,#e0e0e0 25%,#0000 25%),linear-gradient(-45deg,#e0e0e0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e0e0e0 75%),linear-gradient(-45deg,#0000 75%,#e0e0e0 75%);background-size:12px 12px;border-radius:4px;justify-content:center;align-items:center;width:192px;height:192px;display:flex;overflow:hidden}.import-preview-img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.checkbox-label{cursor:pointer;align-items:center;gap:.5rem;text-transform:none!important;color:inherit!important;flex-direction:row!important;font-size:.9rem!important;font-weight:400!important;display:flex!important}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0}.import-preview-info{color:#666;margin:0;font-size:.8rem}.import-error{color:#b00020;background:#fde7ea;border-radius:4px;margin:0;padding:.5rem .75rem;font-size:.85rem}.primary-btn:disabled{opacity:.5;cursor:not-allowed}@media (prefers-color-scheme:dark){.import-preview{background:#242424;border-color:#333}.import-preview-info{color:#aaa}.import-error{color:#ff8a95;background:#3a1a1f}}.primary-btn{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;flex:2;padding:.8rem;font-weight:700}.secondary-btn{color:#333;cursor:pointer;background:#eee;border:none;border-radius:6px;flex:1;padding:.8rem}@media (prefers-color-scheme:dark){.input-group label{color:#aaa}.input-group input{color:#fff;background:#2a2a2a;border-color:#444}.size-presets button{color:#eee;background:#2a2a2a;border-color:#444}.primary-btn{color:#1a1a1a;background:#eee}.secondary-btn{color:#eee;background:#333}.modal-content{color:#fff;background:#1a1a1a}.modal-content h3{color:#fff}.export-options button{color:#000;background:#eee}.export-options button:hover{background:#fff}}.canvas-wrapper{touch-action:none;background-color:#eee;border-radius:8px;width:100%;max-width:600px;margin:0 auto;position:relative;overflow:hidden}.canvas-container{transform-origin:50%;width:100%;height:100%;transition:transform 50ms linear;position:relative}.canvas-layer{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;display:block;position:absolute;top:0;left:0}.interaction-layer{z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.checkerboard{z-index:0}.background{z-index:1}.foreground{z-index:2}.foreground.outlined{-webkit-mask-image:linear-gradient(90deg,#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px)),linear-gradient(#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px));mask-image:linear-gradient(90deg,#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px)),linear-gradient(#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px));-webkit-mask-size:calc(100% / var(--canvas-width)) calc(100% / var(--canvas-height));mask-size:calc(100% / var(--canvas-width)) calc(100% / var(--canvas-height));-webkit-mask-image:linear-gradient(90deg,#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px)),linear-gradient(#000 1px,#0000 1px calc(100% - 1px),#000 calc(100% - 1px));-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:calc(100% / var(--canvas-width)) calc(100% / var(--canvas-height));opacity:1;filter:none;background-image:none;-webkit-mask-repeat:repeat}@media (prefers-color-scheme:dark){.foreground.outlined{filter:none;background-image:none}}.zoom-indicator{color:#fff;pointer-events:auto;cursor:pointer;z-index:20;background:#0009;border-radius:4px;padding:4px 8px;font-family:monospace;font-size:.8rem;position:absolute;bottom:10px;right:10px}@media (prefers-color-scheme:dark){.canvas-wrapper{background-color:#1a1a1a}.zoom-indicator{background:#fff3}}.project-list-container{width:100%;padding:1rem}.project-list-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.project-list-header h2{margin:0;font-family:Courier New,Courier,monospace}.project-list-actions{gap:.5rem;display:flex}.new-project-btn,.import-project-btn{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-family:monospace;display:flex}.import-project-btn{color:#333;background:0 0;border:1px solid #333}@media (prefers-color-scheme:dark){.new-project-btn{color:#1a1a1a;background:#eee}.import-project-btn{color:#eee;background:0 0;border-color:#eee}}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;display:grid}.project-card{cursor:pointer;background:#fff;border:1px solid #eee;border-radius:8px;transition:transform .1s;overflow:hidden;box-shadow:0 2px 5px #0000000d}.project-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.project-preview{aspect-ratio:1;background-color:#fff;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}@media (prefers-color-scheme:dark){.project-preview{background-color:#1a1a1a}}.thumbnail-img{max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background-color:#f0f0f0;background-image:linear-gradient(45deg,#e0e0e0 25%,#0000 25%),linear-gradient(-45deg,#e0e0e0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e0e0e0 75%),linear-gradient(-45deg,#0000 75%,#e0e0e0 75%);background-size:20px 20px;display:block}.project-preview:not(.has-thumbnail){background-color:#f0f0f0;background-image:linear-gradient(45deg,#e0e0e0 25%,#0000 25%),linear-gradient(-45deg,#e0e0e0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e0e0e0 75%),linear-gradient(-45deg,#0000 75%,#e0e0e0 75%);background-size:20px 20px}.project-size-badge{color:#fff;background:#00000080;border-radius:10px;padding:2px 6px;font-size:.7rem}.project-info{background:#fff;padding:.75rem}.project-info h3{white-space:nowrap;text-overflow:ellipsis;color:#333;margin:0 0 .25rem;font-size:.9rem;overflow:hidden}.project-info p{color:#888;margin:0;font-size:.7rem}@media (prefers-color-scheme:dark){.project-card,.project-info{background:#1a1a1a;border-color:#333}.project-info h3{color:#eee}}.empty-state{text-align:center;color:#999;grid-column:1/-1;padding:2rem}