| /* Base styles */ | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| line-height: 1.6; | |
| } | |
| /* Custom animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| /* Structure visualization canvas */ | |
| .visualization-canvas { | |
| width: 100%; | |
| height: 400px; | |
| background-color: #f8fafc; | |
| border-radius: 0.5rem; | |
| border: 1px solid #e2e8f0; | |
| margin: 1rem 0; | |
| } | |
| /* Control panel */ | |
| .control-panel { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .visualization-canvas { | |
| height: 300px; | |
| } | |
| } |