.paraboladef-widget body {
            max-width: 55em;
            margin: 0 auto;
            font-family: Arial, sans-serif;
            
        }
        #parabola-container {
            width: 500px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-radius: 8px;
            border-color: #433a55;
            background-color: #ffffff;
        }
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            color: red;
            font-weight: bold;
        }
        .control-panel {
            margin: 20px auto;
            text-align: center;
        }
        .point-label {
            font-size: 11px;
            font-weight: bold;
            fill: #2e0a7f;
        }
        .directrix {
            stroke: #004700;
            stroke-width: 2px;
        }
        .axis {
            stroke-dasharray: 5,5;
            stroke: black;
        }
        .parabola {
            stroke: #2a7fff;
            stroke-width: 3px;
            fill: none;
        }
        .vertex {
            fill: red;
            r: 6px;
        }
        .guideline {
            stroke-dasharray: 5,5;
            stroke: gray;
        }
        .focal-point {
            fill: #2e0a7f;
            r: 5px;
            transition: filter 0.2s ease;
            cursor: move;
        }
        .focal-point:hover, .focal-point.dragging {
            filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.7));
        }
        .q-point {
            fill: #8a2be2;
            cursor: move;
        }
        .q-point:hover, .q-point.dragging {
            filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9));
        }