.accessibility {
    display: none;
    width: min(300px, 80%);
    position: fixed;
    top: calc(100% - 450px);
    left: calc(100% - 420px);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    z-index: 99;

    .header {
        background-color: #007bff;
        color: white;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: move;

        h2 {
            margin: 0;
            font-size: 1rem;
        }

        .close-btn {
            font-size: 20px;
            cursor: pointer;
        }
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 20px;

        .grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f5f5f5;
            cursor: pointer;
            font-size: 12px;
            transition: transform 0.2s ease-in-out;

            &:hover {
                transform: scale(1.1);
            }

            i {
                font-size: 20px;
                margin-bottom: 5px;
            }

            .level-indicator {
                margin-top: 5px;
                font-size: 10px;
                color: gray;
            }

            &.reset {
                grid-column: 1 / span 2;
                background-color: #dc3545;
                color: white;
            }
        }
    }
}

:root {
    &.grayscale {
        filter: grayscale(100%);
    }
    &.enlarged-cursor {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 29.699219 47 C 29.578125 47 29.457031 46.976563 29.339844 46.933594 C 29.089844 46.835938 28.890625 46.644531 28.78125 46.398438 L 22.945313 32.90625 L 15.683594 39.730469 C 15.394531 40.003906 14.96875 40.074219 14.601563 39.917969 C 14.238281 39.761719 14 39.398438 14 39 L 14 6 C 14 5.601563 14.234375 5.242188 14.601563 5.082031 C 14.964844 4.925781 15.390625 4.996094 15.683594 5.269531 L 39.683594 27.667969 C 39.972656 27.9375 40.074219 28.355469 39.945313 28.726563 C 39.816406 29.101563 39.480469 29.363281 39.085938 29.398438 L 28.902344 30.273438 L 35.007813 43.585938 C 35.117188 43.824219 35.128906 44.101563 35.035156 44.351563 C 34.941406 44.601563 34.757813 44.800781 34.515625 44.910156 L 30.113281 46.910156 C 29.980469 46.96875 29.84375 47 29.699219 47 Z"/></svg>') 8 8, auto;
    }
}