.sandbox-container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* ── Header ── */
        .sandbox-header {
            text-align: center;
            margin-bottom: var(--sp-xl);
        }

        .sandbox-header h1 {
            font-size: var(--text-4xl);
            margin-bottom: 0.5rem;
        }

        .sandbox-header p {
            font-size: var(--text-lg);
            color: var(--text-secondary);
        }

        /* ── Transport Controls (Drums) ── */
        .transport-panel {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            padding: var(--sp-lg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-md);
            margin-bottom: var(--sp-xl);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            flex-wrap: wrap;
        }

        .loop-selector {
            display: flex;
            gap: var(--sp-sm);
        }

        .loop-btn {
            background: var(--bg-glass);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: var(--sp-sm) var(--sp-md);
            cursor: pointer;
            color: var(--text-secondary);
            font-weight: 600;
            transition: all var(--t-fast);
        }

        .loop-btn:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .loop-btn.active {
            background: var(--accent-glow);
            border-color: var(--accent);
            color: var(--text-accent);
            box-shadow: 0 0 10px rgba(129, 140, 248, 0.3);
        }

        .play-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--success);
            color: white;
            border: none;
            font-size: var(--text-2xl);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--t-fast);
            box-shadow: 0 4px 15px rgba(110, 231, 160, 0.4);
        }

        .play-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(110, 231, 160, 0.6);
        }

        .play-btn.playing {
            background: var(--error);
            box-shadow: 0 4px 15px rgba(248, 113, 113, 0.4);
        }

        .bpm-control {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 150px;
        }

        /* ── Visualizer ── */
        .beat-visualizer {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: var(--sp-lg);
        }

        .beat-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--bg-elevated);
            border: 2px solid var(--border);
            transition: all 0.1s;
        }

        .beat-dot.active {
            background: var(--accent-fill);
            border-color: var(--accent);
            transform: scale(1.3);
            box-shadow: 0 0 10px var(--accent-glow);
        }

        /* ── Chord Pads ── */
        .pad-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: var(--sp-md);
            margin-bottom: var(--sp-xl);
        }

        .chord-pad {
            position: relative;
            aspect-ratio: 1;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: var(--r-lg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
            touch-action: manipulation;
            font: inherit;
            color: inherit;
            /* Prevent zoom on double tap on mobile */
        }

        .pad-key-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--r-full);
            width: 22px;
            height: 22px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            pointer-events: none;
        }

        .chord-pad:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
        }

        .chord-pad:hover {
            border-color: var(--accent-soft);
            background: var(--bg-elevated);
            transform: translateY(-2px);
        }

        .chord-pad:active,
        .chord-pad.playing {
            transform: scale(0.95);
            background: var(--accent-soft);
            border-color: var(--accent);
            box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .pad-note {
            font-size: var(--text-5xl);
            font-weight: 900;
            color: var(--text-primary);
            margin-bottom: 0.2rem;
            pointer-events: none;
        }

        .pad-sub {
            font-size: var(--text-base);
            color: var(--text-muted);
            font-weight: 600;
            pointer-events: none;
        }

        .chord-pad.c-chord:active,
        .chord-pad.c-chord.playing {
            background: rgba(110, 231, 160, 0.2);
            border-color: var(--success);
        }

        .chord-pad.g-chord:active,
        .chord-pad.g-chord.playing {
            background: rgba(129, 140, 248, 0.2);
            border-color: var(--accent);
        }

        .chord-pad.d-chord:active,
        .chord-pad.d-chord.playing {
            background: rgba(251, 191, 110, 0.2);
            border-color: var(--warning);
        }

        .chord-pad.em-chord:active,
        .chord-pad.em-chord.playing {
            background: rgba(248, 113, 113, 0.2);
            border-color: var(--error);
        }

        .chord-pad.am-chord:active,
        .chord-pad.am-chord.playing {
            background: rgba(192, 132, 252, 0.2);
            border-color: #c084fc;
        }

        .tempo-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-muted); }
        .tempo-controls-row { display: flex; align-items: center; gap: var(--sp-xs); }
        .accent-slider { accent-color: var(--accent); flex: 1; }

        .progression-panel {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: var(--sp-sm) var(--sp-md);
            margin-bottom: var(--sp-lg);
        }

        .progression-header {
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
            flex-wrap: wrap;
        }

        .progression-tape-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: var(--text-sm);
            color: var(--text-accent);
            flex: 1;
        }

        /* ── Stage 4 Blindfold Ear-Training HUD ── */
        .blindfold-hud {
            padding: var(--sp-md);
            margin-bottom: var(--sp-lg);
            border: 1px solid var(--accent);
            border-radius: var(--r-lg);
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px var(--accent-glow);
        }

        .blindfold-score-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: var(--text-sm);
            background: var(--bg-surface);
            padding: 2px 10px;
            border-radius: var(--r-full);
            border: 1px solid var(--border);
        }

        .blindfold-feedback {
            font-size: var(--text-sm);
            font-weight: 600;
            min-height: 20px;
        }

        .blindfold-feedback.correct {
            color: var(--success-text);
        }

        .blindfold-feedback.incorrect {
            color: var(--warning-text);
        }

        .chord-pad.pad-correct {
            animation: padPulseCorrect 0.6s ease-out;
            background: rgba(16, 185, 129, 0.35) !important;
            border-color: var(--success) !important;
        }

        .chord-pad.pad-incorrect {
            animation: padPulseIncorrect 0.6s ease-out;
            background: rgba(239, 68, 68, 0.3) !important;
            border-color: var(--error) !important;
        }

        @keyframes padPulseCorrect {
            0% { transform: scale(0.95); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes padPulseIncorrect {
            0% { transform: translateX(-4px); }
            25% { transform: translateX(4px); }
            50% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
            100% { transform: translateX(0); }
        }