:root{--primary-color:#4361ee;--primary-hover:#3a56d4;--secondary-color:#3f37c9;--success-color:var(--accent);--text-color:#ffffffe6;--text-shadow:none;--light-gray:#ffffff1a;--medium-gray:#ffffff26;--dark-gray:#ffffffb3;--white:#fff3;--glass-bg:#ffffff1a;--shadow:0 8px 32px #0003;--border-radius:var(--radius-md)}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-color);min-height:100vh;text-shadow:none;background:linear-gradient(135deg,#60d9c3 0%,#8d98ff 100%);flex-direction:column;line-height:1.6;display:flex}.glass{background:var(--surface);box-shadow:var(--shadow), inset 0 1px 0 #ffffff1a,  inset 0 -1px 0 #0000000d;border:1px solid #ffffff2e}.logo{color:var(--text-color);font-size:1.5rem;font-weight:700;text-decoration:none}.nav-links{gap:1.5rem;display:flex}.nav-links a{color:var(--text-color);font-weight:500;text-decoration:none;transition:color .3s,transform .3s}.nav-links a:hover{color:#fff;transform:translateY(-1px)}main{flex:1;width:100%;max-width:1200px;margin:2rem auto;padding:0 20px}.hero{text-align:center;margin-bottom:2rem}.hero h1{color:var(--text-color);text-shadow:none;margin-bottom:1rem;font-size:2.5rem}.hero p{color:var(--dark-gray);max-width:700px;text-shadow:none;margin:0 auto 1.5rem;font-size:1.1rem}.container{background:var(--white);border-radius:var(--border-radius);box-shadow:var(--shadow), inset 0 1px 1px #ffffff1a, inset 0 -1px 1px #0000000d;border:1px solid #fff3;margin-bottom:2rem;padding:2rem;transition:all .3s}.container:hover{box-shadow:none}.upload-area{border:2px dashed var(--medium-gray);border-radius:var(--border-radius);text-align:center;cursor:pointer;background:#ffffff14;margin-bottom:2rem;padding:3rem 2rem;transition:all .3s;position:relative}.upload-area:hover{background:#ffffff1f;border-color:#fff6;transform:translateY(-2px)}.upload-area.active{border-color:var(--primary-color);background:#4361ee26}.upload-icon{color:#ffffffe6;filter:drop-shadow(0 2px 4px #0000004d);margin-bottom:1rem;font-size:3rem}.upload-text{color:var(--text-color);text-shadow:none;margin-bottom:.5rem;font-size:1.2rem}.upload-hint{color:var(--dark-gray);text-shadow:none;font-size:.9rem}.controls{flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;display:flex}.control-group{flex:1;min-width:250px}.control-label{color:var(--text-color);text-shadow:none;margin-bottom:.5rem;font-weight:500;display:block}.slider-container{align-items:center;gap:1rem;display:flex}input[type=range]{-webkit-appearance:none;background:var(--medium-gray);border-radius:var(--radius-md);background:#ffffff26;outline:none;flex:1;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface-strong);cursor:pointer;border:2px solid #ffffff4d;border-radius:50%;width:24px;height:24px;transition:all .2s;box-shadow:0 4px 12px #0000004d,inset 0 1px 1px #fffc}input[type=range]::-webkit-slider-thumb:hover{background:#fff;transform:scale(1.15)}.value-display{text-align:center;min-width:40px;color:var(--text-color);text-shadow:none;font-weight:600}.preview-container{justify-content:center;min-height:200px;margin:2rem 0;display:flex;position:relative}#imagePreview{border-radius:var(--border-radius);max-width:100%;max-height:500px;box-shadow:var(--shadow);border:1px solid #fff3;display:none}#gridOverlay{pointer-events:none;display:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.result-container{background:var(--light-gray);border-radius:var(--border-radius);border:1px solid #ffffff26;margin-top:2rem;padding:1.5rem;position:relative}#emojiResult{white-space:pre;border-radius:calc(var(--border-radius) - var(--radius-sm));max-height:500px;color:var(--text-color);text-shadow:none;background:#ffffff14;border:1px solid #ffffff1a;padding:1rem;font-family:Courier New,monospace;line-height:1;overflow:auto}.button-group{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.btn{border-radius:var(--radius-sm);cursor:pointer;text-shadow:none;color:var(--text-color);background:#ffffff26;border:1px solid #fff3;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .3s;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn-primary{color:#fff;background:linear-gradient(135deg,#4361eee6,#3f37c9e6);border:1px solid #ffffff4d}.btn-primary:hover{box-shadow:none;background:linear-gradient(135deg,#4361ee,#3f37c9);transform:translateY(-3px)scale(1.02)}.btn-secondary{color:var(--text-color);background:#ffffff26}.btn-secondary:hover{box-shadow:none;background:#ffffff40;transform:translateY(-3px)scale(1.02)}.btn-success{color:#fff;background:linear-gradient(135deg,#4cc9f0e6,#40b4dce6);border:1px solid #ffffff4d}.btn-success:hover{box-shadow:none;background:linear-gradient(135deg,#4cc9f0,#40b4dc);transform:translateY(-3px)scale(1.02)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.copy-btn{padding:.5rem 1rem;font-size:.9rem;position:absolute;top:1rem;right:1rem}.emoji-palette{border-radius:var(--border-radius);background:#ffffff14;border:1px solid #ffffff26;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:1.5rem 0;padding:1rem;display:flex}.emoji-palette span{filter:drop-shadow(0 2px 4px #0000004d);font-size:1.5rem;line-height:1;transition:transform .3s}.emoji-palette span:hover{transform:scale(1.2)}.emoji-palette-title{text-align:center;width:100%;color:var(--dark-gray);text-shadow:none;margin-bottom:.5rem;font-weight:500}footer{text-align:center;box-shadow:none;background:#ffffff1a;border-top:1px solid #ffffff26;margin-top:auto;padding:1.5rem 0}.footer-container{max-width:1200px;margin:0 auto;padding:0 20px}.footer-links{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:1rem;display:flex}.footer-links a{color:var(--dark-gray);text-shadow:none;text-decoration:none;transition:color .3s,transform .3s}.footer-links a:hover{color:#fff;transform:translateY(-2px)}.copyright{color:var(--dark-gray);text-shadow:none;font-size:.9rem}.file-input{display:none}.drag-drop-hint{border-radius:var(--border-radius);opacity:0;pointer-events:none;z-index:10;background:#4361ee40;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.drag-drop-hint.active{opacity:1}.drag-drop-text{color:#fff;border-radius:var(--border-radius);text-shadow:none;background:#4361eee6;border:1px solid #fff3;padding:1rem 2rem;font-weight:500}@media (width<=768px){.hero h1{font-size:2rem}.controls{flex-direction:column;gap:1rem}.control-group{width:100%}.button-group{flex-direction:column}.btn{width:100%}.container{border-radius:var(--radius-md);padding:1.5rem}}