*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background-color:#f0f0f0;color:#333;font-size:16px;position:relative;overflow-x:hidden}body{display:flex;flex-direction:column;min-height:100%}header{position:fixed;top:0;left:0;width:100%;background-color:#333;color:#fff;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;z-index:1000;height:50px;box-shadow:0 2px 4px rgba(0,0,0,.2)}header h1{font-size:1.2em;font-weight:600;white-space:nowrap}header #version{font-weight:400;font-size:.9em;margin-left:5px;opacity:.8}header button{background-color:#555;color:#fff;border:none;padding:8px 15px;cursor:pointer;border-radius:4px;font-size:.9em;transition:background-color .2s ease}header button:hover{background-color:#777}footer{position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:#ccc;padding:8px 20px;text-align:center;font-size:.8em;z-index:1000;height:35px}footer a{color:#aef;text-decoration:none}footer a:hover{text-decoration:underline}main{flex:1;padding-top:60px;padding-bottom:45px;display:flex;flex-direction:column;align-items:center;padding-left:20px;padding-right:20px;overflow-y:auto;width:100%}.controls{background-color:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:15px 20px;justify-content:center;width:100%;max-width:950px}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-weight:500;white-space:nowrap;font-size:.95em}.control-group button,.control-group input[type=number],.control-group select{padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:.9em;background-color:#fff}.control-group input[type=number]{width:65px}.control-group button{background-color:#e9e9e9;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.control-group button:hover{background-color:#dcdcdc;border-color:#bbb}.control-group button:active{background-color:#ccc}.custom-size-inputs{display:flex;align-items:center;gap:5px;border-left:2px solid #eee;margin-left:5px;padding-left:10px;transition:max-height .3s ease-out,opacity .2s ease-in-out,padding .3s ease-out,margin .3s ease-out,border .3s ease-out,visibility 0s linear 0s;max-height:50px;opacity:1;visibility:visible;overflow:hidden}.hidden-reserve-space{max-height:0!important;opacity:0;visibility:hidden;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;border-left-width:0!important;transition:max-height .3s ease-in,opacity .2s ease-in-out,padding .3s ease-in,margin .3s ease-in,border .3s ease-in,visibility 0s linear .3s}#currentColorDisplay{width:30px;height:30px;border:1px solid #555;margin-right:10px;flex-shrink:0;border-radius:3px}.color-palette{display:flex;flex-wrap:wrap;gap:4px;border:1px solid #eee;padding:5px;width:275px;overflow-y:hidden;align-items:center;background-color:#f9f9f9;border-radius:3px}.color-swatch{width:20px;height:20px;border:1px solid #ccc;cursor:pointer;display:inline-block;transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease;border-radius:2px;flex-shrink:0}.color-swatch:hover{transform:scale(1.1);border-color:#888}.color-swatch.selected{border:2px solid #000;transform:scale(1.15);box-shadow:0 0 5px rgba(0,0,0,.4);z-index:10;position:relative}.drawing-area-wrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:25px;width:100%;margin-top:10px;flex-wrap:wrap}.canvas-container{flex-shrink:0}#pixelCanvas{border:2px solid #666;background-color:#fff;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9 0 V7 M11 9 H18 M9 11 V18 M7 9 H0" stroke="black" stroke-width="3" fill="none" stroke-linecap="square"/><path d="M9 0 V7 M11 9 H18 M9 11 V18 M7 9 H0" stroke="white" stroke-width="1" fill="none" stroke-linecap="square"/></svg>') 9 9,crosshair;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges;max-width:100%;max-height:75vh;width:auto;height:auto;display:block;margin:0;box-shadow:0 4px 8px rgba(0,0,0,.15)}.preview-section{background-color:#fff;padding:10px 15px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);text-align:left;flex-shrink:0;width:auto}.preview-section h4{margin-bottom:8px;color:#555;font-size:1em;font-weight:600}.preview-controls{margin-bottom:10px;font-size:.9em}.preview-controls label{cursor:pointer;display:inline-flex;align-items:center;gap:5px}.preview-controls input[type=checkbox]{cursor:pointer;vertical-align:middle}.preview-canvas-container{line-height:0;padding:4px;background-color:#e0e0e0;border-radius:3px;display:inline-block}#previewCanvas{border:1px solid #aaa;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges;width:auto;height:auto;display:block;max-width:256px;max-height:256px}#toolbox{position:absolute;top:70px;left:20px;width:240px;background-color:rgba(245,245,245,.95);border:1px solid #bbb;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.2);z-index:1001;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);max-height:calc(100vh - 100px);overflow-y:auto}.toolbox-header{padding:6px 10px;background-color:rgba(200,200,200,.8);border-bottom:1px solid #bbb;cursor:move;font-size:.9em;font-weight:700;color:#444;border-top-left-radius:5px;border-top-right-radius:5px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:sticky;top:0;z-index:1}.toolbox-content{padding:10px}#toolbox button{display:flex;align-items:center;width:100%;padding:7px 10px;margin-bottom:8px;font-size:.9em;text-align:left;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.toolbox-content>:last-child{margin-bottom:0}#toolbox button:hover{background-color:#f0f0f0;border-color:#aaa}#toolbox button:active{background-color:#e0e0e0}.toolbox-icon{margin-right:8px;font-size:1.1em;display:inline-block;width:20px;text-align:center;flex-shrink:0}#toolbox #saveButton{border-left:3px solid #4caf50}#toolbox #loadButton{border-left:3px solid #2196f3}#toolbox #clearButton{border-left:3px solid #f44336}#toolbox #generateDataButton{border-left:3px solid #ff9800}.toolbox-divider{border:none;border-top:1px solid #ddd;margin:15px 0}.toolbox-section-header{font-size:.8em;font-weight:700;color:#666;text-transform:uppercase;margin-bottom:10px;padding-bottom:3px;border-bottom:1px solid #eee}.export-control-group{display:flex;align-items:center;gap:5px;margin-bottom:10px}.export-control-group label{font-size:.85em;color:#333;width:50px;flex-shrink:0}.export-control-group input[type=text],.export-control-group select{flex-grow:1;padding:5px 8px;font-size:.85em;border:1px solid #ccc;border-radius:3px}.export-output-area{position:relative;margin-top:5px}#exportDataOutput{width:100%;height:120px;border:1px solid #ccc;border-radius:3px;padding:8px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:.8em;resize:vertical;margin-bottom:5px;background-color:#fdfdfd;white-space:pre;overflow-wrap:break-word}#copyDataButton{padding:3px 8px;font-size:.8em;border-radius:3px;border:1px solid #ccc;background-color:#eee;cursor:pointer;display:inline-block;width:auto;margin-bottom:0;text-align:center}#copyDataButton:hover{background-color:#ddd}.toast-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:6px;background-color:#333;color:#fff;font-size:.9em;z-index:2000;opacity:0;transition:opacity .4s ease-in-out;box-shadow:0 3px 8px rgba(0,0,0,.2);max-width:80%;text-align:center;pointer-events:none}.toast-notification.show{opacity:1}.toast-notification.success{background-color:#4caf50;color:#fff}.toast-notification.error{background-color:#f44336;color:#fff}.toast-notification.warning{background-color:#ff9800;color:#fff}.toast-notification.info{background-color:#2196f3;color:#fff}