*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#fff;line-height:1.6;min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#1db954,#1ed760);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{color:#b3b3b3;font-size:1.1rem}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}@media (max-width: 768px){.main-content{grid-template-columns:1fr}.container{padding:1rem}.header h1{font-size:2rem}}.left-panel{background:#1a1a1a;border-radius:12px;padding:2rem;border:1px solid #333}.right-panel{background:#1a1a1a;border-radius:12px;padding:2rem;border:1px solid #333;text-align:center}.input-group{margin-bottom:1.5rem}.input-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#fff}.input-group input{width:100%;padding:.75rem;border:1px solid #333;border-radius:8px;background:#0a0a0a;color:#fff;font-size:1rem;transition:border-color .3s ease}.input-group input:focus{outline:none;border-color:#1db954;box-shadow:0 0 0 2px #1db95433}.btn{background:#1db954;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;width:100%;margin-bottom:1rem}.btn:hover{background:#1ed760;transform:translateY(-2px);box-shadow:0 4px 12px #1db9544d}.btn:disabled{background:#333;cursor:not-allowed;transform:none;box-shadow:none}.loading{display:none;text-align:center;margin:1rem 0}.loading.show{display:block}.spinner{border:2px solid #333;border-top:2px solid #1db954;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.how-it-works{margin-top:2rem;padding-top:2rem}@media (prefers-reduced-motion: reduce){.how-it-works *{animation:none!important;transition:none!important}}.how-it-works h3{margin-bottom:1rem;color:#1db954;font-size:1.2rem}.how-it-works ol{padding-left:1.5rem;color:#b3b3b3}.how-it-works li{margin-bottom:.5rem}.prompt-section{margin-top:2rem}.prompt-section h3{margin-bottom:1rem;color:#1db954;font-size:1.2rem}.prompt-textarea{width:100%;min-height:200px;padding:1rem;border:1px solid #333;border-radius:8px;background:#0a0a0a;color:#fff;font-family:Monaco,Menlo,monospace;font-size:.9rem;line-height:1.4;resize:vertical}#canvas{max-width:100%;height:auto;border:1px solid #333;border-radius:12px;background:#000;margin-bottom:1rem}.metadata{margin:1.5rem 0;text-align:left}.metadata h3{color:#1db954;margin-bottom:.5rem}.metadata p{color:#b3b3b3;margin-bottom:.25rem}.download-btn{margin-top:1rem}.auth-section{margin-bottom:2rem;padding:1rem;background:#1db9541a;border:1px solid #1db954;border-radius:8px}.auth-section.authenticated{background:#1db95433}.auth-status{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.status-indicator{width:8px;height:8px;border-radius:50%;background:#f44}.status-indicator.connected{background:#1db954}.error{background:#ff44441a;border:1px solid #ff4444;color:#f44;padding:1rem;border-radius:8px;margin:1rem 0;display:none}.customize{margin-top:2rem}.customize h3{margin-bottom:1rem;color:#1db954;font-size:1.2rem}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 640px){.grid-2{grid-template-columns:1fr}}.input-group select,.input-group input[type=color],.input-group input[type=range]{width:100%;padding:.6rem;border:1px solid #333;border-radius:8px;background:#0a0a0a;color:#fff}.input-group input[type=range]{padding:.4rem}.error.show{display:block}.help-text{display:block;margin-top:.35rem;color:#8a8a8a;font-size:.9rem}.btn-secondary{background:#2c2c2c;color:#fff;border:1px solid #3a3a3a;margin-top:.5rem}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.input-group input.is-valid{border-color:#1db954}.input-group input.is-invalid{border-color:#f44;box-shadow:0 0 0 2px #ff444426}