.image-uploader{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 12px #0000001a}.upload-area{border:3px dashed #ddd;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}@media (max-width: 768px){.image-uploader{padding:16px}.upload-area{padding:20px;border-width:2px}}@media (max-width: 480px){.image-uploader{padding:14px}.upload-area{padding:16px}}.upload-area:hover{border-color:#667eea;background:#667eea0d}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#666}.upload-icon{width:48px;height:48px;color:#667eea}.upload-placeholder p{font-size:1.1rem;font-weight:500;color:#333;margin:0}.upload-placeholder span{font-size:.9rem;color:#999}@media (max-width: 768px){.upload-icon{width:48px;height:48px}.upload-placeholder p{font-size:1rem}.upload-placeholder span{font-size:.85rem}}@media (max-width: 480px){.upload-placeholder{gap:8px}.upload-icon{width:40px;height:40px}.upload-placeholder p{font-size:.95rem}.upload-placeholder span{font-size:.8rem}}.preview-container{position:relative}.preview-image{max-width:100%;max-height:200px;border-radius:8px;display:block;margin:0 auto}.change-overlay{position:absolute;inset:0;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;border-radius:8px;font-weight:500}.preview-container:hover .change-overlay{opacity:1}.image-cropper{background:transparent;border-radius:12px;padding:0}.cropper-header{text-align:center;margin-bottom:20px}.cropper-header h3{color:#333;font-size:1.3rem;margin-bottom:8px}.cropper-header p{color:#666;font-size:.9rem;margin:0}.cropper-canvas-container{width:100%;display:flex;justify-content:center;margin-bottom:20px;background:#f8f9fa;border-radius:8px;padding:20px;position:relative;overflow:hidden}.cropper-canvas{border:2px solid #667eea;border-radius:8px;box-shadow:0 4px 12px #0000001a;user-select:none;-webkit-user-select:none;touch-action:none}.cropper-controls{display:flex;flex-direction:column;gap:15px;margin-bottom:15px}.control-row{display:flex;flex-direction:column;gap:8px}.control-row label{font-weight:500;color:#333;font-size:.9rem}.zoom-slider{width:100%;height:6px;border-radius:5px;background:#ddd;outline:none;-webkit-appearance:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 4px #0003}.zoom-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.cropper-buttons{display:flex;gap:10px}.btn-reset,.btn-apply{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-reset{background:#e0e0e0;color:#333}.btn-reset:hover{background:#d0d0d0;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.btn-apply{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-apply:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.cropper-info{background:#f8f9fa;border-radius:8px;padding:12px 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.info-item{display:flex;flex-direction:column;gap:4px}.info-label{font-size:.8rem;color:#666;font-weight:500}.info-value{font-size:.9rem;color:#333;font-weight:600}@media (max-width: 768px){.cropper-canvas-container{padding:10px}.cropper-canvas{max-width:100%;height:auto}.cropper-info{flex-direction:column}}.parameter-controls{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 12px #0000001a}.parameter-controls h3{margin-bottom:16px;color:#333;font-size:1.2rem}.control-group{margin-bottom:14px}@media (max-width: 768px){.parameter-controls{padding:16px}.parameter-controls h3{font-size:1.2rem;margin-bottom:16px}.control-group{margin-bottom:16px}}@media (max-width: 480px){.parameter-controls{padding:14px}.parameter-controls h3{font-size:1.1rem}.control-group{margin-bottom:14px}}.control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.control-header label{font-weight:500;color:#333;font-size:.95rem}.control-value{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2px 10px;border-radius:12px;font-size:.9rem;font-weight:600;min-width:45px;text-align:center}.control-slider{width:100%;height:6px;border-radius:5px;background:#ddd;outline:none;-webkit-appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 4px #0003}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.control-slider:disabled{opacity:.5;cursor:not-allowed}.control-description{font-size:.85rem;color:#666;margin-top:6px;font-style:italic;display:none}@media (min-width: 1400px){.control-description{display:block}}.info-box{background:#f0f4ff;border-left:4px solid #667eea;padding:10px;border-radius:6px;font-size:.85rem;color:#333;margin-top:14px}.info-box strong{color:#667eea}.advanced-section{margin-top:14px;border-top:1px solid #e0e0e0;padding-top:12px}.toggle-advanced{width:100%;padding:10px;background:#f8f9fa;border:1px solid #ddd;border-radius:6px;color:#333;font-weight:500;text-align:left;display:flex;align-items:center;gap:8px}.toggle-advanced:hover:not(:disabled){background:#e9ecef}.advanced-controls{margin-top:12px;padding:12px;background:#f8f9fa;border-radius:6px;display:flex;flex-direction:column;gap:12px}.checkbox-group{display:flex;flex-direction:column;gap:5px}.checkbox-group label{display:flex;align-items:center;gap:8px;font-weight:500;color:#333;cursor:pointer}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-group input[type=checkbox]:disabled{cursor:not-allowed}.checkbox-group .control-description{margin-left:26px}.step-controls{background:#f8f9fa;border-radius:12px;padding:16px;margin-top:16px;display:flex;flex-direction:column;gap:12px}@media (max-width: 768px){.step-controls{padding:14px;gap:10px}}@media (max-width: 480px){.step-controls{padding:12px;gap:10px}}.step-info{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:#495057}@media (max-width: 480px){.step-info{font-size:.85rem;gap:6px}}.step-header{display:flex;justify-content:space-between;align-items:center}.step-label{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.5px}.step-counter{font-family:Courier New,monospace;font-weight:600;color:#667eea}.pin-info{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#e9ecef;border-radius:6px;font-size:.85rem;justify-content:center}@media (max-width: 480px){.pin-info{font-size:.8rem;padding:6px 10px;gap:6px}}.pin-label{font-family:Courier New,monospace;font-weight:600;color:#495057}.pin-arrow{color:#667eea;font-weight:700;font-size:1rem}.step-buttons{display:flex;gap:8px;justify-content:center}.step-btn{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:10px 16px;font-size:1.2rem;cursor:pointer;transition:all .2s ease;color:#495057;min-width:48px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.step-btn{padding:8px 12px;font-size:1.1rem;min-width:44px}}@media (max-width: 480px){.step-btn{padding:8px 10px;font-size:1rem;min-width:40px}.step-btn-play{min-width:56px}}.step-btn:hover:not(:disabled){background:#667eea;border-color:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.step-btn:active:not(:disabled){transform:translateY(0)}.step-btn:disabled{opacity:.3;cursor:not-allowed}.step-btn-play{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;min-width:64px}.step-btn-play:hover:not(:disabled){background:linear-gradient(135deg,#5568d3,#65408b);transform:translateY(-2px)}.step-slider-container{margin-top:4px}.step-slider{width:100%;height:6px;border-radius:3px;background:#dee2e6;outline:none;-webkit-appearance:none;appearance:none}.step-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;transition:transform .2s ease}.step-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.step-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;transition:transform .2s ease}.step-slider::-moz-range-thumb:hover{transform:scale(1.2)}@media (prefers-color-scheme: dark){.step-controls{background:#2d3748}.step-info{color:#e2e8f0}.step-btn{background:#4a5568;border-color:#4a5568;color:#e2e8f0}.step-slider{background:#4a5568}}.string-art-canvas{display:flex;flex-direction:column;gap:20px}.canvas-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:8px}.canvas-header h3{color:#333;font-size:1.3rem;margin:0;flex:1 1 auto}.canvas-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}@media (max-width: 768px){.canvas-header{flex-direction:column;align-items:stretch}.canvas-header h3{font-size:1.2rem;text-align:center}.canvas-controls{width:100%;justify-content:center}}@media (max-width: 480px){.canvas-controls{flex-direction:column;gap:8px}.canvas-controls button{width:100%}}.toggle-btn,.download-btn,.edit-crop-btn{padding:10px 18px;border:2px solid;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toggle-btn{border-color:#667eea;background:#fff;color:#667eea}.toggle-btn:hover{background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.download-btn{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#4caf50;color:#fff}.download-btn:hover{background:linear-gradient(135deg,#45a049,#3d8b40);transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.edit-crop-btn{border-color:#ff9800;background:#fff;color:#ff9800}.edit-crop-btn:hover:not(:disabled){background:#ff9800;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ff98004d}.edit-crop-btn:disabled{opacity:.5;cursor:not-allowed}.toggle-btn:active,.download-btn:active,.edit-crop-btn:active:not(:disabled){transform:translateY(0)}.canvas-container{position:relative;background:#f5f5f5;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:600px}.canvas{max-width:100%;max-height:800px;display:block;box-shadow:0 4px 12px #0000001a;background:#fff}@media (max-width: 768px){.canvas-container{min-height:400px}.canvas{max-height:600px}}@media (max-width: 480px){.canvas-container{min-height:300px}.canvas{max-height:500px}}.processing-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#667eeaf7,#764ba2f7);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-content{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px;max-width:500px;text-align:center}.spinner-container{position:relative;width:80px;height:80px}.spinner{width:80px;height:80px;border:6px solid rgba(255,255,255,.3);border-top:6px solid white;border-radius:50%;animation:spin 1s linear infinite;position:relative;z-index:2}.spinner-glow{position:absolute;top:0;left:0;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4),transparent);animation:pulse 2s ease-in-out infinite;z-index:1}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.3);opacity:.8}}.loading-title{color:#fff;font-size:1.8rem;font-weight:700;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.2)}.progress-container{width:100%;max-width:400px}.progress-bar{width:100%;height:32px;background:#fff3;border-radius:16px;overflow:hidden;box-shadow:inset 0 2px 8px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:16px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #4caf5066;position:relative;overflow:hidden}.progress-fill:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.progress-text{color:#fff;font-weight:700;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.3);position:relative;z-index:1}.status-message{color:#fff;font-size:1.1rem;font-weight:600;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.2);animation:fadeInOut 2s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:1}50%{opacity:.7}}.processing-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stat-badge{background:#ffffff40;backdrop-filter:blur(10px);padding:8px 16px;border-radius:20px;display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.9rem;box-shadow:0 4px 12px #0000001a;border:1px solid rgba(255,255,255,.2)}.stat-icon{font-size:1.2rem}.loading-tip{color:#ffffffe6;font-size:.9rem;margin:0;padding:12px 20px;background:#00000026;border-radius:12px;border:1px solid rgba(255,255,255,.2);max-width:400px}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:1.1rem}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;padding:15px;background:#f8f9fa;border-radius:8px}.stat-item{display:flex;flex-direction:column;gap:5px;text-align:center}.stat-label{font-size:.85rem;color:#666;font-weight:500}.stat-value{font-size:1.3rem;color:#667eea;font-weight:700}@media (max-width: 768px){.stats{grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}.stat-label{font-size:.8rem}.stat-value{font-size:1.1rem}}@media (max-width: 480px){.stats{gap:10px;padding:10px}.stat-label{font-size:.75rem}.stat-value{font-size:1rem}}.json-importer{width:100%}.btn-import-json{width:100%;padding:10px 16px;background:#fff;border:2px dashed #667eea;border-radius:8px;color:#667eea;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.btn-import-json:hover{background:#667eea;color:#fff;border-style:solid;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.btn-import-json:active{transform:translateY(0)}.import-icon{flex-shrink:0}@media (prefers-color-scheme: dark){.btn-import-json{background:#2d3748;border-color:#667eea}.btn-import-json:hover{background:#667eea;color:#fff}}.toast{position:fixed;top:20px;right:20px;min-width:300px;max-width:500px;padding:16px 20px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #00000026;animation:slideIn .3s ease-out;z-index:1000;backdrop-filter:blur(10px)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.toast-success{background:linear-gradient(135deg,#4caf50,#8bc34a);color:#fff}.toast-error{background:linear-gradient(135deg,#f44336,#e91e63);color:#fff}.toast-info{background:linear-gradient(135deg,#2196f3,#03a9f4);color:#fff}.toast-icon{width:32px;height:32px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;flex-shrink:0}.toast-message{flex:1;font-weight:500;font-size:1rem}.toast-close{background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s;flex-shrink:0}.toast-close:hover{background:#fff3}.landing-hero{text-align:center;padding:60px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px;margin-bottom:40px;box-shadow:0 10px 40px #0003}.hero-content{max-width:800px;margin:0 auto}.hero-title{font-size:3rem;font-weight:800;margin-bottom:20px;line-height:1.2}.highlight{color:gold;text-shadow:0 2px 10px rgba(255,215,0,.5)}.hero-subtitle{font-size:1.3rem;margin-bottom:40px;opacity:.95;line-height:1.6}.hero-features{display:flex;justify-content:center;gap:30px;margin-bottom:40px;flex-wrap:wrap}.feature{display:flex;align-items:center;gap:10px;background:#fff3;padding:12px 24px;border-radius:30px;backdrop-filter:blur(10px)}.feature-icon{font-size:1.5rem}.hero-cta{background:#fff;color:#667eea;font-size:1.2rem;font-weight:700;padding:18px 48px;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #0003}.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 32px #0000004d}.hero-note{margin-top:20px;font-size:.9rem;opacity:.8}@media (max-width: 768px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1.1rem}.hero-features{flex-direction:column;align-items:center}}.app{max-width:1600px;margin:0 auto}.app-header{text-align:center;color:#fff;margin-bottom:30px}.app-header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.1rem;opacity:.9}.app-content{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}.left-panel{display:flex;flex-direction:column;gap:16px}.right-panel{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003;min-height:600px;position:relative}.cropper-panel{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions .btn-primary,.actions .btn-secondary{grid-column:1 / -1}@media (min-width: 768px){.actions{grid-template-columns:1fr}.actions .btn-primary,.actions .btn-secondary{grid-column:auto}}.btn-primary,.btn-secondary{padding:14px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:disabled{background:#ccc;cursor:not-allowed;transform:none}.btn-primary.processing{background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.btn-primary.processing:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:btnShimmer 1.5s infinite}@keyframes btnShimmer{0%{left:-100%}to{left:100%}}.btn-content{display:flex;align-items:center;gap:10px;justify-content:center;position:relative;z-index:1}.btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-secondary{background:#4caf50;color:#fff}@media (max-width: 1024px){.app-content{grid-template-columns:1fr;gap:20px}.left-panel{order:2}.right-panel{order:1;min-height:400px}}@media (max-width: 768px){.app-header h1{font-size:2rem}.app-header p{font-size:1rem}.app-content{gap:15px}.right-panel{padding:15px;min-height:300px}.btn-primary,.btn-secondary{padding:12px 20px;font-size:.95rem}}@media (max-width: 480px){.app-header h1{font-size:1.75rem}.right-panel{padding:12px}}.app-footer{text-align:center;padding:1.5rem 0;margin-top:3rem;font-size:.9rem;color:#d8d8d8;border-top:1px solid rgba(0,0,0,.1)}.app-footer.dark{color:#ccc;border-top-color:#ffffff1a}.footer-link{color:#74feff;text-decoration:none;font-weight:500}.footer-link:hover{text-decoration:underline}*{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,#667eea,#764ba2);min-height:100vh;padding:20px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer;transition:all .3s ease}button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}button:active{transform:translateY(0)}input[type=range]{cursor:pointer}