body { margin: 0; font-family: 'Roboto', sans-serif; color: #333; line-height: 1.6; background-color: #f9f9f9; overflow-x: hidden; }
header { position: fixed; top: 0; left: 0; width: 100%; background: #1E3A8A; color: #fff; padding: 15px 20px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
header .logo { font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
header nav a { color: #fff; text-decoration: none; margin-left: 20px; font-size: 16px; transition: color 0.3s ease; }
header nav a:hover { color: #FF7F50; }
.split-screen { display: flex; height: calc(100vh - 80px); margin-top: 80px; }
.left-panel, .right-panel { flex: 1; padding: 20px; overflow-y: auto; }
.left-panel { background-color: #1E3A8A; color: #FFFFFF; }
.right-panel { background-color: #FFFFFF; color: #1E3A8A; }
.matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.matrix-item { background-color: #FFFFFF; border: 1px solid #E0E0E0; padding: 16px; text-align: center; transition: transform 0.3s ease-in-out; border-radius: 8px; }
.matrix-item img { width: 100%; height: auto; border-radius: 8px; }
.matrix-item:hover { transform: scale(1.05); }
.hover-effect { transition: background-color 0.3s ease; }
.hover-effect:hover { background-color: #FF7F50; }
.cta-section { background: #4CAF50; color: #fff; text-align: center; padding: 40px 20px; margin-top: 20px; }
.cta-button { background-color: #4CAF50; color: #FFFFFF; padding: 12px 24px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: #388E3C; }
@media (max-width: 768px) { 
    .split-screen { flex-direction: column; height: auto; }
    header { flex-direction: column; align-items: flex-start; }
    header nav a { margin: 10px 0 0 0; }
}
footer { background: #1E3A8A; color: #fff; text-align: center; padding: 20px; margin-top: 20px; font-size: 14px; }
pre { background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }
article { margin: 20px; }
h2, h3 { color: #1E3A8A; }
p { margin-bottom: 15px; }