*{box-sizing:border-box}*,body{margin:0;padding:0}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.container{width:100%;background-color:#fff;overflow:hidden}header{background-color:#f0e6d6;padding:15px 20px;text-align:center;border-bottom:1px solid #e0d6c6;width:100%}header h1{color:#8b5a2b;margin-bottom:8px;font-size:1.7rem}header p{font-size:.9rem}.main-content{display:flex;flex-direction:column;padding:15px}.main-content>div{margin-bottom:20px}.main-content>div:last-child{margin-bottom:0}@media (min-width:768px){.main-content{flex-direction:row}.main-content>div{margin-bottom:0;margin-right:20px}.main-content>div:last-child{margin-right:0}}.control-panel,.preview-panel{width:100%}@media (min-width:768px){.control-panel{flex:0 0 400px;padding-right:20px}.preview-panel{flex:1}}h3{color:#8b5a2b;margin:15px 0 10px;font-size:1rem}.emotion-buttons,.font-buttons{display:flex;flex-wrap:wrap;margin:0 0 15px}.emotion-buttons button,.font-buttons button{background-color:#f0e6d6;border:1px solid #d9c9b4;border-radius:5px;padding:8px 0;cursor:pointer;transition:all .3s;min-width:50px;font-size:.85rem;margin:4px}.emotion-buttons button.active,.emotion-buttons button:hover,.font-buttons button.active,.font-buttons button:hover{background-color:#d9c9b4;color:#fff}textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;min-height:100px;resize:vertical;font-family:inherit;margin-bottom:10px;font-size:.9rem}.font-size-control{display:flex;align-items:center;margin:10px 0;font-size:.85rem}.font-size-control>*{margin-right:10px}.font-size-control>:last-child{margin-right:0}#fontSize{flex:1;min-width:100px;-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,tan var(--progress,0),#ddd var(--progress,0));outline:0}#fontSize::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,tan var(--progress,0),#ddd var(--progress,0))}#fontSize::-moz-range-track{width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,tan var(--progress,0),#ddd var(--progress,0))}#fontSize::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#8b4513;cursor:pointer;transition:background .2s ease;margin-top:-6px}#fontSize::-webkit-slider-thumb:hover{background:#6d360a}#fontSize::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:none;background:#8b4513;cursor:pointer;transition:background .2s ease}#fontSize::-moz-range-thumb:hover{background:#6d360a}.hint{font-size:.75rem;color:#666;margin-top:5px}.upload-btn{display:inline-block;background-color:#f0e6d6;border:1px solid #d9c9b4;border-radius:5px;padding:8px 15px;cursor:pointer;margin-bottom:10px;font-size:.85rem}.preview-image{max-width:100%;max-height:180px;margin-bottom:15px;display:none}.preview-image img{max-width:100%;max-height:180px;border:1px solid #ddd;border-radius:5px}.action-buttons{margin-top:15px}button{background-color:#8b5a2b;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;width:100%;transition:background-color .3s;font-size:.9rem}button:hover{background-color:#6d4421}.preview-panel{display:flex;flex-direction:column}.preview-container{border:1px solid #ddd;border-radius:5px;background-color:#f9f9f9;padding:10px;text-align:center;min-height:300px;display:flex;align-items:center;justify-content:center;flex:1}#previewCanvas{max-width:100%;max-height:100%;height:auto;box-shadow:0 0 10px rgba(0,0,0,.1)}footer{text-align:center;padding:12px 10px;background-color:#f0e6d6;border-top:1px solid #e0d6c6;margin-top:15px;font-size:.75rem;color:#666}footer a{color:#8b5a2b;text-decoration:none}footer a:hover{text-decoration:underline}@media (max-width:375px){.preview-container{min-height:250px}}#progressContainer{position:fixed;top:0;left:0;width:100%;height:4px;background-color:#f0e6d6;z-index:10000;display:none}#progressBar{height:100%;width:0;background-color:#8b5a2b;transition:width .3s ease}#loadingOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,100%,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;color:#8b5a2b}#loadingOverlay>div:first-child{font-size:1.2rem;margin-bottom:10px}#loadingOverlay>div:last-child{font-size:.9rem}.notification{position:fixed;bottom:20px;left:50%;padding:12px 20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.2);transform:translate(-50%,100px);opacity:0;transition:transform .3s ease,opacity .3s ease;z-index:999;font-size:.85rem;color:#fff}.notification.default{background-color:rgba(139,90,43,.73)}.notification.error{background-color:rgba(244,67,54,.73)}.notification.show{transform:translate(-50%);opacity:1}@supports (gap:8px){.emotion-buttons,.font-buttons{margin:0 0 15px;gap:8px}.emotion-buttons button,.font-buttons button{margin:0}.font-size-control{gap:10px}.font-size-control>*{margin-right:0}.main-content{gap:20px}.main-content>div{margin-bottom:0!important;margin-right:0!important}}@supports (font-size:clamp(1rem,2vw,1.5rem)){header h1{font-size:clamp(1.5rem,5vw,2rem)}header p{font-size:clamp(.9rem,3vw,1rem)}h3{font-size:clamp(1rem,3vw,1.1em)}.emotion-buttons button,.font-buttons button{font-size:clamp(.85rem,2vw,.95rem)}textarea{font-size:clamp(.9rem,2vw,1rem)}.font-size-control{font-size:clamp(.85rem,2vw,.9em)}.hint{font-size:clamp(.75rem,2vw,.8em)}.upload-btn{font-size:clamp(.85rem,2vw,.95rem)}button{font-size:clamp(.9rem,2vw,1rem)}footer{font-size:clamp(.75rem,2vw,.85em)}.notification{font-size:clamp(.85rem,2vw,.95rem)}}