/* Primary/secondary columns sit side-by-side only when the screen is landscape
           and wide enough to give each column real room. On upright (portrait) or narrow
           screens the secondary stacks below the primary instead of being squeezed. */
        @media (orientation: portrait), (max-width: 640px) {
            .metronomes { flex-direction: column; }
            .sound-cols { flex-direction: column; }
        }
        /* When there's genuine horizontal room, let the panel — and its side-by-side
           columns — be more generously wide instead of staying capped at 600px. */
        @media (orientation: landscape) and (min-width: 880px) {
            .panel-inner { max-width: 880px; }
        }

        @media (max-width: 520px) {
            h1 { font-size: 1.35rem; letter-spacing: 2px; }
            .bpm-value { font-size: 2.6rem; }
            .pager-tab { font-size: 0.8rem; letter-spacing: 1px; padding: 10px 4px; }
            /* keep the ramp drivers from overflowing on narrow phones: four steppers in one row
               leaves ~50px for the value, so From/To/Steps/Curve go 2x2 instead */
            .ramp-grid .stepper button { width: 30px; }
            .ramp-grid .ramp-main { grid-template-columns: repeat(2, 1fr); }
        }