:root{--bg-color:#f7f3eb;--wood-brown:#5d3d28;--wood-dark:#3d2612;--wood-light:#f3e9d9;--text-color:#2b1810;--canvas-bg:#e8e0d4;--grid-line:#5d3d282e;--accent:#6b4c9a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:radial-gradient(#d5cbbd 1.5px, transparent 1.5px), radial-gradient(#d5cbbd 1.5px, var(--bg-color) 1.5px);color:var(--text-color);background-position:0 0,10px 10px;background-size:20px 20px;flex-direction:column;align-items:center;min-height:100vh;padding:20px 15px;font-family:DotGothic16,monospace,sans-serif;display:flex}header{justify-content:space-between;align-items:center;width:100%;max-width:560px;margin-bottom:20px;display:flex}.back-btn{background-color:var(--wood-light);color:var(--wood-brown);border:2px solid var(--wood-brown);box-shadow:2px 2px 0px 0px var(--wood-brown);border-radius:6px;padding:6px 12px;font-size:.85rem;font-weight:700;text-decoration:none}.back-btn:active{box-shadow:1px 1px 0px 0px var(--wood-brown);transform:translate(1px,1px)}main{border:4px solid var(--wood-dark);width:100%;max-width:560px;box-shadow:6px 6px 0px 0px var(--wood-dark);background-color:#fff;border-radius:12px;padding:20px}h1{text-align:center;color:var(--wood-brown);margin-bottom:5px;font-size:1.35rem}.sub-title{color:#718096;text-align:center;margin-bottom:15px;font-size:.85rem;line-height:1.55}.editor-layout{grid-template-columns:1fr 132px;align-items:start;gap:14px;display:grid}.canvas-wrap{background:var(--canvas-bg);border:3px solid var(--wood-brown);touch-action:none;border-radius:8px;padding:10px;box-shadow:inset 0 2px 6px #3c28141f}#pixel-canvas{width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;display:block}.side-panel{flex-direction:column;gap:10px;display:flex}.preview-box{background:var(--wood-light);text-align:center;border:2px solid #c9b89a;border-radius:8px;padding:10px}.preview-label{color:#8b7355;margin-bottom:8px;font-size:.68rem}.preview-row{justify-content:center;align-items:center;gap:10px;display:flex}.preview-canvas{border:2px solid var(--wood-brown);image-rendering:pixelated;image-rendering:crisp-edges;background:repeating-conic-gradient(#ddd8d0 0% 25%,#fff 0% 50%) 50%/8px 8px;border-radius:4px}.preview-canvas.size-1{width:32px;height:32px}.preview-canvas.size-4{width:64px;height:64px}.tool-bar{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.tool-btn{color:var(--wood-brown);cursor:pointer;background:#fff;border:2px solid #c9b89a;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:.75rem}.tool-btn.selected{background:var(--wood-light);border-color:var(--wood-brown);box-shadow:inset 0 0 0 1px #5d3d2826}.tool-btn:active{transform:translateY(1px)}.palette-section{margin-top:12px}.section-label{color:#8b7355;margin-bottom:6px;font-size:.72rem}.palette{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.color-btn{aspect-ratio:1;cursor:pointer;border:2px solid #5d3d2840;border-radius:4px;min-width:0;padding:0}.color-btn.selected{border-color:var(--wood-dark);box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wood-brown)}.color-btn.transparent{background:repeating-conic-gradient(#ddd8d0 0% 25%,#fff 0% 50%) 50%/6px 6px}.action-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;display:flex}.export-size{color:#8b7355;align-items:center;gap:6px;font-size:.72rem;display:flex}.export-size select{color:var(--wood-brown);background:#fff;border:2px solid #c9b89a;border-radius:6px;padding:6px 8px;font-family:inherit;font-size:.75rem}.action-btn{background:var(--wood-light);color:var(--wood-brown);border:2px solid var(--wood-brown);cursor:pointer;box-shadow:2px 2px 0 var(--wood-brown);border-radius:8px;padding:7px 12px;font-family:inherit;font-size:.78rem;font-weight:700}.action-btn.primary{background:var(--accent);color:#fff;border-color:#4a3570;box-shadow:2px 2px #4a3570}.action-btn:active{box-shadow:1px 1px 0 var(--wood-brown);transform:translate(1px,1px)}.action-btn.primary:active{box-shadow:1px 1px #4a3570}.grid-toggle{color:#8b7355;align-items:center;gap:6px;margin-top:10px;font-size:.72rem;display:flex}.data-notice{color:#a09080;text-align:center;margin-top:14px;font-size:.72rem;line-height:1.6}.save-modal-overlay{z-index:1000;background:#2b18108c;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}.save-modal-overlay.show{display:flex}.save-modal{border:4px solid var(--wood-dark);width:100%;max-width:320px;box-shadow:6px 6px 0 var(--wood-dark);text-align:center;background:#fff;border-radius:12px;padding:18px 16px 14px}.save-modal h2{color:var(--wood-brown);margin-bottom:8px;font-size:1rem}.save-modal p{color:#718096;margin-bottom:12px;font-size:.78rem;line-height:1.55}.save-modal-img-wrap{background:var(--canvas-bg);border:2px solid var(--wood-brown);border-radius:8px;margin-bottom:12px;padding:12px}.save-modal-img-wrap img{width:128px;height:128px;image-rendering:pixelated;-webkit-touch-callout:default;user-select:auto;margin:0 auto;display:block}.save-modal-actions{flex-direction:column;gap:8px;display:flex}.save-modal-actions button{background:var(--wood-light);width:100%;color:var(--wood-brown);border:2px solid var(--wood-brown);cursor:pointer;box-shadow:2px 2px 0 var(--wood-brown);border-radius:8px;padding:8px 12px;font-family:inherit;font-size:.82rem;font-weight:700}.save-modal-actions button.primary{background:var(--accent);color:#fff;border-color:#4a3570;box-shadow:2px 2px #4a3570}.save-modal-actions button:active{box-shadow:1px 1px 0 var(--wood-brown);transform:translate(1px,1px)}@media (width<=520px){.editor-layout{grid-template-columns:1fr}.side-panel{flex-flow:wrap;align-items:flex-start}.preview-box{flex:1;min-width:140px}.palette-section{flex:100%}}