main{display:flex;flex-direction:column;align-items:center;padding-left:20px;padding-right:20px;overflow-y:auto}.controls{background-color:var(--card-bg);padding:15px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-sm);border:1px solid var(--border-color);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 select,.control-group input[type=number],.control-group button{padding:6px 10px;border:1px solid var(--input-border-color);border-radius:var(--border-radius-sm);font-size:.9em;background-color:var(--input-bg-color);color:var(--text-color)}.control-group input[type=number]{width:65px}.control-group button{background-color:var(--gray-200);cursor:pointer;transition:var(--transition)}.control-group button:hover{background-color:var(--gray-300);border-color:var(--gray-500)}.control-group button:active{background-color:var(--gray-400)}.custom-size-inputs{display:flex;align-items:center;gap:5px;border-left:2px solid var(--border-color);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 var(--gray-600);margin-right:10px;flex-shrink:0;border-radius:var(--border-radius-sm)}.color-palette{display:flex;flex-wrap:wrap;gap:4px;border:1px solid var(--border-color);padding:5px;width:275px;overflow-y:hidden;align-items:center;background-color:var(--gray-100);border-radius:var(--border-radius-sm)}.color-swatch{width:20px;height:20px;border:1px solid var(--gray-400);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:var(--gray-600)}.color-swatch.selected{border:2px solid #000;transform:scale(1.15);box-shadow:0 0 5px #0006;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 var(--gray-600);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:var(--box-shadow)}.preview-section{background-color:var(--card-bg);padding:10px 15px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-sm);border:1px solid var(--border-color);text-align:left;flex-shrink:0;width:auto}.preview-section h4{margin-bottom:8px;color:var(--text-muted);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:var(--gray-200);border-radius:var(--border-radius-sm);display:inline-block}#previewCanvas{border:1px solid var(--gray-500);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 0px;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:90px;left:20px;width:240px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow-lg);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:var(--gray-200);border-bottom:1px solid var(--border-color);cursor:move;font-size:.9em;font-weight:700;color:var(--text-color);border-top-left-radius:calc(var(--border-radius) - 1px);border-top-right-radius:calc(var(--border-radius) - 1px);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 var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--card-bg);color:var(--text-color);cursor:pointer;transition:var(--transition)}.toolbox-content>*:last-child{margin-bottom:0}#toolbox button:hover{background-color:var(--gray-100);border-color:var(--gray-500)}#toolbox button:active{background-color:var(--gray-200)}.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 var(--success)}#toolbox #loadButton{border-left:3px solid var(--primary)}#toolbox #clearButton{border-left:3px solid var(--danger)}#toolbox #generateDataButton{border-left:3px solid var(--warning)}.toolbox-divider{border:none;border-top:1px solid var(--border-color);margin:15px 0}.toolbox-section-header{font-size:.8em;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;padding-bottom:3px;border-bottom:1px solid var(--border-color)}.export-control-group{display:flex;align-items:center;gap:5px;margin-bottom:10px}.export-control-group label{font-size:.85em;color:var(--text-color);width:50px;flex-shrink:0}.export-control-group select,.export-control-group input[type=text]{flex-grow:1;padding:5px 8px;font-size:.85em;border:1px solid var(--input-border-color);border-radius:var(--border-radius-sm);background-color:var(--input-bg-color);color:var(--text-color)}.export-output-area{position:relative;margin-top:5px}#exportDataOutput{width:100%;height:120px;border:1px solid var(--input-border-color);border-radius:var(--border-radius-sm);padding:8px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.8em;resize:vertical;margin-bottom:5px;background-color:var(--input-bg-color);color:var(--text-color);white-space:pre;overflow-wrap:break-word}#copyDataButton{padding:3px 8px;font-size:.8em;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);background-color:var(--gray-200);color:var(--text-color);cursor:pointer;display:inline-block;width:auto;margin-bottom:0;text-align:center}#copyDataButton:hover{background-color:var(--gray-300)}.toast-notification{position:fixed;bottom:70px;left:50%;transform:translate(-50%);padding:12px 20px;border-radius:var(--border-radius);background-color:var(--gray-800);color:#fff;font-size:.9em;z-index:2000;opacity:0;transition:opacity .4s ease-in-out;box-shadow:var(--box-shadow);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}