:root{color:#213547;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{box-sizing:border-box;justify-content:center;align-items:flex-start;min-width:320px;min-height:100vh;margin:0;padding:2rem 1rem;display:flex}#app{justify-content:center;width:100%;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#f9f9f9;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}:root{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#fafafa;--bg-hover:#f0f0f0;--bg-success:#f8fff9;--bg-info:#e3f2fd;--text-primary:#333;--text-secondary:#666;--text-tertiary:#999;--border-color:#ccc;--border-hover:#999;--border-success:#28a745;--border-info:#007bff;--border-input:#ddd;--border-input-focus:#007bff;--shadow:#0003;--shadow-light:#0000001a}@media (prefers-color-scheme:dark){:root{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#333;--bg-hover:#404040;--bg-success:#1a2e1a;--bg-info:#1a2533;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--text-tertiary:gray;--border-color:#555;--border-hover:#777;--border-success:#28a745;--border-info:#007bff;--border-input:#555;--border-input-focus:#007bff;--shadow:#0006;--shadow-light:#0003}body{background-color:var(--bg-primary);color:var(--text-primary)}}.app{background-color:var(--bg-primary);max-width:800px;color:var(--text-primary);min-height:100vh;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem}header h1{color:var(--text-primary);margin-bottom:.5rem}header p{color:var(--text-secondary);font-size:1.1rem}.upload-section{margin-bottom:2rem}.upload-area{border:3px dashed var(--border-color);text-align:center;cursor:pointer;background:var(--bg-tertiary);border-radius:12px;padding:3rem;transition:all .3s}.upload-area:hover{border-color:var(--border-hover);background:var(--bg-hover)}.upload-area.drag-over{border-color:var(--border-info);background:var(--bg-info)}.upload-area.has-file{border-color:var(--border-success);background:var(--bg-success)}.upload-prompt p{color:var(--text-secondary);margin:.5rem 0}.file-types{color:var(--text-tertiary);font-size:.9rem}.file-info p{color:var(--text-primary);margin:.5rem 0}.file-size{color:var(--text-secondary);font-size:.9rem}.preview-section{background:var(--bg-secondary);text-align:center;border-radius:12px;flex-direction:column;align-items:center;margin-bottom:2rem;padding:2rem;display:flex}.preview-section h3{color:var(--text-primary);margin-bottom:1.5rem}.controls-section{background:var(--bg-secondary);border-radius:12px;margin-bottom:2rem;padding:2rem}.control-group{margin-bottom:1.5rem}.control-group:last-child{margin-bottom:0}.control-group label{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;display:block}.color-options{gap:1rem;margin-top:.5rem;display:flex}.color-option{cursor:pointer;color:#fff;text-shadow:1px 1px 2px #0000004d;border:2px solid #0000;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .2s}.color-option:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.color-option.selected{border-color:var(--text-primary);box-shadow:0 4px 12px var(--shadow);transform:translateY(-2px)}.traveller-option{background:linear-gradient(90deg,#047ab7 50%,#8b1011 50%) 50%/110%;position:relative}#border-size{border:2px solid var(--border-input);background:var(--bg-primary);width:80px;color:var(--text-primary);border-radius:6px;padding:.5rem;font-size:1rem}#border-size:focus{border-color:var(--border-input-focus);outline:none}.process-btn{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:8px;width:100%;margin-top:1rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .2s}.process-btn:hover:not(:disabled){background:#0056b3;transform:translateY(-2px)}.process-btn:disabled{background:var(--text-tertiary);cursor:not-allowed;transform:none}.result-section{background:var(--bg-secondary);text-align:center;border-radius:12px;flex-direction:column;align-items:center;padding:2rem;display:flex}.result-section h3{color:var(--text-primary);margin-bottom:1.5rem}.image-preview{background:var(--bg-primary);border:2px solid var(--border-input);border-radius:8px;margin-bottom:1.5rem;padding:1rem}.image-preview img{background:repeating-conic-gradient(#e8e8e8 0% 25%,#fff 25% 50%,#e8e8e8 50% 75%,#fff 75% 100%) 0 0/20px 20px;border-radius:4px;max-width:300px;max-height:300px}.download-btn{color:#fff;cursor:pointer;background:#28a745;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.download-btn:hover{background:#1e7e34;transform:translateY(-2px)}.clear-btn{color:#fff;cursor:pointer;background:#dc3545;border:none;border-radius:6px;margin-top:1rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.clear-btn:hover{background:#c82333;transform:translateY(-1px)}