body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#aaa,#555);padding:20px}.app-header{text-align:center;color:#fff;margin-bottom:40px}.app-header h1{font-size:2.5rem;margin-bottom:10px}.app-header p{font-size:1.2rem;opacity:.9}.app-main{max-width:1200px;margin:0 auto 40px;background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d}.app-footer{max-width:1200px;margin:0 auto;background:#fffffff2;border-radius:20px;padding:30px 40px;box-shadow:0 10px 30px #0003}.footer-content{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}.footer-section{flex:1;min-width:250px}.footer-section h3{color:#374151;font-size:1.1rem;margin-bottom:15px;font-weight:600}.tech-stack{display:flex;flex-direction:column;gap:10px}.tech-category{display:flex;gap:10px;align-items:baseline}.tech-label{font-weight:600;color:#667eea;min-width:80px;font-size:.9rem}.tech-items{color:#6b7280;font-size:.9rem}.developer-info{display:flex;flex-direction:column;gap:8px}.developer-info p{color:#6b7280;font-size:.9rem;margin:0}.developer-info a{color:#667eea;text-decoration:none;transition:color .3s}.developer-info a:hover{color:#5568d3;text-decoration:underline}@media(max-width:768px){.footer-content{flex-direction:column;gap:30px}.tech-category{flex-direction:column;gap:5px}.tech-label{min-width:auto}}.step-indicator{display:flex;justify-content:center;gap:20px;margin-bottom:40px;flex-wrap:wrap}.step-item{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 20px;border-radius:25px;transition:all .3s}.step-number{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;transition:all .3s}.step-item.active .step-number{background:#667eea;color:#fff;transform:scale(1.1)}.step-item.completed .step-number{background:#10b981;color:#fff}.step-item.inactive .step-number{background:#e5e7eb;color:#6b7280}.step-label{font-weight:500;color:#374151}.step-item.active .step-label{color:#fff;font-weight:600}.step-item.inactive{cursor:default}.step-content{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-content h2{color:#374151;margin-bottom:10px;font-size:2rem}.step-description{color:#6b7280;margin-bottom:30px;font-size:1.1rem}.api-key-section{background:#f9fafb;padding:25px;border-radius:15px;margin-bottom:30px;border:2px solid #e5e7eb}.api-key-label{display:block;font-weight:600;color:#374151;margin-bottom:10px;font-size:1rem}.api-key-input-wrapper{display:flex;gap:10px;margin-bottom:8px}.api-key-input{flex:1;padding:12px 15px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;font-family:Courier New,monospace;transition:all .3s}.api-key-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-validate{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;background:#667eea;color:#fff;white-space:nowrap}.btn-validate:hover:not(:disabled){background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-validate:disabled{opacity:.5;cursor:not-allowed}.api-key-validation-message{font-size:.875rem;margin:8px 0;padding:8px 12px;border-radius:6px;font-weight:500}.api-key-validation-message.valid{color:#10b981;background:#d1fae5;border-left:3px solid #10b981}.api-key-validation-message.invalid{color:#dc2626;background:#fee2e2;border-left:3px solid #dc2626}.api-key-hint{font-size:.875rem;color:#6b7280;margin:0;font-style:italic}.upload-area{border:3px dashed #d1d5db;border-radius:15px;padding:60px 20px;text-align:center;cursor:pointer;transition:all .3s;background:#f9fafb}.upload-area:hover{border-color:#667eea;background:#f3f4f6}.upload-area.dragover{border-color:#667eea;background:#eef2ff}.upload-icon{font-size:4rem;margin-bottom:20px}.upload-hint{color:#6b7280;font-size:.9rem;margin-top:10px}.file-input{display:none}.btn{padding:12px 30px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover{background:#4b5563}.btn:disabled{opacity:.5;cursor:not-allowed}.controls{display:flex;gap:20px;margin-top:30px;justify-content:space-between}.config-panel{background:#f9fafb;padding:30px;border-radius:15px;margin-bottom:30px}.config-item{margin-bottom:25px}.config-item label{display:block;margin-bottom:10px;font-weight:600;color:#374151}.config-item input[type=range]{width:100%;margin-bottom:10px}.config-item input[type=number]{width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem}.config-value{font-size:1.1rem;color:#667eea;font-weight:600}.chunks-preview{max-height:400px;overflow-y:auto;background:#f9fafb;padding:20px;border-radius:15px;margin-top:20px}.chunk-item{background:#fff;padding:15px;margin-bottom:15px;border-radius:10px;border-left:4px solid #667eea;box-shadow:0 2px 4px #0000001a}.chunk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.chunk-index{font-weight:600;color:#667eea}.chunk-size{font-size:.9rem;color:#6b7280}.chunk-text{color:#374151;line-height:1.6}.log-area{background:#1f2937;color:#10b981;padding:20px;border-radius:10px;font-family:Courier New,monospace;font-size:.9rem;max-height:300px;overflow-y:auto;margin-top:20px}.query-section{margin-bottom:30px}.query-input{width:100%;padding:15px;border:2px solid #e5e7eb;border-radius:10px;font-size:1rem;margin-bottom:15px;resize:vertical}.query-input:focus{outline:none;border-color:#667eea}.result-section{margin-top:30px}.result-box{background:#f9fafb;padding:20px;border-radius:10px;margin-bottom:20px}.result-title{font-weight:600;color:#374151;margin-bottom:10px;font-size:1.2rem}.result-content{color:#4b5563;line-height:1.6}.embedding-example-box{background:#f9fafb;padding:20px;border-radius:10px;margin-bottom:20px;border:2px solid #e5e7eb}.embedding-example-content{display:flex;flex-direction:column;gap:20px}.embedding-example-item{display:flex;flex-direction:column;gap:8px}.embedding-example-label{font-weight:600;color:#667eea;font-size:.95rem}.embedding-example-text{background:#fff;padding:15px;border-radius:8px;border:1px solid #e5e7eb;color:#374151;line-height:1.6;font-size:.9rem;white-space:pre-wrap;word-wrap:break-word}.embedding-example-embedding{background:#1f2937;color:#10b981;padding:15px;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto;word-wrap:break-word;max-height:300px;overflow-y:auto}.loading{text-align:center;padding:40px;color:#6b7280}.spinner{border:4px solid #f3f4f6;border-top:4px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.file-info{background:#eef2ff;padding:15px;border-radius:10px;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.file-name{font-weight:600;color:#374151}.file-size{color:#6b7280;font-size:.9rem}.text-preview{color:#667eea;font-weight:600}.error-message{background:#fee2e2;color:#dc2626;padding:15px;border-radius:10px;margin-top:20px;border-left:4px solid #dc2626}.keywords-section{margin-bottom:30px;padding:20px;background:#f9fafb;border-radius:10px;border:2px solid #e5e7eb}.keywords-label{font-weight:600;color:#374151;margin-bottom:12px;font-size:1rem}.keywords-list{display:flex;flex-wrap:wrap;gap:10px}.keyword-tag{padding:8px 16px;background:#667eea;color:#fff;border:none;border-radius:20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s}.keyword-tag:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.keyword-tag:active{transform:translateY(0)}