:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;font-family:inherit}#root{min-height:100vh;display:flex;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem 2rem;box-shadow:0 2px 20px #0000001a;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.header h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#2c3e50,#34495e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.1);margin:0}.twitter-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#2c3e501a;color:#2c3e50;text-decoration:none;transition:all .3s ease;border:2px solid transparent}.twitter-link:hover{background:#2c3e5033;color:#34495e;transform:translateY(-2px);border-color:#2c3e50}.twitter-icon{width:24px;height:24px}.mirror-btn{width:100%;padding:.8rem 1rem;border:2px solid #2c3e50;border-radius:10px;background:transparent;color:#2c3e50;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.mirror-btn:hover{background:#2c3e501a;transform:translateY(-1px)}.mirror-btn.active{background:#2c3e50;color:#fff;box-shadow:0 4px 15px #2c3e5066}.mirror-btn.active:hover{background:#34495e;transform:translateY(-1px);box-shadow:0 6px 20px #2c3e5099}.main-content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.upload-section{background:#fffffff2;border-radius:20px;padding:2rem;box-shadow:0 10px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-area{border:3px dashed #2c3e50;border-radius:15px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#2c3e500d}.upload-area:hover{border-color:#34495e;background:#34495e1a;transform:translateY(-2px)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{font-size:4rem;margin-bottom:1rem}.upload-area p{font-size:1.2rem;color:#555;margin:0}.upload-hint{font-size:.9rem;color:#888;font-style:italic}.image-editor{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}.image-container{position:relative;display:flex;justify-content:center;align-items:center;background:#f8f9fa;border-radius:15px;padding:1rem;min-height:400px;overflow:hidden}.uploaded-image{max-width:100%;max-height:500px;border-radius:10px;box-shadow:0 5px 20px #0000001a}.hat-overlay{position:absolute;top:50%;left:50%;transform-origin:center;pointer-events:none;z-index:10}.capture-area{position:relative;display:inline-block;border:none;background:none;padding:0;margin:0}.controls{background:#f8f9fa;border-radius:15px;padding:1.5rem;box-shadow:0 5px 20px #0000001a}.controls h3{margin-bottom:1.5rem;color:#333;font-size:1.3rem;text-align:center}.control-group{margin-bottom:1.5rem}.control-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#555;font-size:.9rem}.slider{width:100%;height:8px;border-radius:5px;background:#ddd;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#2c3e50,#34495e);cursor:pointer;box-shadow:0 2px 10px #0003}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:none;background:linear-gradient(135deg,#2c3e50,#34495e);cursor:pointer;box-shadow:0 2px 10px #0003}.button-group{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.btn{padding:.8rem 1.5rem;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.btn-primary{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;box-shadow:0 4px 15px #2c3e5066}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2c3e5099}.btn-secondary{background:#6c757d;color:#fff;box-shadow:0 4px 15px #6c757d66}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c757d99}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem}.header h1{font-size:2rem}.main-content{padding:1rem}.upload-section{padding:1.5rem}.image-editor{grid-template-columns:1fr;gap:1.5rem}.controls{order:1}.upload-area{padding:2rem 1rem}.upload-icon{font-size:3rem}.upload-area p{font-size:1rem}}@media (max-width: 480px){.header{padding:1rem}.header h1{font-size:1.5rem}.main-content{padding:.5rem}.upload-section{padding:1rem}.upload-area{padding:1.5rem .5rem}.controls{padding:1rem}.btn{padding:.7rem 1rem;font-size:.9rem}}