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}.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}