body { 
    font-family: 'Segoe UI', sans-serif; 
    background: #f4f4f9; 
    color: #333; 
    margin: 0; 
    padding: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 { margin-bottom: 5px; color: #2d3436; }
.subtitle { margin-top: 0; color: #636e72; margin-bottom: 30px; }

/* Side-by-Side Layout */
.layout-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    align-items: flex-start;
    justify-content: center;
}

/* Left Column: Visuals */
.visual-col {
    flex: 0 0 auto; /* Do not shrink/grow */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Right Column: Text */
.text-col {
    flex: 1; /* Take remaining space */
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    line-height: 1.6;
}

.text-col h3 { margin-top: 0; color: #3742fa; }
.text-col p { margin-bottom: 15px; font-size: 0.95rem; }

/* Controls & Canvas */
.controls { 
    background: white; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px; 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

canvas { 
    background: white; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border-radius: 4px; 
}

button { padding: 8px 16px; background: #3742fa; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #2f3542; }
.stat-box { font-family: monospace; font-size: 14px; margin-left: 15px; }

/* Mobile Responsive */
@media (max-width: 900px) {
    .layout-wrapper { flex-direction: column; align-items: center; }
    .text-col { width: 100%; box-sizing: border-box; }
}