styles.css

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

#input-area {
    width: 100%;
    max-width: 600px;
    height: 200px;
    margin-bottom: 20px;
}

#render-button {
    margin-bottom: 20px;
}

#mindmap-container {
    width: 600px;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    background-color: #f0f0f0;
}

.node {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #333;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.root {
    background-color: #ff9966;
    grid-area: 1 / 1 / 3 / 3;
}

.level-1 {
    background-color: #66cc99;
    display: none;
}

.level-2 {
    background-color: #6699cc;
    display: none;
}

#level-1-1 { grid-area: 3 / 1 / 4 / 2; }
#level-1-2 { grid-area: 3 / 3 / 4 / 4; }
#level-1-3 { grid-area: 1 / 3 / 2 / 4; }