: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;margin:0;padding:0}body{margin:0;padding:0;min-width:320px;min-height:100vh;background:#0a0015;overflow-x:hidden}#root{width:100%;min-height:100vh}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app{min-height:100vh;background:linear-gradient(135deg,#0a0015,#1a0030,#2d1b69,#1a0030,#0a0015);position:relative;overflow-x:hidden;color:#fff;font-family:Arial,sans-serif}.background-stars{position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 40px 70px,#fff,transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent),radial-gradient(1px 1px at 130px 80px,#fff,transparent),radial-gradient(2px 2px at 160px 30px,#fff,transparent),radial-gradient(1px 1px at 200px 90px,#fff,transparent),radial-gradient(2px 2px at 240px 50px,#fff,transparent);background-repeat:repeat;background-size:300px 300px;animation:twinkle 8s ease-in-out infinite alternate;z-index:1}.laser-bg{position:fixed;inset:0;background:linear-gradient(45deg,transparent 40%,rgba(138,43,226,.1) 42%,rgba(138,43,226,.2) 43%,transparent 45%),linear-gradient(-45deg,transparent 40%,rgba(147,0,211,.1) 42%,rgba(147,0,211,.2) 43%,transparent 45%),linear-gradient(90deg,transparent 48%,rgba(138,43,226,.05) 49%,rgba(138,43,226,.1) 50%,rgba(138,43,226,.05) 51%,transparent 52%);animation:laser-pulse 4s ease-in-out infinite;z-index:2}@keyframes twinkle{0%,to{opacity:.8}50%{opacity:1}}@keyframes laser-pulse{0%,to{opacity:.3}50%{opacity:.6}}.header{text-align:center;padding:2rem 0;position:relative;z-index:10}.title{font-size:4rem;font-weight:700;background:linear-gradient(45deg,#8a2be2,#9370db,orchid,#ff69b4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;text-shadow:0 0 20px rgba(138,43,226,.5);animation:glow-pulse 2s ease-in-out infinite alternate}.subtitle{font-size:1.2rem;color:orchid;margin:.5rem 0 0;text-shadow:0 0 10px rgba(218,112,214,.3)}.header-links{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:1rem;flex-wrap:wrap}.ca-link{display:inline-block;padding:.8rem 1.5rem;font-size:.95rem;color:orchid;background:#8a2be226;border:2px solid rgba(138,43,226,.4);border-radius:12px;text-decoration:none;transition:all .3s ease;backdrop-filter:blur(5px);font-family:monospace;letter-spacing:.5px;box-shadow:0 0 15px #8a2be233}.ca-link:hover{background:#8a2be24d;border-color:#8a2be2b3;color:#fff;transform:translateY(-2px);box-shadow:0 5px 20px #8a2be266;text-shadow:0 0 10px rgba(218,112,214,.5)}.x-logo-link{display:inline-flex;align-items:center;justify-content:center;padding:.6rem;background:#8a2be226;border:2px solid rgba(138,43,226,.4);border-radius:12px;transition:all .3s ease;backdrop-filter:blur(5px);box-shadow:0 0 15px #8a2be233}.x-logo-link:hover{background:#8a2be24d;border-color:#8a2be2b3;transform:translateY(-2px);box-shadow:0 5px 20px #8a2be266}.x-logo{width:36px;height:36px;object-fit:contain;transition:all .3s ease}.x-logo-link:hover .x-logo{transform:scale(1.1);filter:drop-shadow(0 0 8px rgba(138,43,226,.8))}@keyframes glow-pulse{0%{text-shadow:0 0 20px rgba(138,43,226,.5)}to{text-shadow:0 0 30px rgba(138,43,226,.8),0 0 40px rgba(138,43,226,.4)}}.main-content{max-width:1200px;margin:0 auto;padding:2rem;position:relative;z-index:10}.upload-section{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;max-width:1000px;margin-left:auto;margin-right:auto;margin-bottom:3rem}.upload-area{text-align:center}.upload-input{display:none}.upload-label{display:inline-block;padding:1.2rem 2.5rem;background:linear-gradient(45deg,#8a2be2,#9370db);color:#fff;border-radius:15px;cursor:pointer;font-size:1.2rem;font-weight:700;border:2px solid rgba(138,43,226,.5);transition:all .3s ease;box-shadow:0 6px 20px #8a2be266,0 0 15px #8a2be233;text-transform:uppercase;letter-spacing:1px}.upload-label:hover{background:linear-gradient(45deg,#9370db,orchid);transform:translateY(-3px);box-shadow:0 10px 30px #8a2be299,0 0 25px #8a2be266;border-color:#8a2be2cc}.eye-selector{flex:1;min-width:300px}.eye-selector h3{color:orchid;margin-bottom:1rem;text-align:center}.eye-options{display:flex;gap:1rem;width:100%;max-width:420px;margin:0 auto;justify-content:space-evenly;flex-wrap:wrap}.eye-option{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem;background:#8a2be21f;border:2px solid rgba(138,43,226,.4);border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:120px;flex:1 1 120px;max-width:160px;backdrop-filter:blur(5px)}.eye-option:hover{background:#8a2be240;border-color:#8a2be2b3;transform:translateY(-3px);box-shadow:0 8px 20px #8a2be24d}.eye-option.selected{background:#8a2be266;border-color:#8a2be2;box-shadow:0 0 25px #8a2be2b3,inset 0 0 15px #8a2be233;transform:translateY(-2px)}.eye-option img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(138,43,226,.6))}.eye-option span{font-size:.85rem;color:orchid;text-align:center}.editor-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:flex-start;max-width:1400px;margin:0 auto}.canvas-column{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.canvas-controls{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:600px;align-items:center}.canvas-container{position:relative;background:transparent;border-radius:20px;overflow:hidden;border:3px solid rgba(138,43,226,.6);box-shadow:0 0 30px #8a2be266,inset 0 0 20px #8a2be21a;user-select:none;backdrop-filter:blur(10px);width:100%;max-width:600px;touch-action:none}.base-image{width:100%;height:auto;display:block;object-fit:cover;border-radius:16px}.change-image-btn{display:inline-block;padding:1rem 2rem;background:linear-gradient(45deg,#8a2be2,#9370db);color:#fff;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:700;border:2px solid rgba(138,43,226,.5);transition:all .3s ease;box-shadow:0 4px 15px #8a2be266,0 0 12px #8a2be233;text-transform:uppercase;letter-spacing:1px}.change-image-btn:hover{background:linear-gradient(45deg,#9370db,orchid);transform:translateY(-2px);box-shadow:0 6px 20px #8a2be299,0 0 20px #8a2be266;border-color:#8a2be2cc}.controls-column{display:flex;flex-direction:column;gap:2rem;align-items:flex-start}.eyes-overlay{position:absolute;cursor:grab;pointer-events:all;transition:none;touch-action:none;user-select:none}.eyes-overlay:before{content:"";position:absolute;inset:-6px;border:2px dashed rgba(138,43,226,.6);border-radius:10px;background:#8a2be214;pointer-events:none;transition:border-color .2s ease,background .2s ease}.eyes-overlay:hover:before{border-color:#8a2be2e6;background:#8a2be21f}.eyes-overlay.dragging{cursor:grabbing}.eyes-overlay.dragging:before{border-color:orchid;background:#8a2be229}.laser-eyes{max-width:250px;max-height:250px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(138,43,226,.8))}.canvas-container.exporting{border-color:transparent;box-shadow:none;backdrop-filter:none}.canvas-container.exporting .eyes-overlay:before{opacity:0}.laser-eyes[src="/laserForward.png"],.laser-eyes[src="/laserSide.png"]{max-width:400px;max-height:400px}.controls{display:flex;flex-direction:column;gap:1.5rem;min-width:250px;background:#8a2be226;padding:1.5rem;border-radius:16px;border:2px solid rgba(138,43,226,.5);box-shadow:0 0 25px #8a2be24d,inset 0 0 15px #8a2be21a;backdrop-filter:blur(10px);width:100%}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{color:orchid;font-weight:700}.control-group input[type=range]{width:100%;height:8px;background:#8a2be24d;border-radius:4px;outline:none;-webkit-appearance:none;appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(45deg,#8a2be2,orchid);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #8a2be280}.control-group input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(45deg,#8a2be2,orchid);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px #8a2be280}.control-group span{color:#fff;font-weight:700;text-align:center}.download-btn{padding:1.2rem 2.5rem;background:linear-gradient(45deg,#8a2be2,#9370db);color:#fff;border:2px solid rgba(138,43,226,.5);border-radius:15px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #8a2be266,0 0 15px #8a2be233;text-transform:uppercase;letter-spacing:1px}.download-btn:hover{background:linear-gradient(45deg,#9370db,orchid);transform:translateY(-3px);box-shadow:0 10px 30px #8a2be299,0 0 25px #8a2be266;border-color:#8a2be2cc}@media(max-width:1024px){.upload-section{grid-template-columns:1fr;gap:2rem;text-align:center}.editor-section{grid-template-columns:1fr;gap:2rem}.canvas-column{order:1}.controls-column{order:2}.controls{min-width:auto;width:100%;max-width:500px;margin:0 auto}}@media(max-width:768px){.title{font-size:2.5rem}.subtitle{font-size:1rem}.header-links{gap:1rem}.ca-link{font-size:.75rem;padding:.6rem 1rem}.x-logo{width:28px;height:28px}.main-content{padding:1rem}.editor-section{max-width:100%;padding:0 .5rem}.canvas-container{max-width:100%}.base-image{max-width:100%;height:auto}.change-image-btn{padding:.8rem 1.5rem;font-size:.9rem}.eye-selector h3{font-size:1.2rem;margin-bottom:1rem}.eye-options{justify-content:space-evenly;gap:.8rem}.eye-option{min-width:90px;padding:.8rem;flex:1 1 90px;max-width:140px}.eye-option img{width:40px;height:40px}.eye-option span{font-size:.75rem}.controls{padding:1.2rem}.upload-label,.download-btn{padding:1rem 2rem;font-size:1rem}}@media(max-width:480px){.title{font-size:1.8rem}.subtitle{font-size:.9rem}.ca-link{font-size:.65rem;padding:.5rem .8rem;max-width:90%;word-break:break-all}.x-logo{width:24px;height:24px}.main-content{padding:.5rem}.canvas-container{max-width:100%}.base-image{max-width:100%;height:auto}.eye-options{gap:.5rem;justify-content:space-evenly}.eye-option{min-width:80px;padding:.6rem;flex:1 1 80px;max-width:120px}.eye-option img{width:35px;height:35px}.eye-option span{font-size:.7rem}.controls{padding:1rem}.download-btn{padding:.8rem 1.5rem;font-size:.9rem}}