@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .main-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tools-panel {
        order: 2;
    }

    .editor-panel {
        order: 1;
    }

    .display-buttons {
        flex-wrap: wrap;
    }

    .btn {
        flex: 1 1 40%;
    }

    /* Sticky controls at bottom for mobile can be implemented here if complex, 
     but standard stacking is often better for simple web apps to avoid screen clutter.
     Will keep stacking for now. */
}