*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{display:flex;flex-direction:column;min-height:100vh}.App-header{color:#fff;padding:3rem 2rem;text-align:center}.App-header h1{font-size:3rem;font-weight:700;margin-bottom:.5rem;text-shadow:2px 2px 4px #0003}.subtitle{font-size:1.2rem;font-weight:300;opacity:.95}.App-main{align-items:flex-start;display:flex;flex:1 1;justify-content:center;padding:2rem}.App-footer{color:#fff;font-size:.9rem;opacity:.8;padding:2rem;text-align:center}@media (max-width:768px){.App-header h1{font-size:2rem}.subtitle{font-size:1rem}.App-main{padding:1rem}}.generator-container{max-width:800px;width:100%}.architecture-toggle-btn{align-items:center;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);border:2px solid #818cf8;border-radius:12px;box-shadow:0 4px 12px #818cf833;color:#4338ca;cursor:pointer;display:flex;font-size:1.1rem;font-weight:600;gap:.5rem;justify-content:center;margin-bottom:2rem;padding:1rem 2rem;transition:all .3s ease;width:100%}.architecture-toggle-btn:hover{background:linear-gradient(135deg,#c7d2fe,#a5b4fc);box-shadow:0 6px 16px #818cf84d;transform:translateY(-2px)}.architecture-toggle-btn:active{transform:translateY(0)}.generator-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;padding:3rem;position:relative}.ai-status-badge{align-items:center;border-radius:20px;display:flex;font-size:.85rem;font-weight:600;gap:.5rem;padding:.5rem 1rem;position:absolute;right:1rem;top:1rem}.ai-status-badge.ai-enabled{background-color:#e8f5e9;border:1px solid #a5d6a7;color:#2e7d32}.ai-status-badge.mock-mode{background-color:#fff3e0;border:1px solid #ffcc80;color:#e65100}.generator-card h2{color:#333;font-size:2rem;margin-bottom:.5rem;margin-top:2rem}.description{color:#666;line-height:1.6}.description,.input-section{margin-bottom:2rem}.input-textarea{border:2px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:1rem;margin-bottom:1rem;padding:1rem;resize:vertical;transition:border-color .3s ease;width:100%}.settings-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.model-selector{display:flex;flex-direction:column;gap:.5rem}.model-selector label{color:#555;font-size:.95rem;font-weight:600}.model-select{background-color:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.95rem;padding:.75rem;transition:border-color .3s ease;width:100%}.model-select:focus{border-color:#667eea;outline:none}.model-select:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}@media (max-width:768px){.settings-row{grid-template-columns:1fr}}.input-textarea:focus{border-color:#667eea;outline:none}.input-textarea:disabled{background-color:#f5f5f5;cursor:not-allowed}.generate-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease;width:100%}.generate-btn:hover:not(:disabled){box-shadow:0 6px 20px #667eea99;transform:translateY(-2px)}.generate-btn:active:not(:disabled){transform:translateY(0)}.generate-btn:disabled{cursor:not-allowed;opacity:.6}.error-message{background-color:#fee;border-left:4px solid #c33;border-radius:8px;color:#c33;margin-bottom:1rem;padding:1rem}.progress-section{background-color:#f8f9fa;border-radius:8px;margin-bottom:2rem;padding:1.5rem}.progress-section h3{color:#333;font-size:1.1rem;margin-bottom:1rem}.progress-list{list-style:none;padding:0}.progress-item{align-items:center;color:#555;display:flex;gap:.5rem;padding:.5rem 0}.progress-item.fade-in{animation:fadeIn .5s ease-in}.examples-section{border-top:1px solid #e0e0e0;margin-top:2rem;padding-top:2rem}.examples-section h3{color:#555;font-size:1rem;font-weight:600;margin-bottom:1rem}.example-chips{display:flex;flex-wrap:wrap;gap:.5rem}.example-chip{background-color:#f0f0f0;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .2s ease}.example-chip:hover:not(:disabled){background-color:#667eea;border-color:#667eea;color:#fff}.example-chip:disabled{cursor:not-allowed;opacity:.5}.demo-section{background:linear-gradient(135deg,#e0f2fe,#ddd6fe);border:2px solid #818cf8;border-radius:12px;margin-top:2rem;padding:2rem;text-align:center}.demo-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:30px;box-shadow:0 8px 20px #667eea66;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-bottom:.75rem;padding:1rem 2.5rem;transition:all .3s ease}.demo-btn:hover:not(:disabled){box-shadow:0 12px 30px #667eea80;transform:translateY(-3px)}.demo-btn:disabled{cursor:not-allowed;opacity:.6}.demo-description{color:#4338ca;font-size:.95rem;font-weight:500;margin:0}.supported-concepts{border-top:1px solid #e0e0e0;margin-top:2rem;padding-top:2rem}.supported-concepts summary{color:#667eea;cursor:pointer;font-weight:600;padding:.5rem 0;-webkit-user-select:none;user-select:none}.supported-concepts summary:hover{color:#764ba2}.concepts-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.concept-tag{background-color:#e8eaf6;border-radius:12px;color:#5c6bc0;font-size:.85rem;padding:.25rem .75rem}.action-buttons{background:#f9fafb;border-radius:8px;display:flex;gap:1rem;margin-top:2rem;padding:1.5rem}.secondary-btn{background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;flex:0 0 auto;font-size:1rem;font-weight:600;padding:1rem 1.5rem;transition:all .3s ease}.secondary-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.generate-btn.generate-final{background:linear-gradient(135deg,#10b981,#059669);flex:1 1}.generate-btn.generate-final:hover:not(:disabled){box-shadow:0 6px 20px #10b98166}.error-message{align-items:center;display:flex;justify-content:space-between}.retry-btn{background:#667eea;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:background .2s ease}.retry-btn:hover{background:#764ba2}.completion-section{animation:fadeIn .5s ease;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:12px;margin-top:2rem;padding:2rem;text-align:center}.completion-message h3{color:#065f46;font-size:1.5rem;margin:0 0 .5rem}.completion-message p{color:#047857;font-size:1rem;margin:0 0 1.5rem}.generate-btn.generate-another{background:linear-gradient(135deg,#667eea,#764ba2);margin:0 auto;max-width:400px}.generate-btn.generate-another:hover:not(:disabled){box-shadow:0 6px 20px #667eea66}@media (max-width:768px){.generator-card{padding:2rem 1.5rem}.generator-card h2{font-size:1.5rem}.action-buttons{flex-direction:column}.secondary-btn{flex:1 1}.completion-section{padding:1.5rem}.generate-btn.generate-another{max-width:100%}}.stepper-container{align-items:flex-start;background:#fff;border-radius:8px;box-shadow:0 2px 6px #00000014;display:flex;justify-content:space-between;margin-bottom:1.25rem;padding:1.25rem}.stepper-item{flex:1 1}.stepper-item,.stepper-step{align-items:center;display:flex}.stepper-step{gap:.75rem}.stepper-circle{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:.95rem;font-weight:600;height:40px;justify-content:center;transition:all .3s ease;width:40px}.stepper-circle.completed{background:#10b981;color:#fff}.stepper-circle.current{animation:pulse 2s infinite;background:#3b82f6;box-shadow:0 0 0 4px #3b82f633;color:#fff}.stepper-circle.upcoming{background:#e5e7eb;color:#9ca3af}.checkmark{font-size:1.25rem}.stepper-label{display:flex;flex-direction:column;gap:.15rem}.stepper-title{color:#1f2937;font-size:.85rem;font-weight:600}.stepper-subtitle{color:#6b7280;font-size:.7rem}.stepper-line{flex:1 1;height:2px;margin:0 1rem;transition:all .3s ease}.stepper-line.completed{background:#10b981}.stepper-line.upcoming{background:#e5e7eb}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #3b82f633}50%{box-shadow:0 0 0 8px #3b82f61a}}@media (max-width:768px){.stepper-container{flex-direction:column;gap:1rem}.stepper-item{width:100%}.stepper-line{display:none}}.step-display{animation:fadeIn .5s ease;background:#fff;border-radius:8px;box-shadow:0 2px 6px #00000014;margin-bottom:1.25rem;padding:1.25rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem}.step-header h2{color:#1f2937;font-size:1.15rem;font-weight:700;margin:0}.step-stats{color:#6b7280;display:flex;font-size:.8rem;gap:.75rem}.concept-content{display:flex;flex-direction:column;gap:1rem}.concept-badge{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:6px;color:#fff;padding:.85rem 1rem}.concept-label{font-size:.7rem;letter-spacing:.05em;opacity:.9;text-transform:uppercase}.concept-name{font-size:1.35rem;font-weight:700;margin:.3rem 0 0}.concept-description{background:#f9fafb;border-left:3px solid #3b82f6;border-radius:6px;padding:.75rem}.concept-description p{color:#374151;font-size:.85rem;line-height:1.5;margin:0}.concept-goals h4,.concept-keywords h4{color:#1f2937;font-size:.9rem;margin:0 0 .5rem}.keyword-tags{display:flex;flex-wrap:wrap;gap:.4rem}.keyword-tag{background:#e0e7ff;border-radius:16px;color:#4338ca;font-size:.8rem;font-weight:500;padding:.35rem .75rem}.goals-list{font-size:.85rem;margin:0;padding-left:1.25rem}.goals-list li{color:#374151;line-height:1.4;margin-bottom:.35rem}.style-content{display:flex;flex-direction:column;gap:1.25rem}.style-section h4{color:#1f2937;font-size:.95rem;font-weight:700;margin:0 0 .65rem}.color-palette{grid-gap:.65rem;display:grid;gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.color-item{align-items:center;background:#f9fafb;border-radius:6px;display:flex;gap:.6rem;padding:.6rem}.color-swatch{border:2px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 3px #0000001a;flex-shrink:0;height:36px;width:36px}.color-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.color-name{color:#374151;font-size:.8rem;font-weight:600;text-transform:capitalize}.color-value{color:#6b7280;font-family:Courier New,monospace;font-size:.7rem}.typography-info{display:flex;flex-direction:column;gap:.6rem}.typo-item{align-items:center;background:#f9fafb;border-radius:6px;display:flex;gap:.75rem;padding:.6rem .85rem}.typo-label{color:#6b7280;font-size:.8rem;font-weight:600;min-width:100px}.typo-value{color:#1f2937;font-size:.9rem}.spacing-grid{display:flex;flex-direction:column;gap:.5rem}.spacing-item{align-items:center;display:flex;gap:.75rem}.spacing-bar{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:3px;height:16px;transition:width .3s ease}.spacing-info{display:flex;font-size:.8rem;gap:.4rem}.spacing-name{color:#6b7280;font-weight:600;text-transform:capitalize}.spacing-value{color:#1f2937;font-family:Courier New,monospace;font-size:.75rem}.blueprint-summary{background:#f0f9ff;border-left:3px solid #3b82f6;border-radius:6px;margin-bottom:1rem;padding:.65rem .85rem}.section-count{color:#1e40af;font-size:.9rem;font-weight:600}.sections-list{display:flex;flex-direction:column;gap:.65rem}.section-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;display:flex;gap:.75rem;padding:.75rem;transition:all .2s ease}.section-card:hover{border-color:#3b82f6;box-shadow:0 2px 6px #3b82f61a}.section-number{background:linear-gradient(135deg,#3b82f6,#8b5cf6);flex-shrink:0;font-weight:700}.section-details{flex:1 1;min-width:0}.section-header{flex-wrap:wrap;gap:.65rem;margin-bottom:.35rem}.section-type{color:#1f2937;font-size:.9rem;font-weight:700;letter-spacing:.03em;margin:0;text-transform:uppercase}.section-layout{background:#e0e7ff;border-radius:10px;color:#4338ca;font-size:.75rem;font-weight:500;padding:.2rem .6rem}.section-purpose{color:#6b7280;font-size:.8rem;line-height:1.4;margin:.35rem 0 0}.section-notes{color:#8b5cf6;font-size:.75rem;font-style:italic;margin:.35rem 0 0}.generation-display{text-align:center}.generation-content{padding:2rem}.generation-spinner{display:flex;justify-content:center;margin-bottom:1.5rem}.spinner{animation:spin 1s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;height:64px;width:64px}@keyframes spin{to{transform:rotate(1turn)}}.generation-text{color:#1f2937;font-size:1.2rem;font-weight:600;margin:0 0 .5rem}.generation-subtext{color:#6b7280;margin:0}@media (max-width:768px){.step-display{padding:1.5rem}.step-header{align-items:flex-start;flex-direction:column;gap:.75rem}.color-palette{grid-template-columns:1fr}.section-card{flex-direction:column}}.architecture-container{background:linear-gradient(135deg,#f8fafc,#e0e7ff);border:2px solid #818cf8;border-radius:16px;margin-bottom:3rem;padding:3rem 2rem}.architecture-title{color:#1e293b;font-size:2rem;font-weight:800;margin:0 0 .5rem;text-align:center}.architecture-subtitle{color:#64748b;font-size:1.1rem;font-weight:500;margin:0 0 3rem;text-align:center}.architecture-flow{align-items:center;display:flex;flex-direction:column;gap:1rem;margin:0 auto;max-width:800px}.flow-step{align-items:flex-start;background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;display:flex;gap:1.5rem;padding:1.5rem;transition:all .3s ease;width:100%}.flow-step:hover{box-shadow:0 8px 24px #0000001f;transform:translateY(-2px)}.flow-step.highlight{background:linear-gradient(135deg,#fff,#f0f4ff);border:2px solid #818cf8}.flow-step.parallel{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b}.step-icon{align-items:center;background:#ffffff80;border-radius:12px;display:flex;flex-shrink:0;font-size:2.5rem;height:60px;justify-content:center;width:60px}.step-content{flex:1 1}.step-content h3{color:#1e293b;font-size:1.3rem;font-weight:700;margin:0 0 .5rem}.step-content p{color:#64748b;font-size:.95rem;margin:0}.step-tech{background:#818cf8;border-radius:20px;color:#fff;display:inline-block;font-size:.75rem;font-weight:600;margin-top:.5rem;padding:.25rem .75rem}.step-example{background:#f1f5f9;border-left:3px solid #818cf8;border-radius:8px;color:#475569;font-style:italic;margin-top:.75rem;padding:.5rem 1rem}.step-output{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-width:200px;padding:1rem}.output-badge{background:#818cf8;border-radius:12px;color:#fff;display:inline-block;font-size:.75rem;font-weight:600;margin-bottom:.5rem;padding:.25rem .75rem}.output-badge.success{background:#10b981}.step-output ul{color:#475569;font-size:.85rem;margin:0;padding-left:1.25rem}.step-output li{margin-bottom:.25rem}.parallel-sections{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.mini-section{background:#fff;border:2px solid #fbbf24;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#f59e0b;font-size:.85rem;font-weight:600;padding:.5rem 1rem}.final-result{color:#059669;font-size:1.1rem;font-weight:700;padding:.5rem;text-align:center}.flow-arrow{align-items:center;color:#818cf8;display:flex;font-size:2rem;font-weight:700;height:20px;justify-content:center}.architecture-benefits{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-left:auto;margin-right:auto;margin-top:3rem;max-width:900px}.benefit{align-items:flex-start;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;display:flex;gap:1rem;padding:1.5rem}.benefit-icon{flex-shrink:0;font-size:2rem}.benefit strong{color:#1e293b;display:block;font-size:1rem;margin-bottom:.25rem}.benefit p{color:#64748b;font-size:.9rem;line-height:1.5;margin:0}@media (max-width:768px){.architecture-container{padding:2rem 1rem}.architecture-title{font-size:1.5rem}.architecture-subtitle{font-size:1rem}.flow-step{flex-direction:column;padding:1rem}.step-output{width:100%}.architecture-benefits{grid-template-columns:1fr}}.modal-overlay{align-items:center;background-color:#000000f2;bottom:0;display:flex;justify-content:center;left:0;padding:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#fff;box-shadow:0 25px 50px #00000080;display:flex;flex-direction:column;height:100vh;max-width:100%;width:100%}.modal-content.fullscreen{border-radius:0}.modal-header{align-items:center;background:#2c2c2c;border-bottom:2px solid #444;display:flex;justify-content:space-between;padding:0}.modal-tabs{display:flex;flex:1 1;gap:0;padding:0}.close-btn{align-items:center;background:none;border:none;border-left:1px solid #444;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:60px;justify-content:center;transition:all .2s ease;width:60px}.close-btn:hover{background-color:#444;color:#fff}.tab-btn{background:none;border:none;border-bottom:3px solid #0000;border-right:1px solid #444;color:#aaa;cursor:pointer;font-size:1rem;font-weight:600;padding:1.2rem 2rem;transition:all .2s ease}.tab-btn.active{border-bottom-color:#667eea}.tab-btn.active,.tab-btn:hover{background-color:#3a3a3a;color:#fff}.modal-body{background:#f5f5f5;flex:1 1;overflow-y:auto;padding:0}.modal-body:has(.preview-container){padding:0}.preview-container{background:#fff;height:100%;position:relative}.preview-iframe{background:#fff;border:none;height:100%;width:100%}.preview-actions{display:flex;gap:.5rem;position:absolute;right:1rem;top:1rem;z-index:10}.preview-action-btn{align-items:center;background:#d22f2ff2;border:1px solid #ddd;border-radius:6px;box-shadow:0 2px 8px #0000001a;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease}.preview-action-btn:hover{background:#fff;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.metadata-container{display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;padding:2rem}.metadata-section h3{color:#333;margin-bottom:1rem}.metadata-card{background-color:#f8f9fa;border-left:4px solid #667eea;border-radius:8px;padding:1.5rem}.metadata-card p{color:#555;margin:.5rem 0}.metadata-card h4{color:#667eea;margin-bottom:1rem;margin-top:1.5rem}.metadata-card h4:first-child{margin-top:0}.color-swatches{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:1rem}.color-swatch{align-items:center;display:flex;gap:.75rem}.color-box{border:2px solid #ddd;border-radius:8px;box-shadow:0 2px 4px #0000001a;height:40px;width:40px}.code-block{background-color:#2d2d2d;border-radius:6px;color:#f8f8f2;font-family:Courier New,monospace;font-size:.9rem;overflow-x:auto;padding:1rem}.sections-container{margin:0 auto;max-width:1200px;padding:2rem}.sections-container h3{color:#333;margin-bottom:1.5rem}.sections-list{grid-gap:1rem;display:grid;gap:1rem}.section-card{background-color:#f8f9fa;border-left:4px solid #667eea;border-radius:8px;padding:1.5rem}.section-header{align-items:center;display:flex;gap:1rem;margin-bottom:1rem}.section-number{align-items:center;background-color:#667eea;border-radius:50%;color:#fff;display:flex;font-size:.9rem;font-weight:600;height:32px;justify-content:center;width:32px}.section-card h4{color:#333;margin:0;text-transform:capitalize}.section-card p{color:#666;font-size:.95rem;margin:.5rem 0}.modal-footer{background:#fff;border-top:2px solid #e0e0e0;display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem 2rem}.download-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.download-btn:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.close-modal-btn{background-color:#e0e0e0;border:none;border-radius:8px;color:#333;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.close-modal-btn:hover{background-color:#d0d0d0}@media (max-width:768px){.modal-overlay{padding:1rem}.modal-header{padding:1.5rem}.modal-tabs{overflow-x:auto;padding:0 1.5rem}.tab-btn{font-size:.9rem;padding:.75rem 1rem}.modal-body{padding:1.5rem}.modal-footer{flex-direction:column;padding:1rem 1.5rem}.close-modal-btn,.download-btn{width:100%}.color-swatches{grid-template-columns:1fr}}
/*# sourceMappingURL=main.703b2ea4.css.map*/