body{
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
    background: #f6f8fa;
    margin: 0;}

canvas {
    border: 1px solid #333;
    display: block;
    margin: 20px auto;
    width: 95vw;
    max-width: 900px;
    height: 180px;
    max-height: 240px;
}

/* Control panel and code section adapt layout */
#controls,
#searchControls {
    text-align: center;
    margin: 12px;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
}
button, label, input[type=range] {
    margin-top: 8px;
    margin-bottom: 8px;
}

#heading{
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 24px 0 10px 0;
    color: #1456b1;
}

button, label, input[type=range], #speedVal {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
}

.code-section, .code-title, .code-col, pre {
    font-family: 'Courier New', Courier, monospace;
}


/* Larger touch targets for mobile devices */
button {
    font-size: 1em;
    min-width: 120px;
    padding: 12px 20px;
    margin: 6px 6px 6px 0;
    border-radius: 10px;
    background: #1877f2;
    color: white;
    border: none;
    font-family: inherit;
    transition: background 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(24,119,242,0.10);
    touch-action: manipulation;
}
button:disabled {
    background: #b0b0b0;
    cursor: not-allowed;
}
button:hover:enabled {
    background: #1456b1;
}

.code-section {
    width: 98vw;
    max-width: 950px;
    margin: 18px auto 0 auto;
    display: flex;
    gap: 24px;
}
.code-col {
    flex: 1;
    min-width: 0;
    background: #f8faff;
    border-radius: 12px;
    border: 2px solid #e3e9f8;
    padding: 12px 6px 8px 10px;
    font-family: 'Fira Mono', 'Consolas', monospace;
    font-size: 0.9em;
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(24,119,242,0.06);
}
#pythonCode {
    background: #b9e4ff;
    border-radius: 8px;
    padding: 10px;
    color: #234567;
    border-left: 4px solid #55acee;
    overflow-x: auto;
}

#javaCode {
    background: #ffd6b2;
    border-radius: 8px;
    padding: 10px;
    color: #853400;
    border-left: 4px solid #FF9800;
    overflow-x: auto;
    /* Optional: an orange hint for Java */
}

.code-title {
    margin-bottom: 8px;
}

pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
}


/* Mobile adjustments */
@media (max-width: 600px) {
    canvas {
        width: 90vw;
        height: 110px;
        font-size: 0.86em;
    }
    #controls,
    #searchControls {
        flex-direction: column;
        align-items: center;
    }
    .code-section {
        flex-direction: column;
        gap: 10px;
        width: 96vw;
        padding: 0;
    }
    button {
        width: 86vw;
        max-width: 330px;
        margin: 6px auto;
        font-size: 1em;
    }
    .code-title {
        font-size: 0.97em;
    }
    .code-col {
        padding: 8px 4px 6px 4px;
        font-size: 0.91em;
    }
    label, #speedVal {
        display: block;
        margin: 8px auto;
        width: fit-content;
    }
}