body { font-family: 'Inter', sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background: linear-gradient(135deg, #e0e4eb 0%, #a1a9b7 100%); color: #2c3e50; } .technical-info { display: flex; justify-content: space-around; width: 100%; margin-bottom: 20px; background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; } .component { text-align: center; background: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 8px; transition: transform 0.3s ease; } .component:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .component h3 { margin: 0 0 10px; color: #2980b9; } .component p { font-size: 0.9rem; color: #34495e; } h1 { color: #2c3e50; margin-bottom: 30px; text-align: center; } .input-area { background: rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 25px; width: 100%; max-width: 700px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .prompt-group { margin-bottom: 15px; } input { width: 100%; padding: 12px; border: 1px solid #bdc3c7; border-radius: 6px; font-size: 1rem; } #generateButton { width: 100%; padding: 12px; background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); color: white; border: none; border-radius: 6px; cursor: pointer; transition: all 0.4s ease; } #generateButton:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(0,0,0,0.2); } .image-area { margin-top: 20px; max-width: 100%; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } #generatedImage { max-width: 100%; height: auto; display: block; } #loading { margin: 20px 0; font-style: italic; color: #2c3e50; } .advanced-controls, .control-options { background: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; margin-bottom: 15px; } .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; } .style-item { display: flex; flex-direction: column; } .style-item select { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #bdc3c7; } .prompt-hint { font-size: 0.7rem; color: #7f8c8d; margin-top: 5px; } .technical-explanation { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; margin-top: 20px; text-align: left; max-width: 700px; width: 100%; } .technical-explanation h2 { color: #2980b9; margin-bottom: 15px; } .technical-explanation ul { list-style-type: none; padding: 0; } .technical-explanation li { margin-bottom: 8px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 8px; border-radius: 6px; } .technical-explanation li::before { content: '•'; position: absolute; left: 0; color: #2980b9; } .diffusion-stages { display: flex; justify-content: space-around; background: rgba(41, 128, 185, 0.1); padding: 15px; border-radius: 10px; } .noise-generation, .denoising-process, .prompt-guidance { text-align: center; background: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 8px; transition: all 0.3s ease; } .noise-generation:hover, .denoising-process:hover, .prompt-guidance:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .diffusion-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-top: 15px; } .stage-visualization ul, .generation-parameters ul, .how-it-works ul { list-style-type: none; padding: 0; } .stage-visualization li { background: rgba(255, 255, 255, 0.2); margin-bottom: 8px; padding: 8px; border-radius: 6px; } .stage-visualization li strong, .generation-parameters li strong { color: #2c3e50; } .stage-visualization li::before, .generation-parameters li::before { content: ''; } .generation-parameters li { margin-bottom: 8px; background: rgba(41, 128, 185, 0.1); padding: 8px; border-radius: 6px; } .anatomical-guidance { background: rgba(41, 185, 128, 0.1); border-radius: 10px; padding: 15px; margin-top: 15px; } .anatomy-controls { display: flex; align-items: center; justify-content: space-between; } .anatomy-item { flex-grow: 1; margin-right: 15px; } .anatomy-item label { margin-bottom: 5px; display: block; } .anatomy-item select { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #bdc3c7; } .anatomy-hint { font-size: 0.8rem; color: #34495e; background: rgba(255, 255, 255, 0.3); padding: 10px; border-radius: 6px; flex-shrink: 0; max-width: 40%; } .anatomy-hint p { margin: 0; } .text-generation-info { background: rgba(185, 128, 41, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .text-generation-info h3 { color: #b58029; margin-bottom: 10px; } .text-generation-info ul { list-style-type: none; padding: 0; } .text-generation-info li { margin-bottom: 8px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 8px; border-radius: 6px; } .text-generation-info li::before { content: '•'; position: absolute; left: 0; color: #b58029; } .text-hint { font-size: 0.8rem; color: #34495e; background: rgba(255, 255, 255, 0.3); padding: 10px; border-radius: 6px; margin-top: 10px; } .text-hint p { margin: 0; } .ai-enhancement-panel { background: rgba(41, 185, 128, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; max-width: 700px; width: 100%; } .enhancement-controls { display: flex; justify-content: space-around; margin-bottom: 15px; } .enhancement-group { display: flex; flex-direction: column; align-items: center; } .enhancement-group label { margin-bottom: 5px; font-size: 0.9rem; } .enhancement-result { background: rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; margin-top: 10px; } .enhancement-result.hidden { display: none; } .enhancement-result h3 { margin-top: 0; color: #2980b9; } #semanticCheckList { list-style-type: none; padding: 0; } #semanticCheckList li { margin-bottom: 5px; padding: 5px; background: rgba(41, 128, 185, 0.1); border-radius: 4px; } .how-it-works { background: rgba(185, 41, 128, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .how-it-works h2 { color: #b92980; margin-bottom: 15px; } .how-it-works li { margin-bottom: 8px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 8px; border-radius: 6px; } .how-it-works li::before { content: '•'; position: absolute; left: 0; color: #b92980; } .dataset-info { background: rgba(41, 78, 185, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .dataset-info h2 { color: #294e80; margin-bottom: 15px; } .dataset-info ul { list-style-type: none; padding: 0; } .dataset-info li { margin-bottom: 8px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 8px; border-radius: 6px; } .dataset-info li::before { content: '•'; position: absolute; left: 0; color: #294e80; } .dataset-info .database-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .dataset-info .database-category { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 15px; } .dataset-info .database-category h3 { color: #294e80; margin-bottom: 10px; } .dataset-info .database-category ul { list-style-type: none; padding: 0; } .dataset-info .database-category li { margin-bottom: 5px; padding: 5px; background: rgba(41, 78, 185, 0.05); border-radius: 5px; } .dataset-insights { margin-top: 20px; background: rgba(41, 185, 128, 0.1); border-radius: 10px; padding: 15px; } .dataset-insights h3 { color: #294e80; margin-bottom: 10px; } .dataset-insights ul { list-style-type: disc; padding-left: 20px; } .dataset-insights li { margin-bottom: 5px; } .control-and-error-reduction { background: rgba(185, 41, 41, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .control-and-error-reduction h2 { color: #b92929; margin-bottom: 15px; } .control-and-error-reduction ul { list-style-type: none; padding: 0; } .control-and-error-reduction li { margin-bottom: 15px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 8px; } .control-and-error-reduction li::before { content: '•'; position: absolute; left: 0; color: #b92929; font-weight: bold; top: 10px; } .control-and-error-reduction li strong { color: #2c3e50; } .control-and-error-reduction ul ul { list-style-type: disc; padding-left: 30px; margin-top: 10px; margin-bottom: 0; } .control-and-error-reduction ul ul li { margin-bottom: 5px; padding: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; position: relative; padding-left: 0; } .control-and-error-reduction ul ul li::before { content: ''; } .control-and-error-reduction code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background-color: rgba(0, 0, 0, 0.05); padding: 2px 4px; border-radius: 4px; font-size: 0.9em; color: #34495e; word-break: break-all; } .shading-explanation { background: rgba(41, 185, 41, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .shading-explanation h2 { color: #29b529; margin-bottom: 15px; } .shading-explanation ul { list-style-type: none; padding: 0; } .shading-explanation li { margin-bottom: 15px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 8px; } .shading-explanation li::before { content: '🔹'; position: absolute; left: 0; color: #2980b9; font-weight: bold; top: 10px; } .shading-explanation li strong { color: #2c3e50; } .shading-explanation ul ul { list-style-type: disc; padding-left: 30px; margin-top: 10px; margin-bottom: 0; } .shading-explanation ul ul li { margin-bottom: 5px; padding: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; position: relative; padding-left: 0; } .shading-explanation ul ul li::before { content: ''; } .technical-section { background: rgba(41, 185, 41, 0.1); border-radius: 10px; padding: 15px; margin-top: 20px; } .technical-section h2 { color: #29b529; margin-bottom: 15px; } .technical-section ul { list-style-type: none; padding: 0; } .technical-section li { margin-bottom: 15px; padding-left: 20px; position: relative; background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 8px; } .technical-section li::before { content: '✨'; position: absolute; left: 0; color: #29b529; font-weight: bold; top: 10px; } .technical-section li strong { color: #2c3e50; } .technical-section ul ul { list-style-type: disc; padding-left: 30px; margin-top: 10px; margin-bottom: 0; } .technical-section ul ul li { margin-bottom: 5px; padding: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; position: relative; padding-left: 0; } .technical-section ul ul li::before { content: ''; } .speed-info { background: rgba(185, 41, 78, 0.1); } .speed-info h2 { color: #b9294e; } .speed-info table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden; } .speed-info th, .speed-info td { border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px; text-align: left; } .speed-info th { background-color: rgba(185, 41, 78, 0.2); color: #2c3e50; font-weight: bold; } .speed-info tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.05); } .speed-factors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .speed-up, .speed-down { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 15px; } .speed-up h3 { color: #28a745; margin-top: 0; } .speed-down h3 { color: #dc3545; margin-top: 0; } .speed-factors ul { list-style-type: none; padding: 0; } .speed-factors li { margin-bottom: 8px; padding-left: 20px; position: relative; background: none; border-radius: 0; padding: 0; } .speed-factors li::before { content: '•'; position: absolute; left: 0; color: inherit; font-weight: normal; top: 0; } .ai-errors-solutions { background: rgba(185, 41, 41, 0.1); border-radius: 10px; padding: 20px; margin-top: 20px; max-width: 700px; width: 100%; text-align: left; } .ai-errors-solutions h2 { color: #b92929; margin-bottom: 20px; text-align: center; } .ai-errors-solutions .error-section { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 15px; margin-bottom: 15px; } .ai-errors-solutions .error-section h3 { color: #b92929; margin-top: 0; margin-bottom: 10px; } .ai-errors-solutions .error-section h4 { color: #28a745; margin-top: 10px; margin-bottom: 5px; } .ai-errors-solutions .error-section p { font-size: 0.95rem; line-height: 1.5; color: #34495e; } .ai-errors-solutions .error-section ul { list-style-type: none; padding: 0; margin-top: 10px; } .ai-errors-solutions .error-section li { margin-bottom: 8px; padding-left: 20px; position: relative; background: rgba(41, 185, 41, 0.05); padding: 8px; border-radius: 5px; } .ai-errors-solutions .error-section li::before { content: '•'; position: absolute; left: 0; color: #28a745; font-weight: bold; } @media (max-width: 768px) { .technical-info, .diffusion-details, .anatomy-controls, .style-grid { flex-direction: column; gap: 15px; } .style-grid { grid-template-columns: 1fr; } .style-item, .anatomy-item { width: 100%; margin-right: 0; } .anatomy-controls { align-items: flex-start; } .anatomy-hint { max-width: 100%; } .technical-section ul li { padding-left: 10px; } .technical-section li::before { left: -10px; } .speed-factors { grid-template-columns: 1fr; } .speed-factors li { padding-left: 10px; } .speed-factors li::before { left: -10px; } .ai-errors-solutions .error-section li { padding-left: 10px; } .ai-errors-solutions .error-section li::before { left: -10px; } }