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

.input-area, .controls, #statusDisplay, .speed-control { /* .speed-control を追加 */
    margin-bottom: 15px;
}

.controls button {
    margin: 0 5px;
    padding: 8px 15px;
    cursor: pointer;
}

/* 速度調整用のスタイル */
.speed-control {
    display: flex;
    align-items: center;
    gap: 10px; /* 要素間のスペース */
}
#speedSlider {
    width: 150px; /* スライダーの幅 */
}
#speedValue {
    font-weight: bold;
    min-width: 35px; /* 値表示エリアの最小幅 */
    text-align: right;
}

#statusDisplay {
    min-height: 2em; /* 表示エリアの高さを確保 */
    font-weight: bold;
    color: #333;
    margin-top: 10px; /* 上部のマージン調整 */
}

.chart-container {
    width: 80%;
    max-width: 800px; /* グラフの最大幅 */
    margin-top: 20px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ステータスメッセージのタイプ別スタイル（例） */
#statusDisplay.error { color: red; }
#statusDisplay.success { color: green; }
#statusDisplay.info { color: #333; }