html,body{margin:0;padding:0;height:100%;box-sizing:border-box;font-family:Courier New,Courier,monospace}*,*:before,*:after{box-sizing:inherit}#app-container{display:flex;height:100vh;width:100%}#canvas-container{flex:1;display:flex;justify-content:center;align-items:center}canvas{display:block;max-width:100%;height:auto}#control-panel{width:420px;padding:10px;background-color:#f0f0f0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}h1,h2,h3{margin:0 0 10px;padding-bottom:8px}h1{font-size:24px;border-bottom:2px solid #4CAF50}h2{font-size:20px;border-bottom:1px solid #4CAF50}h3{font-size:16px;margin-top:2px}.control-group{display:flex;flex-direction:column;gap:5px;margin-bottom:5px}label{display:block;margin-bottom:5px}.radio-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.radio-option{display:flex;align-items:center;gap:6px}input[type=range]{width:100%}input[type=number],select{width:30%;padding:5px;font-family:inherit}.slider-with-input{display:flex;align-items:center;gap:10px}.slider-with-input .value-input{width:60px}.slider-with-input .range-input{flex:1}button{width:100%;padding:10px;border:none;border-radius:4px;cursor:pointer;font-family:inherit;background-color:#4caf50;color:#fff}button:hover{background-color:#45a049}#reset-image,#reset-settings{background-color:#f44336}#reset-image:hover,#reset-settings:hover{background-color:#d32f2f}.download-button{padding:5px;margin-top:5px}.char-color-row{margin-bottom:1.25rem}.color-alpha-row{display:flex;align-items:center;gap:12px}.color-alpha-row input[type=color]{width:44px;height:36px;padding:0;border:1px solid #999;cursor:pointer}.color-alpha-row input[type=range]{flex:1;min-width:120px}.color-alpha-row input[type=number]{width:60px}#color-extraction-message{background-color:#e7f3fe;border:1px solid #b6d4fe;padding:10px;border-radius:4px;margin-top:10px;font-style:italic}.layer-tabs{display:flex;gap:4px;border-bottom:2px solid #4CAF50;margin:4px 0 10px}.layer-tab{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#ddd;border:1px solid #bbb;border-bottom:none;border-radius:6px 6px 0 0;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.layer-tab.is-active{background:#4caf50;color:#fff;border-color:#4caf50}.layer-tab.is-hidden-layer{opacity:.55;text-decoration:line-through}.layer-tab input[type=checkbox]{margin:0;cursor:pointer}#layer-opacity-controls .slider-with-input{margin:2px 0}#layer-opacity-controls .opacity-label{width:64px;margin:0;font-size:12px}#layer-opacity-controls input:disabled{opacity:.45}#palette-source{width:100%}#palette-options{display:flex;flex-direction:column;gap:8px}#palette-status{font-size:12px;font-style:italic;color:#555;min-height:1em}.palette-swatches{display:flex;flex-direction:column;gap:6px}.palette-swatch{display:flex;align-items:center;gap:10px;padding:4px 6px;background:#fff;border:1px solid #ccc;border-radius:4px}.palette-swatch.is-locked{border-color:#4caf50}.palette-swatch-index{width:18px;text-align:right;color:#666;font-size:12px}.palette-swatch input[type=color]{width:44px;height:30px;padding:0;border:1px solid #999;cursor:pointer}.palette-swatch-hex{flex:1;font-size:12px;color:#333}.palette-swatch-lock{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;white-space:nowrap}.hint{font-size:12px;color:#666;margin:4px 0 0}.is-hidden{display:none!important}#shadow-controls .control-group{margin-bottom:14px}#shadow-controls label{margin-bottom:6px}#shadow-controls .slider-with-input{gap:10px;margin:6px 0}#shadow-controls .slider-with-input label{width:28px;margin:0}.checkbox-row{display:flex;align-items:center;gap:10px}.shadow-layer{border:1px solid #ccc;background:#fff;border-radius:6px;padding:10px;margin-top:10px}.shadow-layer h4{margin:0 0 8px;font-size:14px;border-bottom:1px solid #4CAF50;padding-bottom:4px}