@import '_content/ElectricBlazor.EbColorPicker/ElectricBlazor.EbColorPicker.67q71uc5sk.bundle.scp.css';
@import '_content/ElectricBlazor.EbCssDesigner/ElectricBlazor.EbCssDesigner.2q67pzpkjj.bundle.scp.css';
@import '_content/ElectricBlazor.EbDateTimePicker/ElectricBlazor.EbDateTimePicker.5desezi5mg.bundle.scp.css';
@import '_content/ElectricBlazor.EbDialogs/ElectricBlazor.EbDialogs.n8w85uskp6.bundle.scp.css';
@import '_content/ElectricBlazor.EbGraph/ElectricBlazor.EbGraph.og2nrlsmm5.bundle.scp.css';
@import '_content/ElectricBlazor.EbNumericInput/ElectricBlazor.EbNumericInput.rjz5vk1tgo.bundle.scp.css';
@import '_content/ElectricBlazor.EbPrimitives/ElectricBlazor.EbPrimitives.npj6h0xzrh.bundle.scp.css';
@import '_content/ElectricBlazor.EbSave/ElectricBlazor.EbSave.pthx2xundv.bundle.scp.css';
@import '_content/ElectricBlazor.EbTabbedCards/ElectricBlazor.EbTabbedCards.039xxs849l.bundle.scp.css';
@import '_content/ElectricBlazor.EbTour/ElectricBlazor.EbTour.6z5iwadini.bundle.scp.css';
@import '_content/ElectricBlazor.EbWizard/ElectricBlazor.EbWizard.yozo2nv0qg.bundle.scp.css';

/* /Components/CountdownOverlay.razor.rz.scp.css */
.countdown-overlay[b-fccg5swh2q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn-b-fccg5swh2q 0.3s ease;
}

.countdown-number[b-fccg5swh2q] {
    font-size: 6em;
    font-weight: bold;
    color: #4ade80;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.5);
    animation: pulse-b-fccg5swh2q 1s ease-in-out infinite;
}

.countdown-text[b-fccg5swh2q] {
    font-size: 1.5em;
    color: #aaa;
    margin-top: 10px;
}

@keyframes pulse-b-fccg5swh2q {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes fadeIn-b-fccg5swh2q {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* /Components/DrillIndicator.razor.rz.scp.css */
.current-drill-indicator[b-08j14xu71n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(245, 158, 11, 0.2);
    border: 2px solid #f59e0b;
    border-radius: 10px;
    font-weight: bold;
}

.current-drill-indicator .drill-icon[b-08j14xu71n] {
    font-size: 1.2em;
}

.current-drill-indicator .drill-name[b-08j14xu71n] {
    color: #fbbf24;
}

.current-drill-indicator .drill-timer[b-08j14xu71n] {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    font-family: monospace;
    font-size: 1.1em;
    color: #fff;
}

.clear-drill-btn[b-08j14xu71n] {
    background: transparent;
    border: none;
    color: #f87171;
    font-size: 1.2em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.clear-drill-btn:hover:not(:disabled)[b-08j14xu71n] {
    background: rgba(248, 113, 113, 0.2);
}

.clear-drill-btn:disabled[b-08j14xu71n] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* /Components/EndGameScreen.razor.rz.scp.css */
.end-game-overlay[b-p84ig8xlee] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-p84ig8xlee 0.3s ease;
}

@keyframes fadeIn-b-p84ig8xlee {
    from { opacity: 0; }
    to { opacity: 1; }
}

.end-game-modal[b-p84ig8xlee] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 30px 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(74, 222, 128, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    animation: slideUp-b-p84ig8xlee 0.4s ease;
    color: #fff;
}

@keyframes slideUp-b-p84ig8xlee {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.end-game-header[b-p84ig8xlee] {
    text-align: center;
    margin-bottom: 25px;
}

.end-game-icon[b-p84ig8xlee] {
    font-size: 3em;
    display: block;
    margin-bottom: 10px;
}

.end-game-header h2[b-p84ig8xlee] {
    margin: 0;
    font-size: 2em;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.drill-badge[b-p84ig8xlee] {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 15px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    border-radius: 20px;
    font-size: 0.9em;
    color: #fbbf24;
}

.end-game-stats[b-p84ig8xlee] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card[b-p84ig8xlee] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
}

.stat-card.primary[b-p84ig8xlee] {
    border-left: 4px solid #3b82f6;
}

.stat-card.success[b-p84ig8xlee] {
    border-left: 4px solid #4ade80;
}

.stat-card.danger[b-p84ig8xlee] {
    border-left: 4px solid #f87171;
}

.stat-card.info[b-p84ig8xlee] {
    border-left: 4px solid #a78bfa;
}

.stat-icon[b-p84ig8xlee] {
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.stat-content[b-p84ig8xlee] {
    flex: 1;
}

.stat-card .stat-value[b-p84ig8xlee] {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
}

.stat-card .stat-label[b-p84ig8xlee] {
    font-size: 0.85em;
    color: #9ca3af;
}

.end-game-details[b-p84ig8xlee] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.detail-row[b-p84ig8xlee] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child[b-p84ig8xlee] {
    border-bottom: none;
}

.detail-label[b-p84ig8xlee] {
    color: #9ca3af;
}

.detail-value[b-p84ig8xlee] {
    font-weight: bold;
    color: #fff;
}

.detail-value.highlight[b-p84ig8xlee] {
    color: #4ade80;
    font-size: 1.1em;
}

.personal-best-banner[b-p84ig8xlee] {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.2));
    border: 2px solid #f59e0b;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    color: #fbbf24;
    font-size: 1.1em;
    animation: pulse-b-p84ig8xlee 2s ease-in-out infinite;
}

@keyframes pulse-b-p84ig8xlee {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

.end-game-actions[b-p84ig8xlee] {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.end-game-actions .control-btn[b-p84ig8xlee] {
    min-width: 120px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.end-game-actions .control-btn.start-btn[b-p84ig8xlee] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

.end-game-actions .control-btn:hover[b-p84ig8xlee] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.keyboard-hint[b-p84ig8xlee] {
    margin-top: 20px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-align: center;
    font-size: 0.9em;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hint-key[b-p84ig8xlee] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85em;
}

.hint-key.white[b-p84ig8xlee] {
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    color: #333;
    border: 1px solid #aaa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hint-key.black[b-p84ig8xlee] {
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    color: #fff;
    border: 1px solid #555;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hint-separator[b-p84ig8xlee] {
    color: #6b7280;
    margin: 0 5px;
}

.keyboard-hint.disabled[b-p84ig8xlee] {
    opacity: 0.6;
}

.keyboard-hint.enabled[b-p84ig8xlee] {
    animation: fadeIn-b-p84ig8xlee 0.3s ease;
}

.hint-waiting[b-p84ig8xlee] {
    color: #9ca3af;
    font-style: italic;
}

/* /Components/GameControlBar.razor.rz.scp.css */
.game-controls[b-3blggk5f5f] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.control-btn[b-3blggk5f5f] {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.start-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

.pause-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.resume-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.stop-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.reset-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

.settings-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.drill-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.replay-btn[b-3blggk5f5f] {
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

.control-btn:hover:not(:disabled)[b-3blggk5f5f] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.control-btn:disabled[b-3blggk5f5f] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* /Components/GameTimer.razor.rz.scp.css */
.game-timer[b-dtvjms3a5n] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border: 3px solid #3b82f6;
    border-radius: 15px;
    padding: 15px 25px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    color: #fff;
}

.game-timer.warning[b-dtvjms3a5n] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #4a3728 0%, #2d2010 100%);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.game-timer.warning .timer-value[b-dtvjms3a5n] {
    color: #fbbf24;
}

.game-timer.critical[b-dtvjms3a5n] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #5c2020 0%, #3a1010 100%);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    animation: timerPulse-b-dtvjms3a5n 0.5s ease-in-out infinite;
}

.game-timer.critical .timer-value[b-dtvjms3a5n] {
    color: #f87171;
}

@keyframes timerPulse-b-dtvjms3a5n {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.timer-icon[b-dtvjms3a5n] {
    font-size: 2em;
    margin-bottom: 5px;
}

.timer-value[b-dtvjms3a5n] {
    font-size: 2.5em;
    font-weight: bold;
    color: #60a5fa;
    font-family: 'Consolas', monospace;
}

.timer-label[b-dtvjms3a5n] {
    font-size: 0.85em;
    color: #9ca3af;
    margin-top: 5px;
}

/* /GameContainer.razor.rz.scp.css */


.subtitle[b-pqelvl3ibf] {
    margin: 0;
    opacity: 0.8;
    font-size: 1.1em;
}

.game-controls[b-pqelvl3ibf] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.control-btn[b-pqelvl3ibf] {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.start-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
}

.pause-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.resume-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
}

.stop-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: #fff;
}

.reset-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: #fff;
}

.settings-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}

.apply-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
    margin-top: 10px;
}

.control-btn:hover:not(:disabled)[b-pqelvl3ibf] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--surface-sunken);
}

.control-btn:disabled[b-pqelvl3ibf] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.staff-container[b-pqelvl3ibf] {
    position: relative;
}

.countdown-overlay[b-pqelvl3ibf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn-b-pqelvl3ibf 0.3s ease;
}

.countdown-number[b-pqelvl3ibf] {
    font-size: 6em;
    font-weight: bold;
    color: #4ade80;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.5);
    animation: pulse-b-pqelvl3ibf 1s ease-in-out infinite;
}

.countdown-text[b-pqelvl3ibf] {
    font-size: 1.5em;
    color: #aaa;
    margin-top: 10px;
}

@keyframes pulse-b-pqelvl3ibf {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes fadeIn-b-pqelvl3ibf {
    from { opacity: 0; }
    to { opacity: 1; }
}

.game-timer[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border: 3px solid #3b82f6;
    border-radius: 15px;
    padding: 15px 25px;
    text-align: center;
    min-width: 150px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.game-timer.warning[b-pqelvl3ibf] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #4a3728 0%, #2d2010 100%);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.game-timer.warning .timer-value[b-pqelvl3ibf] {
    color: #fbbf24;
}

.game-timer.critical[b-pqelvl3ibf] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #5c2020 0%, #3a1010 100%);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    animation: timerPulse-b-pqelvl3ibf 0.5s ease-in-out infinite;
}

.game-timer.critical .timer-value[b-pqelvl3ibf] {
    color: #f87171;
}

@keyframes timerPulse-b-pqelvl3ibf {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.timer-icon[b-pqelvl3ibf] {
    font-size: 2em;
    margin-bottom: 5px;
}

.timer-value[b-pqelvl3ibf] {
    font-size: 2.5em;
    font-weight: bold;
    color: #60a5fa;
    font-family: 'Consolas', monospace;
}

.timer-label[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    color: #9ca3af;
    margin-top: 5px;
}

#musicStaffCanvas[b-pqelvl3ibf] {
    background: transparent;
    display: block;
    /* JS (musicReaderGame.js) sets an explicit inline width/height sized to
       fill the staff card; these are just a safety net before that runs. */
    max-width: 100%;
    max-height: 100%;
}

.settings-grid[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.setting-group[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.setting-group label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    opacity: 0.9;
}

/* ===== Speed-pressure meter ===== */
.pressure-stat[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.pressure-stat h2[b-pqelvl3ibf] {
    align-self: stretch;
    margin: -1px -22px 10px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--warm), var(--accent-bright));
}

/* Vertical, draining downward -- reads as a level falling rather than a bar filling. */
.pressure-meter[b-pqelvl3ibf] {
    position: relative;
    width: 30px;
    height: 84px;
    border: 2px solid var(--panel-line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    overflow: hidden;
}

.pressure-meter-fill[b-pqelvl3ibf] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--success), var(--gold));
    transition: height 0.12s linear;
}

.pressure-stat.is-critical .pressure-meter-fill[b-pqelvl3ibf] {
    background: linear-gradient(180deg, var(--warm), #ff3b2f);
}

.pressure-stat.is-critical .pressure-meter[b-pqelvl3ibf] {
    border-color: var(--warm);
    animation: pressurePulse-b-pqelvl3ibf 0.55s ease-in-out infinite;
}

@keyframes pressurePulse-b-pqelvl3ibf {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warm) 60%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warm) 0%, transparent); }
}

.pressure-level[b-pqelvl3ibf] {
    margin-top: 6px;
    color: var(--muted);
    font-size: max(0.8em, var(--font-size-min));
    letter-spacing: 0.04em;
}

.pressure-failed[b-pqelvl3ibf] {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 2px solid var(--warm);
    border-radius: var(--radius-md);
    background: var(--panel-bg-strong);
    color: var(--text);
    box-shadow: var(--shadow);
}

.pressure-failed strong[b-pqelvl3ibf] {
    display: block;
    color: var(--warm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pressure-failed-icon[b-pqelvl3ibf] {
    font-size: 1.6em;
    line-height: 1;
}

.pressure-failed-detail[b-pqelvl3ibf] {
    display: block;
    font-size: max(0.9em, var(--font-size-min));
    color: var(--muted);
}

.pressure-failed-dismiss[b-pqelvl3ibf] {
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

/* ===== Streak readout ===== */
.streak-stat[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.streak-stat h2[b-pqelvl3ibf] {
    align-self: stretch;
    margin: -1px -22px 10px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--secondary-dark), var(--secondary));
}

.streak-readout[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.streak-readout strong[b-pqelvl3ibf] {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1;
    color: var(--text);
    transition: color 0.2s ease;
}

.streak-readout strong.is-hot[b-pqelvl3ibf] {
    color: var(--gold);
}

.streak-flame[b-pqelvl3ibf] {
    font-size: 1.1em;
}

/* Grows with the streak and drops straight back to zero on a wrong note -- the collapse is
   the point, so it is not transitioned on the way down. */
.streak-meter[b-pqelvl3ibf] {
    width: 82%;
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text) 15%, transparent);
    overflow: hidden;
}

.streak-meter-fill[b-pqelvl3ibf] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--secondary), var(--gold));
    transition: width 0.25s ease-out;
}

.streak-best[b-pqelvl3ibf] {
    margin-top: 5px;
    color: var(--muted);
    font-size: max(0.8em, var(--font-size-min));
    letter-spacing: 0.04em;
}

/* ===== Queue: skills checks and practice plans ===== */
.queue-chip[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    font-size: max(0.78em, var(--font-size-min));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.queue-chip-label[b-pqelvl3ibf] {
    color: var(--gold);
    font-weight: 600;
}

.queue-chip-progress[b-pqelvl3ibf] {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.queue-chip-area[b-pqelvl3ibf] {
    margin-left: auto;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.queue-chip-end[b-pqelvl3ibf] {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--muted);
    cursor: pointer;
}

.queue-chip-end:hover[b-pqelvl3ibf] {
    color: var(--warm);
}

.block-next[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: var(--panel-bg);
}

.block-next-icon[b-pqelvl3ibf] {
    font-size: 1.8rem;
    line-height: 1;
}

.block-next-detail[b-pqelvl3ibf] {
    display: block;
    margin-top: 4px;
    font-size: max(0.88em, var(--font-size-min));
    color: var(--muted);
}

.baseline-row[b-pqelvl3ibf] {
    grid-template-columns: 7.5em 1fr auto;
}

/* ===== Practice plans ===== */
.plan-section[b-pqelvl3ibf],
.baselines-section[b-pqelvl3ibf],
.checklist-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.plan-section h4[b-pqelvl3ibf],
.baselines-section h4[b-pqelvl3ibf],
.checklist-section h4[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1.05em;
}

.plan-buttons[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}

.plan-btn[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-width: 4.5em;
}

.plan-preview[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-block[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-bg);
    border-left: 3px solid var(--accent);
}

.plan-block-head[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: max(0.9em, var(--font-size-min));
}

.plan-block-minutes[b-pqelvl3ibf] {
    margin-left: auto;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.plan-block-why[b-pqelvl3ibf] {
    font-size: max(0.8em, var(--font-size-min));
    color: var(--muted);
}

.unlockable-group-title[b-pqelvl3ibf] {
    margin: 12px 0 6px;
    font-size: max(0.78em, var(--font-size-min));
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ===== Goals ===== */
.goals-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.goals-section h4[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.05em;
}

.goal-editor[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--panel-bg);
}

.goal-list[b-pqelvl3ibf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.goal[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-head[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.goal-text[b-pqelvl3ibf] {
    flex: 1;
    font-size: max(0.9em, var(--font-size-min));
}

.goal.is-achieved .goal-text[b-pqelvl3ibf] {
    color: var(--gold);
}

.goal-remove[b-pqelvl3ibf] {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--muted);
    cursor: pointer;
    font-size: max(0.85em, var(--font-size-min));
}

.goal-remove:hover[b-pqelvl3ibf] {
    color: var(--warm);
}

.goal-detail[b-pqelvl3ibf] {
    font-size: max(0.8em, var(--font-size-min));
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Insights ===== */
.insights-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.insights-section h4[b-pqelvl3ibf] {
    margin: 0 0 10px;
    font-size: 1.05em;
}

.insight-list[b-pqelvl3ibf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.insight[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: max(0.9em, var(--font-size-min));
    line-height: 1.35;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--panel-bg);
    border-left: 3px solid var(--panel-line);
}

.insight-improvement[b-pqelvl3ibf] {
    border-left-color: var(--gold);
}

.insight-regression[b-pqelvl3ibf],
.insight-imbalance[b-pqelvl3ibf] {
    border-left-color: var(--warm);
}

.insight-icon[b-pqelvl3ibf] {
    flex: 0 0 auto;
}

/* ===== Practice time and commitment ===== */
.practice-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.practice-section h4[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.05em;
}

.link-btn[b-pqelvl3ibf] {
    background: none;
    border: none;
    padding: 0;
    color: var(--gold);
    font-family: inherit;
    font-size: max(0.78em, var(--font-size-min));
    letter-spacing: 0.04em;
    cursor: pointer;
}

.link-btn:hover[b-pqelvl3ibf] {
    text-decoration: underline;
}

/* ===== Weekly report card ===== */
.report-card[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-headline[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.report-headline-value[b-pqelvl3ibf] {
    font-size: 2.2rem;
    line-height: 1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.report-headline-label[b-pqelvl3ibf] {
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: max(0.85em, var(--font-size-min));
}

.report-delta[b-pqelvl3ibf] {
    margin-left: auto;
    font-size: max(0.85em, var(--font-size-min));
}

.report-delta.is-up[b-pqelvl3ibf] {
    color: var(--gold);
}

.report-delta.is-down[b-pqelvl3ibf] {
    color: var(--muted);
}

.report-figures[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 6px 14px;
}

.report-insights[b-pqelvl3ibf] {
    margin-top: 2px;
}

.practice-summary[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 12px;
}

.commitment[b-pqelvl3ibf] {
    margin-bottom: 12px;
}

.commitment-head[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

.commitment-label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: var(--muted);
}

.commitment-badge[b-pqelvl3ibf] {
    color: var(--gold);
    font-size: max(0.8em, var(--font-size-min));
    font-weight: 600;
    letter-spacing: 0.04em;
}

.commitment-track[b-pqelvl3ibf] {
    height: 8px;
    border-radius: 999px;
    background: var(--panel-line-soft);
    overflow: hidden;
}

.commitment-fill[b-pqelvl3ibf] {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.35s ease;
}

.commitment-fill.is-met[b-pqelvl3ibf] {
    background: var(--gold);
}

.commitment-note[b-pqelvl3ibf] {
    margin: 6px 0 0;
    font-size: max(0.85em, var(--font-size-min));
    color: var(--muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.commitment-note strong[b-pqelvl3ibf] {
    color: var(--gold);
}

/* Time by area: bars are relative to the busiest area, so the shape of the
   week reads at a glance rather than needing the numbers. */
.area-breakdown[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.area-breakdown-title[b-pqelvl3ibf] {
    font-size: max(0.8em, var(--font-size-min));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.area-row[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: 7.5em 1fr 3.5em;
    align-items: center;
    gap: 8px;
    font-size: max(0.85em, var(--font-size-min));
}

.area-name[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-bar[b-pqelvl3ibf] {
    height: 6px;
    border-radius: 999px;
    background: var(--panel-line-soft);
    overflow: hidden;
}

.area-bar-fill[b-pqelvl3ibf] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.area-minutes[b-pqelvl3ibf] {
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.settings-subhead[b-pqelvl3ibf] {
    margin: 6px 0 2px;
    font-size: 0.95em;
    letter-spacing: 0.04em;
}

/* ===== Achievements ===== */
.achievements-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.achievements-section h4[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 10px;
    font-size: 1.05em;
}

.achievement-count[b-pqelvl3ibf] {
    color: var(--gold);
    font-size: max(0.85em, var(--font-size-min));
    font-weight: 600;
}

.achievement-grid[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.achievement[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
}

/* Locked ones stay visible but recede, so they read as goals rather than clutter. */
.achievement.is-locked[b-pqelvl3ibf] {
    opacity: 0.42;
}

.achievement.is-unlocked[b-pqelvl3ibf] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.achievement-icon[b-pqelvl3ibf] {
    flex: 0 0 auto;
    font-size: 1.35em;
    line-height: 1.2;
}

.achievement.is-locked .achievement-icon[b-pqelvl3ibf] {
    filter: grayscale(1);
}

.achievement-text[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.achievement-name[b-pqelvl3ibf] {
    font-weight: 600;
}

.achievement-desc[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    color: var(--muted);
}

.achievement-date[b-pqelvl3ibf] {
    margin-top: 2px;
    font-size: max(0.78em, var(--font-size-min));
    color: var(--gold);
}

/* Fixed, like the storage warning, so the workspace grid rows are never disturbed. */
.achievement-toasts[b-pqelvl3ibf] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(90vw, 380px);
}

.achievement-toast[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--gold);
    border-radius: var(--radius-md);
    background: var(--panel-bg-strong);
    color: var(--text);
    box-shadow: var(--shadow);
}

.achievement-toast strong[b-pqelvl3ibf] {
    display: block;
    font-size: max(0.75em, var(--font-size-min));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.achievement-toast-icon[b-pqelvl3ibf] {
    font-size: 1.6em;
    line-height: 1;
}

.achievement-toast-name[b-pqelvl3ibf] {
    display: block;
    font-weight: 600;
}

.achievement-toast-desc[b-pqelvl3ibf] {
    display: block;
    font-size: max(0.85em, var(--font-size-min));
    color: var(--muted);
}

.achievement-toast-dismiss[b-pqelvl3ibf] {
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

/* ===== Practice-mode note picker (Settings dialog) ===== */
.setting-group-wide[b-pqelvl3ibf] {
    grid-column: 1 / -1;
}

.note-picker[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 132px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
}

/* Piano-ish colouring so the set reads like a keyboard rather than a word list. */
.note-chip[b-pqelvl3ibf] {
    min-width: 42px;
    padding: 5px 7px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 5px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: max(0.8em, var(--font-size-min));
    cursor: pointer;
}

.note-chip.is-sharp[b-pqelvl3ibf] {
    background: var(--ink);
    color: var(--paper);
}

.note-chip.is-selected[b-pqelvl3ibf] {
    border-color: var(--gold);
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.note-chip:hover[b-pqelvl3ibf] {
    border-color: var(--accent-bright);
}

.note-picker-actions[b-pqelvl3ibf] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.note-picker-actions .control-btn[b-pqelvl3ibf] {
    padding: 6px 12px;
    font-size: max(0.8em, var(--font-size-min));
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}

/* ===== Per-note accuracy chart (History drawer) ===== */
.note-accuracy-section[b-pqelvl3ibf] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.note-accuracy-section h4[b-pqelvl3ibf] {
    margin: 0 0 10px;
    font-size: 1.05em;
}

/* Scroll rather than squash: a full chromatic range needs the width. */
.note-difficulty-chart[b-pqelvl3ibf] {
    overflow-x: auto;
    color: var(--text);
}

.chart-empty[b-pqelvl3ibf] {
    margin: 0;
    color: var(--muted);
    font-size: max(0.9em, var(--font-size-min));
}

.progress-highlights[b-pqelvl3ibf] {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--success);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.progress-highlights-title[b-pqelvl3ibf] {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--success);
    letter-spacing: 0.03em;
}

.progress-highlights ul[b-pqelvl3ibf] {
    margin: 0;
    padding-left: 18px;
    font-size: max(0.9em, var(--font-size-min));
}

.weakest-notes[b-pqelvl3ibf] {
    margin: 8px 0 0;
    font-size: max(0.9em, var(--font-size-min));
    color: var(--muted);
}

.weakest-notes strong[b-pqelvl3ibf] {
    color: var(--warm);
}

/* Secondary line inside a settings label, e.g. "0 = off · 240 answers recorded". */
.setting-hint[b-pqelvl3ibf] {
    display: block;
    margin-top: 2px;
    font-size: max(0.85em, var(--font-size-min));
    opacity: 0.65;
}

.setting-value[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    opacity: 0.8;
}

.setting-group input[b-pqelvl3ibf],
.setting-group select[b-pqelvl3ibf] {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 14px;
}

.setting-group input:focus[b-pqelvl3ibf],
.setting-group select:focus[b-pqelvl3ibf] {
    outline: none;
    border-color: #60a5fa;
}

.setting-group.checkbox-group[b-pqelvl3ibf] {
    flex-direction: row;
    align-items: center;
    padding-top: 20px;
}

.setting-group.checkbox-group label[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1em;
}

.setting-group.checkbox-group input[type="checkbox"][b-pqelvl3ibf] {
    width: 18px;
    height: 18px;
    accent-color: #60a5fa;
    cursor: pointer;
}

.replay-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    color: #fff;
}

.staff-container[b-pqelvl3ibf] {
    position: relative;
}

.ear-training-hint[b-pqelvl3ibf] {
    text-align: center;
    font-size: max(0.85em, var(--font-size-min));
    color: #aaa;
    margin-top: 5px;
}

.clear-history-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
}

.history-period-selector[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--surface-sunken);
    border-radius: 10px;
}

.period-label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: #9ca3af;
    margin-right: 5px;
}

.period-btn[b-pqelvl3ibf] {
    padding: 6px 14px;
    font-size: max(0.85em, var(--font-size-min));
    font-weight: 500;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--line-faint);
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn:hover[b-pqelvl3ibf] {
    background: var(--line-faint);
    color: #fff;
}

.period-btn.active[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.history-stats[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.history-summary[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 15px;
    background: var(--surface-sunken);
    border-radius: 10px;
    width: 100%;
}

.summary-item[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-label[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    opacity: 0.8;
}

.summary-value[b-pqelvl3ibf] {
    font-size: 1.4em;
    font-weight: bold;
}

.summary-value.best[b-pqelvl3ibf] {
    color: #4ade80;
}

#historyCanvas[b-pqelvl3ibf] {
    background: rgba(30, 30, 50, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 16px var(--surface-sunken);
    max-width: 100%;
    height: auto;
}

.history-legend[b-pqelvl3ibf] {
    display: flex;
    gap: 25px;
    font-size: max(0.9em, var(--font-size-min));
}

.legend-item[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot[b-pqelvl3ibf] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.npm-dot[b-pqelvl3ibf] {
    background: #4ade80;
}

.accuracy-dot[b-pqelvl3ibf] {
    background: #60a5fa;
}

/* Drill Manager Styles */
.drill-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.current-drill-indicator[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(245, 158, 11, 0.2);
    border: 2px solid #f59e0b;
    border-radius: 10px;
    font-weight: bold;
}

.current-drill-indicator .drill-icon[b-pqelvl3ibf] {
    font-size: 1.2em;
}

.current-drill-indicator .drill-name[b-pqelvl3ibf] {
    color: #fbbf24;
}

.current-drill-indicator .drill-timer[b-pqelvl3ibf] {
    padding: 4px 10px;
    background: var(--surface-sunken);
    border-radius: 5px;
    font-family: monospace;
    font-size: 1.1em;
}

.clear-drill-btn[b-pqelvl3ibf] {
    background: transparent;
    border: none;
    color: #f87171;
    font-size: 1.2em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.clear-drill-btn:hover:not(:disabled)[b-pqelvl3ibf] {
    background: rgba(248, 113, 113, 0.2);
}

.drill-create-row[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.drill-name-input[b-pqelvl3ibf] {
    flex: 1 1 140px;
    min-width: 0;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--surface-sunken);
    color: #fff;
    font-size: 14px;
}

.drill-name-input:focus[b-pqelvl3ibf] {
    outline: none;
    border-color: #f59e0b;
}

.save-drill-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    white-space: nowrap;
}

.no-drills-message[b-pqelvl3ibf] {
    opacity: 0.7;
    font-style: italic;
    padding: 14px 0;
}

.drill-action-btn[b-pqelvl3ibf] {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.drill-action-btn.load-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
}

.drill-action-btn.stats-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
}

.drill-action-btn.delete-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: #fff;
}

.drill-action-btn:hover:not(:disabled)[b-pqelvl3ibf] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--surface-sunken);
}

.drill-action-btn:disabled[b-pqelvl3ibf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.drill-stats-section[b-pqelvl3ibf] {
    margin-top: 20px;
    padding: 15px;
    background: var(--surface-sunken);
    border-radius: 10px;
}

.drill-stats-summary[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background: var(--surface-sunken);
    border-radius: 8px;
    margin-bottom: 15px;
}

.stat-item[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    opacity: 0.8;
}

.stat-value[b-pqelvl3ibf] {
    font-size: 1.3em;
    font-weight: bold;
}

.stat-value.best[b-pqelvl3ibf] {
    color: #4ade80;
}

#drillStatsCanvas[b-pqelvl3ibf] {
    background: rgba(30, 30, 50, 0.8);
    border-radius: 10px;
    margin: 10px 0;
    max-width: 100%;
    height: auto;
}

.close-stats-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    margin-top: 10px;
}

/* End Game Screen */
.end-game-overlay[b-pqelvl3ibf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-pqelvl3ibf 0.3s ease;
}

.end-game-modal[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 30px 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(74, 222, 128, 0.1);
    border: 2px solid var(--line-faint);
    animation: slideUp-b-pqelvl3ibf 0.4s ease;
}

@keyframes slideUp-b-pqelvl3ibf {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.end-game-header[b-pqelvl3ibf] {
    text-align: center;
    margin-bottom: 25px;
}

.end-game-icon[b-pqelvl3ibf] {
    font-size: 3em;
    display: block;
    margin-bottom: 10px;
}

.end-game-header h2[b-pqelvl3ibf] {
    margin: 0;
    font-size: 2em;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.drill-badge[b-pqelvl3ibf] {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 15px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    border-radius: 20px;
    font-size: max(0.9em, var(--font-size-min));
    color: #fbbf24;
}

.end-game-stats[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: var(--surface-sunken);
}

.stat-card.primary[b-pqelvl3ibf] {
    border-left: 4px solid #3b82f6;
}

.stat-card.success[b-pqelvl3ibf] {
    border-left: 4px solid #4ade80;
}

.stat-card.danger[b-pqelvl3ibf] {
    border-left: 4px solid #f87171;
}

.stat-card.info[b-pqelvl3ibf] {
    border-left: 4px solid #a78bfa;
}

.stat-icon[b-pqelvl3ibf] {
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--line-faint);
    border-radius: 10px;
}

.stat-content[b-pqelvl3ibf] {
    flex: 1;
}

.stat-card .stat-value[b-pqelvl3ibf] {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
}

.stat-card .stat-label[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
    color: #9ca3af;
}

.end-game-details[b-pqelvl3ibf] {
    background: var(--surface-sunken);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.detail-row[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface-raised);
}

.detail-row:last-child[b-pqelvl3ibf] {
    border-bottom: none;
}

.detail-label[b-pqelvl3ibf] {
    color: #9ca3af;
}

.detail-value[b-pqelvl3ibf] {
    font-weight: bold;
    color: #fff;
}

.detail-value.highlight[b-pqelvl3ibf] {
    color: #4ade80;
    font-size: 1.1em;
}

.personal-best-banner[b-pqelvl3ibf] {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.2));
    border: 2px solid #f59e0b;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    color: #fbbf24;
    font-size: 1.1em;
    animation: pulse-b-pqelvl3ibf 2s ease-in-out infinite;
}

.end-game-actions[b-pqelvl3ibf] {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.end-game-actions .control-btn[b-pqelvl3ibf] {
    min-width: 120px;
}

.keyboard-hint[b-pqelvl3ibf] {
    margin-top: 20px;
    padding: 12px 20px;
    background: var(--surface-sunken);
    border-radius: 10px;
    text-align: center;
    font-size: max(0.9em, var(--font-size-min));
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hint-key[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: max(0.85em, var(--font-size-min));
}

.hint-key.white[b-pqelvl3ibf] {
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    color: #333;
    border: 1px solid #aaa;
    box-shadow: 0 2px 4px var(--surface-sunken);
}

.hint-key.black[b-pqelvl3ibf] {
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    color: #fff;
    border: 1px solid #555;
    box-shadow: 0 2px 4px var(--surface-sunken);
}

.hint-separator[b-pqelvl3ibf] {
    color: #6b7280;
    margin: 0 5px;
}

.keyboard-hint.disabled[b-pqelvl3ibf] {
    opacity: 0.6;
}

.keyboard-hint.enabled[b-pqelvl3ibf] {
    animation: fadeIn-b-pqelvl3ibf 0.3s ease;
}

.hint-waiting[b-pqelvl3ibf] {
    color: #9ca3af;
    font-style: italic;
}

/* MIDI File Panel Styles */
.midi-file-panel[b-pqelvl3ibf] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border: 2px solid #60a5fa;
    border-radius: 12px;
    padding: 15px 20px;
    margin: 10px 0;
    max-width: 600px;
    width: 100%;
}

.midi-file-header[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.midi-icon[b-pqelvl3ibf] {
    font-size: 1.5em;
}

.midi-title[b-pqelvl3ibf] {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
}

.midi-file-controls[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.midi-file-input[b-pqelvl3ibf] {
    display: none;
}

.midi-file-label[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-sunken);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ccc;
}

.midi-file-label:hover[b-pqelvl3ibf] {
    background: rgba(0, 0, 0, 0.4);
    border-color: #60a5fa;
    color: #fff;
}

.midi-file-info[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    background: var(--surface-sunken);
    border-radius: 8px;
}

.midi-info-row[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.midi-info-row .info-label[b-pqelvl3ibf] {
    font-size: max(0.75em, var(--font-size-min));
    color: #888;
    text-transform: uppercase;
}

.midi-info-row .info-value[b-pqelvl3ibf] {
    font-size: 1em;
    font-weight: bold;
    color: #fff;
}

.midi-track-select[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.midi-track-select label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: #ccc;
}

.midi-track-select select[b-pqelvl3ibf] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.midi-scroll-speed[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.midi-scroll-speed label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: #ccc;
    min-width: 90px;
}

.midi-scroll-speed input[type="range"][b-pqelvl3ibf] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.midi-scroll-speed span[b-pqelvl3ibf] {
    min-width: 60px;
    text-align: right;
    font-size: max(0.85em, var(--font-size-min));
    color: #60a5fa;
}

.midi-playback-speed[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.midi-playback-speed label[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: #ccc;
    min-width: 90px;
}

.midi-playback-speed input[type="range"][b-pqelvl3ibf] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.midi-playback-speed span[b-pqelvl3ibf] {
    min-width: 60px;
    text-align: right;
    font-size: max(0.85em, var(--font-size-min));
    color: #f59e0b;
    font-weight: bold;
}

.midi-playback-controls[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--line-faint);
}

.play-midi-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: #22c55e !important;
}

.play-midi-btn:hover:not(:disabled)[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
}

.stop-midi-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
}

.stop-midi-btn:hover[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

.midi-position[b-pqelvl3ibf] {
    font-family: 'Consolas', monospace;
    font-size: max(0.9em, var(--font-size-min));
    color: #888;
}

/* The design palette (--accent, --paper, --eb-* ...) is declared globally on
   :root in MusicReaderGame/wwwroot/app.css, not here. It has to be inheritable
   by the ElectricBlazor overlays, which render outside this component's DOM
   subtree. Theme is selected via data-theme on <html> in App.razor. */
.note-trainer[b-pqelvl3ibf] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "appbar"
        "workspace"
        "controlbar"
        "statsbar";
    gap: 14px;
    width: 100%;
    min-height: 100vh;
    padding: 14px 18px 18px;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 67% -20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 38%),
        radial-gradient(circle at 0 100%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 34%),
        linear-gradient(150deg, var(--page-bg), var(--page-bg-soft) 52%, var(--page-bg));
    font-family: var(--font-body);
    font-size: var(--font-base);
}

.note-trainer[b-pqelvl3ibf],
.note-trainer *[b-pqelvl3ibf] {
    box-sizing: border-box;
}

.note-trainer button[b-pqelvl3ibf],
.note-trainer select[b-pqelvl3ibf] {
    font: inherit;
}

.note-trainer button[b-pqelvl3ibf] {
    color: inherit;
}

.field-label[b-pqelvl3ibf] {
    color: #d5cbc0;
    font-size: 14px;
    white-space: nowrap;
}

.field-value[b-pqelvl3ibf] {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

.field-icon[b-pqelvl3ibf] {
    color: #fff1cf;
    font-size: 19px;
}

.theme-menu-wrap[b-pqelvl3ibf] {
    position: relative;
}

.round-menu[b-pqelvl3ibf] {
    width: 51px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 3px solid var(--panel-line);
    border-radius: 50%;
    color: var(--accent-soft);
    background: rgba(2,11,18,.82);
    cursor: pointer;
    font-size: 21px;
}

.round-menu:hover[b-pqelvl3ibf] {
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-bg));
}

.theme-popover[b-pqelvl3ibf] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    width: 176px;
    padding: 10px;
    border: 3px solid var(--panel-line);
    border-radius: 12px;
    background: #07131d;
    box-shadow: 0 18px 45px rgba(0,0,0,.42);
}

.theme-popover-title[b-pqelvl3ibf] {
    padding: 3px 7px 8px;
    color: var(--muted);
    font-size: max(12px, var(--font-size-min));
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.theme-option[b-pqelvl3ibf] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.theme-option:hover[b-pqelvl3ibf],
.theme-option.is-selected[b-pqelvl3ibf] {
    background: rgba(255,255,255,.07);
}

.theme-swatch[b-pqelvl3ibf] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

.stop-square[b-pqelvl3ibf] {
    width: 13px;
    height: 13px;
    background: #f1e8d7;
}

.utility-icon[b-pqelvl3ibf] {
    color: #f2dcae;
    font-size: 24px;
}

.workspace[b-pqelvl3ibf] {
    grid-area: workspace;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(300px, 1.45fr) minmax(220px, .95fr) minmax(150px, .58fr);
    gap: 16px;
}

/* ===== Zen mode =====
   Strips the layout back to staff + keyboard. Purely presentational: the grid collapses to
   a single column and the hidden regions are removed from the grid rather than just made
   invisible, so the remaining cards actually get the space. */
.note-trainer[data-zen="true"][b-pqelvl3ibf] {
    grid-template-columns: minmax(0, 1fr);
    /* Must reset rows too: the default is `auto minmax(0, 1fr)` for the top bar, and
       leaving it would park the workspace in the auto row and waste the reclaimed height. */
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "workspace";
    padding: 12px;
    gap: 0;
}


.zen-exit[b-pqelvl3ibf] {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid var(--panel-line);
    border-radius: var(--radius-md);
    background: var(--panel-bg-strong);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.zen-exit:hover[b-pqelvl3ibf],
.zen-exit:focus-visible[b-pqelvl3ibf] {
    opacity: 1;
    border-color: var(--gold);
}

.zen-exit-label[b-pqelvl3ibf] {
    font-size: max(0.85em, var(--font-size-min));
}

/* Storage warning.
   Deliberately fixed rather than a grid child: .workspace has three explicitly sized rows,
   so a conditional fourth child would shift the staff/keyboard/stats cards out of their
   rows whenever it appeared. */
.storage-warnings[b-pqelvl3ibf] {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(90vw, 720px);
}

.storage-warning[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--warm);
    border-radius: var(--radius-md);
    background: var(--panel-bg-strong);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: 0.95em;
    line-height: 1.35;
}

.storage-warning-icon[b-pqelvl3ibf] {
    flex: 0 0 auto;
    font-size: 1.25em;
    color: var(--warm);
}

.storage-warning-dismiss[b-pqelvl3ibf] {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.storage-warning-dismiss:hover[b-pqelvl3ibf] {
    color: var(--text);
    border-color: var(--panel-line);
}

.corner-stripes[b-pqelvl3ibf] {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.corner-stripes i[b-pqelvl3ibf] {
    display: block;
    height: 3px;
    background: var(--accent);
}

.corner-stripes i:nth-child(1)[b-pqelvl3ibf] { width: 105px; }
.corner-stripes i:nth-child(2)[b-pqelvl3ibf] { width: 88px; }
.corner-stripes i:nth-child(3)[b-pqelvl3ibf] { width: 72px; }
.corner-stripes i:nth-child(4)[b-pqelvl3ibf] { width: 54px; }
.corner-stripes i:nth-child(5)[b-pqelvl3ibf] { width: 35px; }

.corner-arc[b-pqelvl3ibf] {
    position: absolute;
    z-index: 1;
    top: -88px;
    right: -72px;
    width: 260px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 70%, color-mix(in srgb, var(--secondary) 78%, white 22%), var(--secondary-dark));
}

.staff-dot-field[b-pqelvl3ibf] {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 17px;
    width: 90px;
    height: 78px;
    background-image: radial-gradient(circle, var(--warm) 3px, transparent 3.4px);
    background-size: 17px 17px;
}

.staff[b-pqelvl3ibf] {
    position: absolute;
    inset: 19% 7.5% 14% 5.3%;
}

.staff-lines[b-pqelvl3ibf] {
    position: absolute;
    top: 28%;
    right: 0;
    left: 0;
    display: grid;
    gap: clamp(22px, 3.2vh, 34px);
}

.staff-lines span[b-pqelvl3ibf] {
    display: block;
    height: 3px;
    background: var(--ink);
}

.clef-glyph[b-pqelvl3ibf] {
    position: absolute;
    z-index: 3;
    top: 4%;
    left: 2.4%;
    color: var(--ink);
    font-family: "Segoe UI Symbol", "Noto Music", serif;
    font-size: clamp(145px, 15vw, 245px);
    line-height: 1;
    transform: scaleX(.82);
    transform-origin: left center;
}

.staff-note[b-pqelvl3ibf] {
    position: absolute;
    z-index: 4;
    left: var(--note-x);
    top: var(--note-y);
    width: 24px;
    height: 76px;
    transform: translate(-50%, -50%);
}

.note-head[b-pqelvl3ibf] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink);
    transform: rotate(-12deg);
}

.note-stem[b-pqelvl3ibf] {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 3px;
    height: 64px;
    background: var(--ink);
}

.white-keys[b-pqelvl3ibf] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
}

.white-key[b-pqelvl3ibf] {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 2px 28px;
    border: 0;
    border-right: 1px solid #aeb3b9;
    color: #111820;
    background: linear-gradient(180deg, #fff 0%, #fafafa 55%, #f5f5f5 100%);
    cursor: pointer;
    font-size: clamp(13px, 1.25vw, 19px);
    font-weight: 750;
}

.white-key:last-child[b-pqelvl3ibf] {
    border-right: 0;
}

.white-key:hover[b-pqelvl3ibf],
.white-key.is-selected[b-pqelvl3ibf] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, white), color-mix(in srgb, var(--accent) 19%, white));
}

.white-key.is-c[b-pqelvl3ibf] {
    color: var(--accent);
}

.black-key[b-pqelvl3ibf] {
    --black-key-width: calc((100% / 14) * .59);
    position: absolute;
    z-index: 5;
    top: 0;
    left: calc((100% / 14) * var(--key-boundary) - (var(--black-key-width) / 2));
    width: var(--black-key-width);
    height: 56%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px 20px;
    border: 1px solid #4f565e;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    color: #f9f5ec;
    background: linear-gradient(90deg, #090c10, #1a2026 54%, #070a0e);
    box-shadow: 0 7px 8px rgba(0,0,0,.34), inset 0 -4px 0 rgba(255,255,255,.055);
    cursor: pointer;
    font-size: clamp(9px, .9vw, 13px);
    font-weight: 700;
    line-height: 1.15;
}

.black-key small[b-pqelvl3ibf] {
    font-size: max(.84em, var(--font-size-min));
}

.black-key:hover[b-pqelvl3ibf],
.black-key.is-selected[b-pqelvl3ibf] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, #19131f), #0b0a0e);
    box-shadow: 0 7px 9px rgba(0,0,0,.38), inset 0 -4px 0 color-mix(in srgb, var(--accent) 30%, transparent);
}

.tempo-stat h2[b-pqelvl3ibf] {
    color: var(--accent-bright);
}

.tempo-content[b-pqelvl3ibf] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(115px, .8fr) minmax(110px, 1.2fr);
    align-items: end;
    gap: 15px;
    margin-top: 14px;
}

.tempo-content dl[b-pqelvl3ibf] {
    margin: 0;
}

.tempo-content dl > div[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    margin: 9px 0;
}

.tempo-content dt[b-pqelvl3ibf],
.tempo-content dd[b-pqelvl3ibf] {
    margin: 0;
    font-size: 14px;
}

.tempo-content dd[b-pqelvl3ibf] {
    font-weight: 700;
}

.sparkline[b-pqelvl3ibf] {
    position: relative;
    min-width: 0;
    height: 84px;
    margin: 0 8px 4px 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 58%, transparent) 1px, transparent 1.4px);
    background-size: 9px 9px;
}

/* Theme EbGraph via its tier-2 tokens and force it to fill the fixed-height
   sparkline box (overriding the component's own default responsive
   max-width:100%/height:auto sizing, which is aspect-ratio-locked). */
.sparkline[b-pqelvl3ibf]  .sparkline-graph {
    --eb-graph-bg: transparent;
    --eb-graph-border: none;
    --eb-graph-radius: 0;
    --eb-graph-line-color: var(--accent-bright);
    --eb-graph-line-width: 2;
    --eb-graph-point-color: var(--accent-bright);
    --eb-graph-point-stroke: rgba(255, 255, 255, .5);
    --eb-graph-point-stroke-width: 2;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

/* ===== Rhythm-mode stats (combo + last hit grade) =====
   These take the response-stat slot in timing-scored modes, so they reuse its layout. */
.combo-stat[b-pqelvl3ibf],
.judgment-stat[b-pqelvl3ibf],
.response-stat[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.combo-stat h2[b-pqelvl3ibf],
.judgment-stat h2[b-pqelvl3ibf] {
    align-self: stretch;
    margin: -1px -22px 13px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.combo-stat strong[b-pqelvl3ibf] {
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
}

.combo-best[b-pqelvl3ibf] {
    margin-top: 4px;
    color: var(--muted);
    font-size: max(0.85em, var(--font-size-min));
    letter-spacing: 0.04em;
}

.judgment-stat strong[b-pqelvl3ibf] {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1;
    letter-spacing: 0.05em;
}

/* Grade colours run good -> bad so the readout is legible at a glance. */
.judgment-perfect[b-pqelvl3ibf] { color: var(--success); }
.judgment-great[b-pqelvl3ibf]   { color: var(--secondary); }
.judgment-good[b-pqelvl3ibf]    { color: var(--gold); }
.judgment-ok[b-pqelvl3ibf]      { color: var(--accent-soft); }
.judgment-miss[b-pqelvl3ibf]    { color: var(--warm); }
.judgment-none[b-pqelvl3ibf]    { color: var(--muted); }

.response-stat h2[b-pqelvl3ibf] {
    align-self: stretch;
    margin: -1px -22px 13px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.response-stat strong[b-pqelvl3ibf] {
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
}

.response-stat strong span[b-pqelvl3ibf] {
    margin-left: 1px;
    font-size: max(.62em, var(--font-size-min));
}

.response-star[b-pqelvl3ibf] {
    margin-top: 10px;
    color: var(--warm);
    font-size: 27px;
}

.score-stat[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.score-stat h2[b-pqelvl3ibf] {
    text-transform: none;
    letter-spacing: 0;
}

.score-stat strong[b-pqelvl3ibf] {
    margin-top: 15px;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1;
}

.correct-stat h2[b-pqelvl3ibf],
.correct-stat strong[b-pqelvl3ibf] {
    color: var(--success);
}

.incorrect-stat h2[b-pqelvl3ibf],
.incorrect-stat strong[b-pqelvl3ibf] {
    color: var(--warm);
}

.stats-decoration[b-pqelvl3ibf] {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
}

.stats-dot-field[b-pqelvl3ibf] {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 105px;
    height: 78px;
    background-image: radial-gradient(circle, var(--warm) 2.5px, transparent 2.8px);
    background-size: 15px 15px;
}

.rainbow-arcs[b-pqelvl3ibf] {
    position: absolute;
    right: -70px;
    bottom: -78px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 2px solid var(--secondary);
    background:
        radial-gradient(circle, var(--accent) 0 44%, transparent 45%),
        repeating-radial-gradient(circle, transparent 0 12px, var(--secondary) 13px 14px);
}

@media (max-width: 1280px) {
    .note-trainer[b-pqelvl3ibf] {
        --sidebar-width: 195px;
    }

    .field-label[b-pqelvl3ibf] {
        font-size: max(12px, var(--font-size-min));
    }

}

@media (max-width: 1050px) {
    /* Below this the rows stop competing for a fixed viewport and the page scrolls
       instead, so the stage keeps a workable height rather than being squeezed. */
    .note-trainer[b-pqelvl3ibf] {
        min-height: auto;
        overflow: visible;
        grid-template-rows: auto minmax(420px, auto) auto auto;
    }
}

@media (max-width: 820px) {
    .note-trainer[b-pqelvl3ibf] {
        display: flex;
        flex-direction: column;
        padding: 12px;
        overflow: visible;
    }

    .workspace[b-pqelvl3ibf] {
        order: 3;
        grid-template-rows: 300px 220px auto;
    }

    .stats-decoration[b-pqelvl3ibf] {
        min-height: 150px;
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .round-menu[b-pqelvl3ibf] {
        position: absolute;
        right: 0;
        top: -64px;
    }

    .workspace[b-pqelvl3ibf] {
        grid-template-rows: 250px 180px auto;
    }

    .clef-glyph[b-pqelvl3ibf] {
        font-size: 130px;
    }

    .staff-lines[b-pqelvl3ibf] {
        gap: 22px;
    }

    .white-key[b-pqelvl3ibf] {
        padding-bottom: 18px;
        font-size: max(11px, var(--font-size-min));
    }

    .black-key[b-pqelvl3ibf] {
        height: 58%;
        padding-bottom: 12px;
        font-size: max(8px, var(--font-size-min));
    }

    .stats-decoration[b-pqelvl3ibf] {
        grid-column: auto;
    }
}


/* ============================================================
   Overrides so the real interactive game pieces (canvas-based
   staff, MusicStaff component, MidiKeyboard, GuitarFretboard)
   sit nicely inside the redesigned mockup layout above.
   ============================================================ */

/* The canvas-based staff sizes itself via JS (musicReaderGame.js) to fill
   this container as large as possible while staying crisp; the SVG-based
   MusicStaff component fills it fluidly via width/height:100% + viewBox. */
/* Panels that don't have a mockup equivalent yet (MIDI file playback) render
   below the redesigned workspace using their original dark styling. Settings is
   an EbDialog; drills and history moved into the practice hub, which sizes its
   own sections rather than leaving them in the main page flow. */
.midi-file-panel[b-pqelvl3ibf] {
    width: 100%;
    max-width: 1400px;
    margin: 18px auto 0;
    color: var(--text, #f6f0e6);
}

/* ===== ElectricBlazor component integration =====
   EbDialog renders outside this component's DOM subtree, so scoped CSS
   (including ::deep) cannot reach it. Its sizing and typography rules live
   globally in MusicReaderGame.Client/wwwroot/app.css instead. The practice hub
   is deliberately NOT an EbDialog for exactly this reason - see the hub block
   at the end of this file. */


/* ===== Keyboard skin editor ===== */
.skin-editor[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skin-presets[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.skin-presets .control-btn[b-pqelvl3ibf] {
    padding: 6px 12px;
    font-size: max(0.8em, var(--font-size-min));
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}

.skin-group-title[b-pqelvl3ibf] {
    margin: 4px 0 0;
    font-size: max(0.9em, var(--font-size-min));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.skin-vars[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.skin-var[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: max(0.88em, var(--font-size-min));
}

.skin-var-label[b-pqelvl3ibf] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skin-var input[type="color"][b-pqelvl3ibf] {
    flex: 0 0 auto;
    width: 44px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--panel-line-soft);
    border-radius: 5px;
    background: none;
    cursor: pointer;
}

.skin-var input[type="text"][b-pqelvl3ibf] {
    flex: 0 1 110px;
    min-width: 0;
}

.skin-css[b-pqelvl3ibf] {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    background: var(--surface-sunken);
    color: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: max(12px, var(--font-size-min));
    resize: vertical;
}

.skin-list[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skin-item[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
}

.skin-item-actions[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
}

.skin-item-actions .control-btn[b-pqelvl3ibf] {
    padding: 4px 10px;
    font-size: max(0.78em, var(--font-size-min));
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}

.skin-footer[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skin-footer .control-btn[b-pqelvl3ibf] {
    padding: 8px 14px;
    font-size: max(0.85em, var(--font-size-min));
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
    cursor: pointer;
}

.skin-footer .apply-btn[b-pqelvl3ibf] {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    margin-top: 0;
}

/* ===== Scale drill readout ===== */
.scale-stat[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.scale-stat h2[b-pqelvl3ibf] {
    align-self: stretch;
    margin: -1px -22px 10px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--secondary-dark), var(--accent));
}

.scale-name[b-pqelvl3ibf] {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 28px);
    line-height: 1.1;
    color: var(--gold);
}

/* One pip per step, so progress through the scale is legible at a glance. */
.scale-steps[b-pqelvl3ibf] {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.scale-step[b-pqelvl3ibf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 22%, transparent);
}

.scale-step.is-done[b-pqelvl3ibf] {
    background: var(--success);
}

.scale-step.is-current[b-pqelvl3ibf] {
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}

.scale-progress[b-pqelvl3ibf] {
    margin-top: 6px;
    color: var(--muted);
    font-size: max(0.78em, var(--font-size-min));
}

/* ===== Chord drill prompt ===== */
.chord-prompt[b-pqelvl3ibf] {
    position: absolute;
    inset: 6px 6px auto 6px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.chord-prompt-label[b-pqelvl3ibf] {
    font-size: max(0.75em, var(--font-size-min));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.chord-prompt-name[b-pqelvl3ibf] {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1;
    color: var(--ink);
}

.chord-prompt-hint[b-pqelvl3ibf] {
    font-size: max(0.82em, var(--font-size-min));
    color: var(--muted);
}

/* One slot per chord tone, filling as notes are gathered. */
.chord-pending[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.chord-slot[b-pqelvl3ibf] {
    min-width: 34px;
    padding: 3px 6px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 5px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--muted);
    font-size: max(0.85em, var(--font-size-min));
    text-align: center;
}

.chord-slot.is-filled[b-pqelvl3ibf] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    color: var(--ink);
    font-weight: 600;
}

/* ===== Key identification prompt ===== */
.key-prompt[b-pqelvl3ibf] {
    position: absolute;
    inset: 6px 6px auto 6px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ink);
}

.key-signature-display[b-pqelvl3ibf] {
    width: min(300px, 70%);
    color: var(--ink);
}

.key-prompt-question[b-pqelvl3ibf] {
    font-family: var(--font-body);
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: 600;
}

.key-choices[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.key-choice[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 14px;
    border: 2px solid var(--panel-line);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.key-choice:hover[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.key-choice-minor[b-pqelvl3ibf] {
    font-size: max(0.8em, var(--font-size-min));
    font-weight: 400;
    opacity: 0.7;
}

.key-feedback[b-pqelvl3ibf] {
    font-size: max(0.9em, var(--font-size-min));
    color: var(--warm);
}

/* ----- Audio effects / synth panels ---------------------------------------- */

.audio-panel-btn[b-pqelvl3ibf] {
    background: none;
    border: 1px solid var(--panel-border, var(--line-faint));
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    align-self: center;
}

.audio-panel-btn:hover[b-pqelvl3ibf] {
    border-color: var(--accent);
}

.audio-panel-btn.is-open[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Locked feature: readable as "not yet" rather than "broken". */
.audio-panel-btn.is-locked[b-pqelvl3ibf] {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
}

.audio-panel-btn.is-locked:hover[b-pqelvl3ibf] {
    border-color: var(--panel-border, var(--line-faint));
}

.audio-panel-body[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
    overflow-y: auto;
}

.fx-group[b-pqelvl3ibf] {
    border: 1px solid var(--panel-border, rgba(128, 128, 128, 0.35));
    border-radius: 8px;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.fx-group legend[b-pqelvl3ibf] {
    font-weight: 600;
    padding: 0 6px;
}

.fx-group legend label[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.audio-panel-body input[type="range"][b-pqelvl3ibf] {
    width: 100%;
    accent-color: var(--accent);
}

.audio-panel-body .setting-group label[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.fx-footer[b-pqelvl3ibf] {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.panel-close-btn[b-pqelvl3ibf] {
    background: none;
    border: 0;
    padding: 2px 6px;
    font: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.panel-close-btn:hover[b-pqelvl3ibf] {
    opacity: 1;
}

/* ----- Keyboard layout editor ---------------------------------------------- */

.layout-editor[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.layout-editor input[type="range"][b-pqelvl3ibf] {
    width: 100%;
    accent-color: var(--accent);
}

.layout-editor .setting-group label[b-pqelvl3ibf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.keyboard-clip-warning[b-pqelvl3ibf] {
    color: var(--warm, #e0a458);
    font-weight: 600;
}

.layout-range-hint[b-pqelvl3ibf] {
    opacity: 0.8;
}

/* ----- Unlockables --------------------------------------------------------- */

.control-btn.is-locked[b-pqelvl3ibf] {
    opacity: 0.45;
    cursor: not-allowed;
}

.unlockable-kind[b-pqelvl3ibf] {
    font-size: max(0.75em, var(--font-size-min));
    font-weight: 400;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 4px;
}

/* ----- Account profile menu ------------------------------------------------ */

.round-menu.profile-active[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    font-weight: 700;
}

/* ===========================================================================
   The practice hub
   ---------------------------------------------------------------------------
   One full-screen surface with three tabs, replacing the pair of EbEdgeTab
   drawers this used to be.

   Unlike EbDialog and EbEdgeTab, this overlay is plain markup rendered by this
   component, so scoped CSS reaches it normally - no need to push these rules
   out to the global app.css the way the ElectricBlazor overlays require. It
   does sit outside `.note-trainer` though, so the resets declared there
   (box-sizing, font) do not inherit and are restated here.
   =========================================================================== */

.hub-overlay[b-pqelvl3ibf] {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 3vh, 40px) clamp(8px, 3vw, 40px);
    background: color-mix(in srgb, var(--panel-bg-strong) 78%, transparent);
    backdrop-filter: blur(6px);
    animation: hub-fade-b-pqelvl3ibf 140ms ease-out;
}

.hub-overlay[b-pqelvl3ibf],
.hub-overlay *[b-pqelvl3ibf] {
    box-sizing: border-box;
}

@keyframes hub-fade-b-pqelvl3ibf {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hub-shell[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    width: min(1240px, 100%);
    max-height: 100%;
    overflow: hidden;
    border: 1px solid var(--panel-line-soft);
    border-radius: 18px;
    background: var(--panel-bg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color: var(--text, #f6f0e6);
    font-family: inherit;
}

/* Focused programmatically so Escape lands somewhere; the ring would just be
   noise on a sheet this size. */
.hub-shell:focus[b-pqelvl3ibf] {
    outline: none;
}

.hub-header[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px clamp(14px, 2.4vw, 28px);
    border-bottom: 1px solid var(--panel-line-soft);
    background: var(--panel-bg-strong);
}

.hub-heading[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hub-eyebrow[b-pqelvl3ibf] {
    font-size: max(0.72em, var(--font-size-min));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.hub-title[b-pqelvl3ibf] {
    margin: 0;
    font-size: 1.6em;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hub-tabs[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.hub-tab[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: max(0.92em, var(--font-size-min));
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.hub-tab:hover[b-pqelvl3ibf] {
    background: var(--surface-hover);
}

.hub-tab.is-active[b-pqelvl3ibf] {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
}

.hub-tab-icon[b-pqelvl3ibf] {
    font-size: 1.05em;
}

.hub-tab-badge[b-pqelvl3ibf] {
    min-width: 1.5em;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: max(0.75em, var(--font-size-min));
    font-weight: 700;
    text-align: center;
}

.hub-tab.is-active .hub-tab-badge[b-pqelvl3ibf] {
    background: var(--ink);
    color: var(--gold);
}

.hub-close[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1em;
    cursor: pointer;
}

.hub-close:hover[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: var(--surface-hover);
}

/* The point of the whole change: full width means sections tile instead of
   stacking into one very tall column. Wide content spans every track. */
.hub-body[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-content: start;
    align-items: start;
    gap: 16px;
    overflow-y: auto;
    padding: clamp(14px, 2.4vw, 26px);
}

.hub-body > *[b-pqelvl3ibf] {
    min-width: 0;
}

.hub-body > .history-heading[b-pqelvl3ibf],
.hub-body > .history-period-selector[b-pqelvl3ibf],
.hub-body > .history-stats[b-pqelvl3ibf],
.hub-body > .drills-section[b-pqelvl3ibf],
.hub-body > .note-accuracy-section[b-pqelvl3ibf],
.hub-body > .achievements-section[b-pqelvl3ibf] {
    grid-column: 1 / -1;
}

/* Each section came from a single-column drawer, where a top border was the
   separator. Side by side in a grid they need to read as cards instead. */
.hub-body > div[b-pqelvl3ibf] {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 14px;
    background: var(--surface-raised);
}

.hub-body > .history-heading[b-pqelvl3ibf],
.hub-body > .history-period-selector[b-pqelvl3ibf] {
    padding: 0;
    border: 0;
    background: none;
}

.history-heading[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.history-heading h3[b-pqelvl3ibf] {
    margin: 0;
    font-size: 1.25em;
}

/* ----- Drills ---------------------------------------------------------------
   A card grid rather than the 440px single-column list the drawer allowed. */

.drills-section > .setting-hint[b-pqelvl3ibf] {
    max-width: 62ch;
}

.drill-grid[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.drill-card[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 12px;
    background: var(--surface-raised);
}

.drill-card.is-active[b-pqelvl3ibf] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* Presets are visibly not yours - a dashed edge reads as "template" without
   needing a label on every card. */
.drill-card.is-preset[b-pqelvl3ibf] {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.02);
}

.drill-card-name[b-pqelvl3ibf] {
    margin: 0;
    font-size: 1.02em;
    font-weight: 700;
}

.drill-card-detail[b-pqelvl3ibf] {
    margin: 0;
    font-size: max(0.82em, var(--font-size-min));
    opacity: 0.8;
}

.drill-card-stats[b-pqelvl3ibf] {
    margin: 0 0 6px;
    font-size: max(0.78em, var(--font-size-min));
    opacity: 0.6;
}

.drill-card-actions[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.drill-preset-title[b-pqelvl3ibf] {
    margin: 22px 0 0;
}

/* ----- Drills in the sidebar ------------------------------------------------ */

/* The sidebar column sets the height of the whole layout, so this list is given a
   fixed budget and scrolls inside it rather than growing as drills are added.
   The budget is four 32px rows plus their gaps - matching SidebarDrillLimit, so
   the cap never clips a row it also chose to render. */
/* ----- Getting started, on the main screen ----------------------------------
   Occupies the stats row until the first run is recorded. */

.starter-card[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 40px);
    flex-wrap: wrap;
    padding: 18px clamp(16px, 2.4vw, 30px);
    border: 1px solid var(--gold);
    border-radius: 16px;
    background: color-mix(in srgb, var(--gold) 10%, var(--panel-bg));
}

.starter-copy[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: min(100%, 240px);
    flex: 1 1 260px;
}

.starter-eyebrow[b-pqelvl3ibf] {
    font-size: max(0.72em, var(--font-size-min));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.starter-title[b-pqelvl3ibf] {
    margin: 0;
    font-size: clamp(1.3em, 2.4vw, 1.9em);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.starter-detail[b-pqelvl3ibf] {
    margin: 0;
    font-size: max(0.88em, var(--font-size-min));
    opacity: 0.75;
}

.starter-actions[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.starter-cta[b-pqelvl3ibf] {
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: inherit;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.starter-cta:hover[b-pqelvl3ibf] {
    filter: brightness(1.08);
}

.starter-all[b-pqelvl3ibf] {
    padding: 10px 16px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: max(0.86em, var(--font-size-min));
    cursor: pointer;
}

.starter-all:hover[b-pqelvl3ibf] {
    border-color: var(--gold);
}

.starter-dots[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.starter-dot[b-pqelvl3ibf] {
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    opacity: 0.4;
}

.starter-dot.is-done[b-pqelvl3ibf] {
    background: var(--gold);
    opacity: 1;
}

.starter-dot.is-current[b-pqelvl3ibf] {
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* ----- Setup chip, top bar ---------------------------------------------------
   Where setup lives once the starter card has handed the stats row back. */

.setup-chip[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.setup-chip:hover[b-pqelvl3ibf] {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
}

.setup-chip-ring[b-pqelvl3ibf] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(var(--gold) var(--setup-progress, 0%),
                               var(--line-faint) 0);
    /* Punch the middle out so it reads as a ring rather than a pie. */
    mask: radial-gradient(circle, transparent 45%, #000 46%);
    -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%);
}

.setup-chip-copy[b-pqelvl3ibf] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.setup-chip-label[b-pqelvl3ibf] {
    font-size: max(0.72em, var(--font-size-min));
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.8;
}

.setup-chip-count[b-pqelvl3ibf] {
    font-weight: 700;
    font-size: max(0.9em, var(--font-size-min));
}

/* ----- Save-as-drill, in Settings -------------------------------------------- */

.settings-footer[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line-soft);
}

.settings-footer .setting-hint[b-pqelvl3ibf] {
    margin: 0;
    flex: 1 1 240px;
}

/* ----- Narrow viewports ------------------------------------------------------ */

@media (max-width: 780px) {
    .hub-overlay[b-pqelvl3ibf] {
        padding: 0;
    }

    .hub-shell[b-pqelvl3ibf] {
        max-height: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .hub-header[b-pqelvl3ibf] {
        gap: 10px;
    }

    .hub-tabs[b-pqelvl3ibf] {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .hub-tab[b-pqelvl3ibf] {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 8px;
    }

    .starter-card[b-pqelvl3ibf] {
        gap: 14px;
    }
}

/* ===========================================================================
   The practice launcher
   ---------------------------------------------------------------------------
   The single door into playing, and the only place a drill is defined. Two
   panes side by side: pick something, or open the setup and build it. The
   setup pane slides in rather than replacing the picker, so the thing you
   were doing stays on screen.

   Like the hub, this is plain markup rather than an EbDialog, so scoped CSS
   reaches it. It sits outside `.note-trainer`, so the resets declared there
   do not inherit and are restated.
   =========================================================================== */


.launcher-overlay[b-pqelvl3ibf],






/* ----- Pane one: pick something ---------------------------------------------- */







/* The one thing on screen that should be unmissable. */





/* ----- Pane two: build it ---------------------------------------------------- */










/* ----- The primary action, in the sidebar ------------------------------------
   Replaces the eleven-item mode nav that used to hold this space. */

/* Says what will happen if you press the button above it - the only thing on
   screen that does, now that mode and clef are not permanent chrome. */
/* ----- Preferences ------------------------------------------------------------ */

.prefs-pointer[b-pqelvl3ibf] {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--panel-line-soft);
}

/* ----- Narrow viewports ------------------------------------------------------- */

@media (max-width: 900px) {
    .launcher-overlay[b-pqelvl3ibf] {
        padding: 0;
    }

    .launcher-shell[b-pqelvl3ibf] {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
    }

    .launcher-pick[b-pqelvl3ibf],
    .launcher-setup[b-pqelvl3ibf] {
        width: 100%;
    }

    .launcher-setup[b-pqelvl3ibf] {
        border-left: 0;
        border-top: 1px solid var(--panel-line-soft);
        animation: none;
    }
}

/* ===========================================================================
   Shell: app bar, stage, control bar, stats bar
   ---------------------------------------------------------------------------
   Replaces the sidebar layout. Four stacked rows, only the stage flexing, so
   the staff and keyboard get every pixel the chrome doesn't need.
   =========================================================================== */

/* ----- App bar --------------------------------------------------------------- */

.appbar[b-pqelvl3ibf] {
    grid-area: appbar;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 6px 6px 14px;
    border-bottom: 1px solid var(--panel-line-soft);
}

.brand[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.brand-mark[b-pqelvl3ibf] {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-bright), var(--accent));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

.brand-note[b-pqelvl3ibf] {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

.brand-mark .brand-star[b-pqelvl3ibf] {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 13px;
    color: var(--gold);
}

.brand-word[b-pqelvl3ibf] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.34em;
    color: var(--accent-soft);
}






.appbar-right[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.appbar-pill[b-pqelvl3ibf],
.appbar-icon[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.appbar-icon[b-pqelvl3ibf] {
    width: 46px;
    padding: 0;
}

.appbar-pill:hover[b-pqelvl3ibf],
.appbar-icon:hover[b-pqelvl3ibf] {
    border-color: var(--gold);
}

.appbar-pill-icon[b-pqelvl3ibf] {
    color: var(--gold);
}

.appbar-pill-count[b-pqelvl3ibf] {
    font-weight: 700;
}

/* ----- Stage ------------------------------------------------------------------
   Staff and keyboard in one paper card. */

.workspace[b-pqelvl3ibf] {
    grid-area: workspace;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.stage[b-pqelvl3ibf] {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.stage-staff[b-pqelvl3ibf] {
    position: relative;
    min-height: 0;
}

.stage-instrument[b-pqelvl3ibf] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-top: 6px;
}

.stage-instrument .midi-keyboard-container[b-pqelvl3ibf],
.stage-instrument .guitar-fretboard-container[b-pqelvl3ibf] {
    width: 100%;
}

.stage .staff-container[b-pqelvl3ibf] {
    position: absolute;
    inset: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.stage[b-pqelvl3ibf]  .music-staff-container {
    width: 100%;
    height: 100%;
}

.stage .ear-training-hint[b-pqelvl3ibf] {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 4;
    transform: translateX(-50%);
}

/* ----- Control bar ------------------------------------------------------------ */

.controlbar[b-pqelvl3ibf] {
    grid-area: controlbar;
    position: relative;
    z-index: 4;
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-lg);
    background: var(--panel-bg-strong);
}

.control-card[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
    color: inherit;
    font: inherit;
    text-align: left;
}

.control-label[b-pqelvl3ibf] {
    font-size: max(0.66em, var(--font-size-min));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.control-drill[b-pqelvl3ibf] {
    flex: 1 1 300px;
    min-width: 0;
}

.control-drill-row[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.control-drill-pick[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.control-drill-icon[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    font-size: 18px;
}

.control-drill-copy[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.control-drill-name[b-pqelvl3ibf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05em;
    font-weight: 700;
}

.control-drill-sub[b-pqelvl3ibf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: max(0.76em, var(--font-size-min));
    opacity: 0.65;
}

.control-chevron[b-pqelvl3ibf] {
    flex: none;
    opacity: 0.6;
}

.control-star[b-pqelvl3ibf] {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: color-mix(in srgb, var(--text) 40%, transparent);
    font-size: 18px;
    cursor: pointer;
}

.control-star:hover[b-pqelvl3ibf] {
    background: var(--surface-hover);
    color: var(--gold);
}

.control-star.is-saved[b-pqelvl3ibf] {
    color: var(--gold);
}

.control-mode[b-pqelvl3ibf] {
    flex: 0 0 auto;
}

.control-mode-row[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-mode-icon[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.control-mode-select[b-pqelvl3ibf] {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.02em;
    font-weight: 700;
    cursor: pointer;
}

.control-primary[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 230px;
    padding: 10px 26px;
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: #fff;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}

.control-primary:hover[b-pqelvl3ibf] {
    filter: brightness(1.08);
}

.control-primary.is-running[b-pqelvl3ibf] {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--secondary) 34%, transparent);
}

.control-primary-icon[b-pqelvl3ibf] {
    font-size: 20px;
}

.control-primary-copy[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.control-primary-title[b-pqelvl3ibf] {
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.control-primary-sub[b-pqelvl3ibf] {
    font-size: max(0.72em, var(--font-size-min));
    opacity: 0.85;
}

.control-advanced[b-pqelvl3ibf] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    cursor: pointer;
}

.control-advanced:hover[b-pqelvl3ibf] {
    border-color: var(--gold);
}

.control-advanced-icon[b-pqelvl3ibf] {
    font-size: 18px;
    color: var(--warm);
}

.control-advanced-copy[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
}

.control-advanced-title[b-pqelvl3ibf] {
    font-size: 0.98em;
    font-weight: 700;
}

.control-advanced-sub[b-pqelvl3ibf] {
    font-size: max(0.74em, var(--font-size-min));
    opacity: 0.65;
}

.control-round-group[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.control-round[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}

.control-round:hover[b-pqelvl3ibf] {
    border-color: var(--gold);
}

.control-round.is-stop[b-pqelvl3ibf] {
    border-color: color-mix(in srgb, var(--warm) 60%, transparent);
    color: var(--warm);
}

/* ----- Stats bar --------------------------------------------------------------- */

.statsbar[b-pqelvl3ibf] {
    grid-area: statsbar;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 14px 6px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-lg);
    background: var(--panel-bg-strong);
}

.statcell[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 18px;
    border-right: 1px solid var(--panel-line-soft);
    text-align: center;
}

.statcell:last-of-type[b-pqelvl3ibf] {
    border-right: 0;
}

.statcell-wide[b-pqelvl3ibf] {
    flex: 1.7 1 0;
}

.statcell-label[b-pqelvl3ibf] {
    font-size: max(0.66em, var(--font-size-min));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.statcell-body[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.statcell-icon[b-pqelvl3ibf] {
    font-size: 22px;
    opacity: 0.9;
}

.statcell-value[b-pqelvl3ibf] {
    font-size: clamp(1.6em, 2.6vw, 2.35em);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.statcell-value.is-hot[b-pqelvl3ibf] {
    color: var(--warm);
}

.statcell-value-sm[b-pqelvl3ibf] {
    font-size: 1.15em;
}

.statcell-unit[b-pqelvl3ibf] {
    font-size: max(0.45em, var(--font-size-min));
    font-weight: 600;
    opacity: 0.7;
}

.statcell-note[b-pqelvl3ibf] {
    font-size: max(0.76em, var(--font-size-min));
    opacity: 0.6;
}

.statcell-spark[b-pqelvl3ibf] {
    display: block;
    width: min(200px, 42%);
}

.statcell .pressure-meter[b-pqelvl3ibf] {
    width: 16px;
    height: 42px;
}

.statcell.is-critical .statcell-label[b-pqelvl3ibf] {
    color: var(--warm);
}

/* ----- Zen ---------------------------------------------------------------------
   Everything but the stage folds away. */

.note-trainer[data-zen="true"][b-pqelvl3ibf] {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "workspace";
}

.note-trainer[data-zen="true"] > .appbar[b-pqelvl3ibf],
.note-trainer[data-zen="true"] > .controlbar[b-pqelvl3ibf],
.note-trainer[data-zen="true"] > .statsbar[b-pqelvl3ibf],
.note-trainer[data-zen="true"] > .starter-card[b-pqelvl3ibf] {
    display: none;
}

.note-trainer[data-zen="true"] .stage[b-pqelvl3ibf] {
    grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* ----- Ready to practice / Drill setup ------------------------------------------
   Two floating cards rather than one shell: the picker sits over the stage and the
   setup docks to its right, as in the mockup. */

.launcher-overlay[b-pqelvl3ibf] {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 3vw, 48px);
    padding: clamp(10px, 4vh, 46px) clamp(10px, 3vw, 46px);
    background: color-mix(in srgb, var(--page-bg) 72%, transparent);
    backdrop-filter: blur(5px);
    animation: hub-fade-b-pqelvl3ibf 140ms ease-out;
}

.launcher-overlay[b-pqelvl3ibf],
.launcher-overlay *[b-pqelvl3ibf] {
    box-sizing: border-box;
}

.launcher-card[b-pqelvl3ibf] {
    max-height: 100%;
    overflow-y: auto;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-lg);
    background: var(--panel-bg-strong);
    color: var(--text, #f6f0e6);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}

.launcher-card:focus[b-pqelvl3ibf] {
    outline: none;
}

.launcher-pick[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-self: center;
    width: min(380px, 100%);
    padding: 20px;
}

.launcher-card-head[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.launcher-card-title[b-pqelvl3ibf] {
    margin: 0;
    font-size: 0.96em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.launcher-close[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
}

.launcher-close:hover[b-pqelvl3ibf] {
    opacity: 1;
    background: var(--surface-hover);
}

.launcher-field[b-pqelvl3ibf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
}

.launcher-field-icon[b-pqelvl3ibf] {
    flex: none;
    color: var(--accent-soft);
}

.launcher-field-chevron[b-pqelvl3ibf] {
    flex: none;
    opacity: 0.6;
    pointer-events: none;
}

.launcher-select[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.02em;
    appearance: none;
    cursor: pointer;
}

.launcher-select:focus[b-pqelvl3ibf] {
    outline: none;
}

.launcher-go[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: #fff;
    font: inherit;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent);
}

.launcher-go:hover:not(:disabled)[b-pqelvl3ibf] {
    filter: brightness(1.08);
}

.launcher-go:disabled[b-pqelvl3ibf] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.launcher-or[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: max(0.78em, var(--font-size-min));
    letter-spacing: 0.2em;
    opacity: 0.5;
}

.launcher-or[b-pqelvl3ibf]::before,
.launcher-or[b-pqelvl3ibf]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--panel-line-soft);
}

.launcher-custom[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: max(0.92em, var(--font-size-min));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.launcher-custom:hover[b-pqelvl3ibf] {
    border-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 10%, transparent);
}

.launcher-custom-icon[b-pqelvl3ibf] {
    font-size: 1.05em;
}

/* ----- Drill setup card ---------------------------------------------------------- */

/* Explicit width, not a percentage: this sits in an `auto` grid column, so a
   percentage would be resolving against a track sized by its own content. */
.drill-setup[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    width: 430px;
    max-width: 100%;
    border-color: var(--panel-line);
}

.drill-setup-head[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--panel-line-soft);
}

.drill-setup-title[b-pqelvl3ibf] {
    margin: 0;
    font-size: max(0.92em, var(--font-size-min));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.setup-rows[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
}

.setup-row[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--panel-line-soft) 55%, transparent);
}

.setup-row:last-child[b-pqelvl3ibf] {
    border-bottom: 0;
}

.setup-row-icon[b-pqelvl3ibf] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    color: var(--gold);
    font-size: 15px;
}

.setup-row-label[b-pqelvl3ibf] {
    font-size: max(0.94em, var(--font-size-min));
}

.setup-row-control[b-pqelvl3ibf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 9px;
    background: var(--panel-bg);
}

.setup-row-control select[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: max(0.92em, var(--font-size-min));
    appearance: none;
    cursor: pointer;
}

.setup-row-control select:focus[b-pqelvl3ibf] {
    outline: none;
}

.setup-row-chevron[b-pqelvl3ibf] {
    flex: none;
    opacity: 0.55;
    pointer-events: none;
}

.difficulty-meter[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex: none;
    height: 18px;
}

/* Bars step up in height so the meter reads as a level even without colour. */
.difficulty-meter i[b-pqelvl3ibf] {
    width: 5px;
    height: calc(6px + var(--bar) * 2.4px);
    border-radius: 2px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
}

.difficulty-meter i.is-lit[b-pqelvl3ibf] {
    background: var(--gold);
}

.drill-setup-foot[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-top: 1px solid var(--panel-line-soft);
}

.drill-setup-save-copy[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.drill-setup-save-title[b-pqelvl3ibf] {
    font-size: 1.02em;
    font-weight: 700;
}

.drill-setup-save-sub[b-pqelvl3ibf] {
    font-size: max(0.76em, var(--font-size-min));
    opacity: 0.6;
}

.drill-setup-save[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: inherit;
    font: inherit;
    font-size: max(0.94em, var(--font-size-min));
    font-weight: 700;
    cursor: pointer;
}

.drill-setup-save:hover[b-pqelvl3ibf] {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.drill-setup-save span[aria-hidden][b-pqelvl3ibf] {
    color: var(--gold);
}

.sound-panel-buttons[b-pqelvl3ibf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ----- Narrow viewports ----------------------------------------------------------- */

@media (max-width: 1180px) {
    .controlbar[b-pqelvl3ibf] {
        flex-wrap: wrap;
    }

    .control-primary[b-pqelvl3ibf] {
        flex: 1 1 220px;
    }
}

@media (max-width: 900px) {
    .appbar[b-pqelvl3ibf] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .appbar-right[b-pqelvl3ibf] {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .statsbar[b-pqelvl3ibf] {
        flex-wrap: wrap;
        gap: 10px 0;
    }

    .statcell[b-pqelvl3ibf] {
        flex: 1 1 33%;
        border-right: 0;
    }

    .launcher-overlay[b-pqelvl3ibf] {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        overflow-y: auto;
    }

    .launcher-pick[b-pqelvl3ibf],
    .drill-setup[b-pqelvl3ibf] {
        width: 100%;
        max-width: 460px;
        justify-self: center;
        max-height: none;
    }
}

/* ----- Skin maker ---------------------------------------------------------------
   EbSkinEditor renders inside an EbDialog, which portals out of this component's
   subtree - so only the bits declared here (the base-theme row) can be styled from
   this file. The editor's own chrome follows the --eb-* tokens set in app.css. */

.skin-maker-base[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: auto minmax(160px, 240px);
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--panel-line-soft);
}

.skin-maker-base select[b-pqelvl3ibf] {
    padding: 9px 12px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-sm);
    background: var(--panel-bg);
    color: inherit;
    font: inherit;
}

.skin-maker-base .setting-hint[b-pqelvl3ibf] {
    grid-column: 1 / -1;
    margin: 0;
}








/* ----- Design mode: editable rule list ------------------------------------------- */



.design-rule[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.design-rule-row[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.design-rule-selector[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-family: "Courier New", monospace;
}

.design-rule-selector:focus[b-pqelvl3ibf] {
    outline: none;
    border-color: var(--accent);
}

/* The count is the answer to "one, or all of them?" - it earns the space. */
.design-rule-count[b-pqelvl3ibf] {
    flex: none;
    white-space: nowrap;
    opacity: 0.7;
}

.design-rule-count.is-zero[b-pqelvl3ibf] {
    color: var(--warm);
    opacity: 1;
}

.design-rule-count.is-invalid[b-pqelvl3ibf] {
    color: var(--warm);
    font-weight: 700;
    opacity: 1;
}

.design-rule-remove[b-pqelvl3ibf] {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
}

.design-rule-remove:hover[b-pqelvl3ibf] {
    background: var(--surface-hover);
    opacity: 1;
}

.design-rule-options[b-pqelvl3ibf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.design-rule-option[b-pqelvl3ibf] {
    padding: 4px 9px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: max(0.9em, var(--font-size-min));
    cursor: pointer;
}

.design-rule-option:hover[b-pqelvl3ibf] {
    border-color: var(--gold);
}

.design-rule-option.is-active[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    font-weight: 700;
}

.design-rule-body[b-pqelvl3ibf] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.75;
    font-family: "Courier New", monospace;
    font-size: max(0.92em, var(--font-size-min));
}

/* ----- Design mode: the dock ------------------------------------------------------
   One floating box: handle, selector input, the CSS designer, the rule list, actions.
   Dragged by its handle (musicReaderGame.makeDraggable) and resized by the native
   grip, which needs a non-visible overflow to appear. */

.design-dock[b-pqelvl3ibf] {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(460px, calc(100vw - 32px));
    height: min(760px, calc(100vh - 32px));
    min-width: 320px;
    min-height: 220px;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    resize: both;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-md);
    background: var(--panel-bg-strong);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    font-size: max(0.86em, var(--font-size-min));
}

/* While the picker is armed the dock must not be pickable itself — otherwise it is
   simply whatever is topmost under the cursor, and you inspect the tool. Esc still
   cancels, as its own button says. */
.design-dock:has(.element-picker-toggle.is-active)[b-pqelvl3ibf] {
    pointer-events: none;
    opacity: 0.55;
}

.design-dock-handle[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 9px 10px;
    border-bottom: 1px solid var(--panel-line-soft);
    background: var(--surface-sunken);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.design-dock-handle:active[b-pqelvl3ibf] {
    cursor: grabbing;
}

.design-dock-badge[b-pqelvl3ibf] {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--warm);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: max(0.82em, var(--font-size-min));
}

.design-dock-title[b-pqelvl3ibf] {
    font-weight: 700;
}

.design-dock-hint[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.7;
}

.design-dock-close[b-pqelvl3ibf] {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.design-dock-close:hover[b-pqelvl3ibf] {
    background: var(--surface-hover);
    opacity: 1;
}

.design-dock-target[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    padding: 10px;
    border-bottom: 1px solid var(--panel-line-soft);
}

.design-dock-selector[b-pqelvl3ibf] {
    flex: 1 1 180px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--panel-line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-family: "Courier New", monospace;
}

.design-dock-selector:focus[b-pqelvl3ibf] {
    outline: none;
    border-color: var(--accent);
}

.design-dock-status[b-pqelvl3ibf] {
    flex: 1 1 100%;
    color: var(--warm);
}

.design-dock-body[b-pqelvl3ibf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
}

.design-dock-actions[b-pqelvl3ibf] {
    display: flex;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    padding: 10px;
    border-top: 1px solid var(--panel-line-soft);
    background: var(--surface-sunken);
}

.design-rules[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--panel-line-soft);
}

.design-rules-head[b-pqelvl3ibf] {
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ----- App bar cluster -------------------------------------------------------------
   Everything up here opens an overlay, so these are buttons that reflect what is open
   rather than nav items claiming a "current section". */

.appbar-right[b-pqelvl3ibf] {
    margin-left: auto;
}

.appbar-plan[b-pqelvl3ibf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--panel-line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.appbar-plan:hover[b-pqelvl3ibf] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.appbar-plan-icon[b-pqelvl3ibf] {
    font-size: 1.05em;
}

/* One shared "this overlay is open" treatment, since that is the only state these
   buttons have now. */
.appbar-plan.is-active[b-pqelvl3ibf],
.appbar-pill.is-active[b-pqelvl3ibf],
.appbar-icon.is-active[b-pqelvl3ibf] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 22%, transparent);
}

/* ----- Advanced skin maker ---------------------------------------------------------
   Parts down the left, the property editor on the right. The dialog body scrolls (see
   the EbDialog rules in app.css), so both columns are given their own scroll instead of
   letting a long property list drag the part list off screen. */

.adv-skin[b-pqelvl3ibf] {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 340px;
}

.adv-skin-parts[b-pqelvl3ibf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
    border-right: 1px solid var(--panel-line-soft);
}

.adv-skin-group[b-pqelvl3ibf] {
    margin-top: 10px;
    padding: 4px 6px;
    font-size: max(0.72em, var(--font-size-min));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.adv-skin-group:first-child[b-pqelvl3ibf] {
    margin-top: 0;
}

.adv-skin-part[b-pqelvl3ibf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    font-size: max(0.9em, var(--font-size-min));
    text-align: left;
    cursor: pointer;
}

.adv-skin-part:hover[b-pqelvl3ibf] {
    background: var(--surface-hover);
}

.adv-skin-part.is-active[b-pqelvl3ibf] {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    font-weight: 700;
}

.adv-skin-part-label[b-pqelvl3ibf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Have I touched this?" is what the list is scanned for, so it gets a mark rather
   than a count. */
.adv-skin-part-dot[b-pqelvl3ibf] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}

.adv-skin-editor[b-pqelvl3ibf] {
    min-width: 0;
}

.adv-skin-editor-head[b-pqelvl3ibf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-line-soft);
}

.adv-skin-editor-head h4[b-pqelvl3ibf] {
    margin: 0 0 2px;
}

.adv-skin-editor-head .setting-hint[b-pqelvl3ibf] {
    margin: 4px 0 0;
}

.adv-skin-selector[b-pqelvl3ibf] {
    font-family: "Courier New", monospace;
    font-size: max(0.82em, var(--font-size-min));
    opacity: 0.7;
}

.adv-skin-count[b-pqelvl3ibf] {
    margin-right: auto;
    font-size: max(0.84em, var(--font-size-min));
    opacity: 0.7;
}

/* The property editor docks "none", so it flows here; give it room to breathe. */
.adv-skin-editor .editor-panel[b-pqelvl3ibf] {
    position: static;
    width: 100%;
    max-height: none;
}

@media (max-width: 760px) {
    .adv-skin[b-pqelvl3ibf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .adv-skin-parts[b-pqelvl3ibf] {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: 160px;
        border-right: 0;
        border-bottom: 1px solid var(--panel-line-soft);
    }
}
/* /GuitarFretboard.razor.rz.scp.css */
.guitar-fretboard-container[b-mfbeqwvk6v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.fretboard-controls[b-mfbeqwvk6v] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.sound-selector[b-mfbeqwvk6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid #8b5cf6;
}

.sound-icon[b-mfbeqwvk6v] {
    font-size: 1.3em;
}

.sound-dropdown[b-mfbeqwvk6v] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 160px;
}

.sound-dropdown:focus[b-mfbeqwvk6v] {
    outline: none;
    border-color: #8b5cf6;
}

.sound-dropdown option[b-mfbeqwvk6v] {
    background: #1a1a2e;
    color: #fff;
}

.guitar-fretboard[b-mfbeqwvk6v] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.fret-numbers[b-mfbeqwvk6v] {
    position: relative;
    height: 20px;
    margin-left: 50px;
    margin-bottom: 5px;
}

.fret-number[b-mfbeqwvk6v] {
    position: absolute;
    transform: translateX(-50%);
    font-size: max(11px, var(--font-size-min));
    color: #888;
    white-space: nowrap;
}

/* First fret number (Open) - don't transform, just left-align */
.fret-number:first-child[b-mfbeqwvk6v] {
    transform: none;
    left: -25px !important; /* Position in the label column area */
}

.fretboard-body[b-mfbeqwvk6v] {
    position: relative;
    background: linear-gradient(180deg, 
        #8B4513 0%,   /* Saddle brown - top of fretboard */
        #654321 50%,  /* Dark brown - middle */
        #3d2914 100%  /* Very dark brown - bottom */
    );
    border-radius: 8px;
    padding: 10px 0;
    min-width: 900px;
    min-height: 220px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Fret markers (dots) */
.fret-markers[b-mfbeqwvk6v] {
    position: absolute;
    top: 0;
    left: 50px;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.fret-marker[b-mfbeqwvk6v] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.marker[b-mfbeqwvk6v] {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, #f5f5dc, #d4d4aa);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(255, 255, 255, 0.2);
}

.marker.double[b-mfbeqwvk6v] {
    width: 10px;
    height: 10px;
}

/* Guitar strings */
.guitar-string[b-mfbeqwvk6v] {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    margin: 2px 0;
}

.string-label[b-mfbeqwvk6v] {
    position: absolute;
    left: 5px;
    width: 40px;
    text-align: center;
    font-size: max(12px, var(--font-size-min));
    font-weight: bold;
    color: #ccc;
    z-index: 10;
    background: rgba(60, 40, 20, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
}

.string-line[b-mfbeqwvk6v] {
    position: absolute;
    left: 50px;
    right: 0;
    height: var(--string-thickness, 2px);
    background: linear-gradient(90deg, 
        #d4af37 0%,      /* Gold color for wound strings */
        #c0c0c0 30%,     /* Silver */
        #d4af37 60%,
        #c0c0c0 100%
    );
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
                0 0 4px rgba(255, 255, 255, 0.2);
    z-index: 2;
    pointer-events: none;
}

/* First two strings (high E and B) are plain steel */
.guitar-string:nth-child(1) .string-line[b-mfbeqwvk6v],
.guitar-string:nth-child(2) .string-line[b-mfbeqwvk6v] {
    background: linear-gradient(90deg, 
        #e8e8e8 0%,
        #c0c0c0 50%,
        #e8e8e8 100%
    );
}

/* Fret positions container - holds all clickable areas for a string */
.fret-positions-container[b-mfbeqwvk6v] {
    position: absolute;
    left: 50px;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 5;
    overflow: visible; /* Allow open string button to extend slightly left */
}

/* Fret positions (clickable areas) */
.fret-position[b-mfbeqwvk6v] {
    position: absolute;
    top: 0;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s ease;
    min-width: 20px; /* Ensure minimum clickable width */
}

.fret-position:hover:not(:disabled)[b-mfbeqwvk6v] {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.fret-position:active:not(:disabled)[b-mfbeqwvk6v],
.fret-position.pressed[b-mfbeqwvk6v] {
    background: rgba(74, 222, 128, 0.4);
}

.fret-position:disabled[b-mfbeqwvk6v] {
    cursor: not-allowed;
}

.note-label[b-mfbeqwvk6v] {
    font-size: max(10px, var(--font-size-min));
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Fret wires */
.fret-wires[b-mfbeqwvk6v] {
    position: absolute;
    top: 0;
    left: 50px;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

.fret-wire[b-mfbeqwvk6v] {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
        #c0c0c0 0%,
        #808080 50%,
        #c0c0c0 100%
    );
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3),
                -1px 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 1px;
}

.fret-wire.nut[b-mfbeqwvk6v] {
    width: 6px;
    background: linear-gradient(180deg,
        #f5f5dc 0%,    /* Beige - bone/plastic nut */
        #d4d4aa 50%,
        #f5f5dc 100%
    );
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
}

/* Responsive adjustments */
@media (max-width: 800px) {
    .fretboard-body[b-mfbeqwvk6v] {
        min-width: 500px;
    }
    
    .fret-number[b-mfbeqwvk6v] {
        font-size: max(9px, var(--font-size-min));
    }
    
    .note-label[b-mfbeqwvk6v] {
        font-size: max(8px, var(--font-size-min));
    }
}

/* /MidiKeyboard.razor.rz.scp.css */
/* ============================================================================
   Keyboard skin contract.

   Colours here are read from CSS custom properties with the original values as
   fallbacks, so a skin can restyle the keyboard by SETTING VARIABLES rather than
   by writing competing selectors.

   That indirection is not decoration -- it is the only thing that works. This is
   a Blazor *scoped* stylesheet, so every rule below compiles to
   `.piano-key.white-key[b-xxxxx]`, specificity (0,3,0). A user skin written as
   plain `.white-key { ... }` is (0,1,0) and loses silently, with no error and no
   visible effect. Variables inherit instead of competing, so they always win.

   Skins are applied by SkinService, which writes these properties onto a scoped
   <style> element. See docs/plans/roadmap.md slices 11-12.
   ============================================================================ */

.midi-keyboard-container[b-6sxvqwb1bc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.keyboard-controls[b-6sxvqwb1bc] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.sound-selector[b-6sxvqwb1bc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid #8b5cf6;
}

.sound-icon[b-6sxvqwb1bc] {
    font-size: 1.3em;
}

.sound-dropdown[b-6sxvqwb1bc] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 140px;
}

.sound-dropdown:focus[b-6sxvqwb1bc] {
    outline: none;
    border-color: #8b5cf6;
}

.sound-dropdown option[b-6sxvqwb1bc] {
    background: #1a1a2e;
    color: #fff;
}

.midi-status[b-6sxvqwb1bc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 2px solid;
}

.midi-status.connected[b-6sxvqwb1bc] {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.midi-status.disconnected[b-6sxvqwb1bc] {
    border-color: #6b7280;
    background: rgba(0, 0, 0, 0.3);
}

.midi-icon[b-6sxvqwb1bc] {
    font-size: 1.3em;
}

.midi-text[b-6sxvqwb1bc] {
    font-size: 0.9em;
}

.control-btn[b-6sxvqwb1bc] {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.midi-btn[b-6sxvqwb1bc] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
}

.midi-btn:disabled[b-6sxvqwb1bc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.octave-toggle[b-6sxvqwb1bc] {
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.toggle-label[b-6sxvqwb1bc] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9em;
}

.toggle-hint[b-6sxvqwb1bc] {
    opacity: 0.7;
    font-size: 0.85em;
}

.piano-keyboard[b-6sxvqwb1bc] {
    display: flex;
    justify-content: safe center;
    padding: 20px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
    /* A custom layout can be wider than the card: scroll rather than letting
       flex shrink the keys (shrunk whites would desync from the absolutely
       positioned black keys, whose lefts are computed from the pitch var). */
    max-width: 100%;
    overflow-x: auto;
}

.piano-keys[b-6sxvqwb1bc] {
    position: relative;
    display: flex;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    padding: 8px 8px 8px 8px;
    border-radius: 8px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.piano-key[b-6sxvqwb1bc] {
    border: none;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    /* Deliberately NOT `all`: geometry (width/height/left) must apply
       instantly when the user drags the layout sliders - transitioning it
       looks laggy and desyncs the black keys from the whites mid-animation. */
    transition: background 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}

.piano-key.white-key[b-6sxvqwb1bc] {
    /* Pitch minus the 2px of margins; vars are set inline by the component,
       fallbacks keep the stylesheet self-consistent. flex none: the black-key
       positions are computed from the pitch var, so whites must never shrink. */
    flex: none;
    width: calc(var(--kb-white-pitch, 54px) - 2px);
    height: var(--kb-white-h, 180px);
    background: var(--key-white-bg, linear-gradient(180deg,
        #ffffff 0%,
        #f8f8f8 85%,
        #e8e8e8 92%,
        #d8d8d8 100%));
    border-radius: var(--key-radius, 0 0 6px 6px);
    margin: 0 1px;
    box-shadow: 
        0 0 0 1px #aaa,
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    z-index: 1;
}

.piano-key.white-key.pressed[b-6sxvqwb1bc] {
    background: var(--key-white-active-bg, linear-gradient(180deg,
        #e0e0e0 0%,
        #d8d8d8 85%,
        #c8c8c8 92%,
        #b8b8b8 100%));
    transform: translateY(2px);
    box-shadow: 
        0 0 0 1px #999,
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.piano-key.white-key .key-label[b-6sxvqwb1bc] {
    color: var(--key-white-label, #555);
    font-size: max(var(--key-white-label-size, 15px), var(--font-size-min));
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.piano-key.black-key .key-label[b-6sxvqwb1bc] {
    color: var(--key-black-label, #ccc);
    /* Floored like the rest of the app: a black key is narrow, but 10px was the
       smallest text on screen and these are the labels a beginner reads most. */
    font-size: max(var(--key-black-label-size, 12px), var(--font-size-min));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.piano-key.white-key:hover:not(:disabled)[b-6sxvqwb1bc] {
    background: var(--key-white-hover-bg, linear-gradient(180deg,
        #f5f5f5 0%,
        #eeeeee 85%,
        #e0e0e0 92%,
        #d0d0d0 100%));
}

.piano-key.white-key:active:not(:disabled)[b-6sxvqwb1bc] {
    background: linear-gradient(180deg, 
        #e8e8e8 0%, 
        #e0e0e0 85%, 
        #d0d0d0 92%, 
        #c0c0c0 100%);
    box-shadow: 
        0 0 0 1px #999,
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);
}

.black-keys-container[b-6sxvqwb1bc] {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: var(--kb-black-h, 110px);
    pointer-events: none;
}

.piano-key.black-key[b-6sxvqwb1bc] {
    position: absolute;
    width: var(--kb-black-w, 36px);
    height: var(--kb-black-h, 110px);
    background: var(--key-black-bg, linear-gradient(180deg,
        #3a3a3a 0%,
        #2a2a2a 40%,
        #1a1a1a 80%,
        #0a0a0a 100%));
    border-radius: var(--key-black-radius, 0 0 5px 5px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 -3px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.05),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
    z-index: 2;
    pointer-events: auto;
    padding-bottom: 6px;
}

.piano-key.black-key.pressed[b-6sxvqwb1bc] {
    background: var(--key-black-active-bg, linear-gradient(180deg,
        #2a2a2a 0%,
        #1a1a1a 40%,
        #0a0a0a 80%,
        #000000 100%));
    transform: translateY(2px);
    height: calc(var(--kb-black-h, 110px) - 2px);
}

.piano-key.black-key:hover:not(:disabled)[b-6sxvqwb1bc] {
    background: var(--key-black-hover-bg, linear-gradient(180deg,
        #4a4a4a 0%,
        #3a3a3a 40%,
        #2a2a2a 80%,
        #1a1a1a 100%));
}

.piano-key.black-key:active:not(:disabled)[b-6sxvqwb1bc] {
    background: linear-gradient(180deg, 
        #2a2a2a 0%, 
        #1a1a1a 40%, 
        #0a0a0a 80%, 
        #000000 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
    height: calc(var(--kb-black-h, 110px) - 2px);
}

.piano-key:disabled[b-6sxvqwb1bc] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.piano-key.white-key:disabled:active[b-6sxvqwb1bc],
.piano-key.black-key:disabled:active[b-6sxvqwb1bc] {
    transform: none !important;
}

/* /MusicStaff.razor.rz.scp.css */
.music-staff-container[b-98mr2prp8k] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.music-staff-svg[b-98mr2prp8k] {
    display: block;
}

/* Note styling */
.staff-note[b-98mr2prp8k] {
    cursor: default;
}

.staff-note:hover[b-98mr2prp8k] {
    opacity: 0.9;
}

.staff-note.clickable[b-98mr2prp8k] {
    cursor: pointer;
}

.staff-note.clickable:hover[b-98mr2prp8k] {
    opacity: 0.9;
    filter: brightness(1.1);
}

/* Note animations are defined in global app.css for proper keyframe access */

/* Custom note styles */
.staff-note.correct[b-98mr2prp8k] {
    filter: drop-shadow(0 0 8px #4ade80);
}

.staff-note.incorrect[b-98mr2prp8k] {
    filter: drop-shadow(0 0 8px #ef4444);
}

.staff-note.pending[b-98mr2prp8k] {
    opacity: 0.6;
}

/* Scrolling note trail effect */
.staff-note.scrolling[b-98mr2prp8k] {
    filter: drop-shadow(2px 0 4px rgba(0, 0, 0, 0.2));
}

/* /Pages/NoteReadingTrainer.razor.rz.scp.css */
/* ============================================================================
   DESIGN REFERENCE -- NOT THE LIVE UI. See the banner in NoteReadingTrainer.razor.

   This stylesheet belongs to the unrouted mockup component. The app's real
   styles are GameContainer.razor.css plus the palette on :root in
   MusicReaderGame/wwwroot/app.css. This file keeps its own self-contained copy
   of the palette on purpose, so the mockup renders standalone -- editing it has
   no effect on the running app.
   ============================================================================ */
.note-trainer[b-mpoq3sihcy] {
    --page-bg: #020c13;
    --page-bg-soft: #071622;
    --panel-bg: #06131d;
    --panel-bg-strong: #030d14;
    --panel-line: rgba(219, 181, 112, .72);
    --panel-line-soft: rgba(219, 181, 112, .34);
    --text: #f6f0e6;
    --muted: #b6b2ad;
    --paper: #fcfcfd;
    --paper-edge: #e6e9ed;
    --ink: #090d11;
    --accent: #8c4fc7;
    --accent-bright: #a767df;
    --accent-soft: #c891ef;
    --secondary: #52b6b0;
    --secondary-dark: #247a79;
    --warm: #ff6d62;
    --gold: #d7ad69;
    --success: #53aaa6;
    --shadow: 0 16px 42px rgba(0, 0, 0, .34);
    --radius-lg: 18px;
    --radius-md: 12px;
    --sidebar-width: 220px;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "brand toolbar"
        "sidebar workspace";
    gap: 18px;
    width: 100%;
    min-height: 100vh;
    padding: 18px;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 67% -20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 38%),
        radial-gradient(circle at 0 100%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 34%),
        linear-gradient(150deg, var(--page-bg), var(--page-bg-soft) 52%, var(--page-bg));
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.note-trainer[b-mpoq3sihcy],
.note-trainer *[b-mpoq3sihcy] {
    box-sizing: border-box;
}

.note-trainer button[b-mpoq3sihcy],
.note-trainer select[b-mpoq3sihcy] {
    font: inherit;
}

.note-trainer button[b-mpoq3sihcy] {
    color: inherit;
}

.note-trainer[data-theme="ocean"][b-mpoq3sihcy] {
    --accent: #4f91dc;
    --accent-bright: #69adf4;
    --accent-soft: #a5cef5;
    --secondary: #5fb7dc;
    --secondary-dark: #2c7196;
    --warm: #ff704f;
    --gold: #cab374;
}

.note-trainer[data-theme="mint"][b-mpoq3sihcy] {
    --accent: #52bda8;
    --accent-bright: #6fd3be;
    --accent-soft: #a5e6d8;
    --secondary: #66aaa6;
    --secondary-dark: #2f7472;
    --warm: #ff6759;
    --gold: #d0ac75;
}

.note-trainer[data-theme="amber"][b-mpoq3sihcy] {
    --accent: #d9a338;
    --accent-bright: #efbd56;
    --accent-soft: #f2d38d;
    --secondary: #87904d;
    --secondary-dark: #59612d;
    --warm: #ee674e;
    --gold: #d5aa62;
}

.brand[b-mpoq3sihcy] {
    grid-area: brand;
    min-width: 0;
    height: 96px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 2px 4px;
}

.brand-mark[b-mpoq3sihcy] {
    flex: 0 0 auto;
    width: 68px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    border: 3px solid rgba(255,255,255,.88);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, white 12%), var(--accent));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--gold) 75%, transparent),
        0 8px 24px rgba(0,0,0,.28);
}

.brand-copy[b-mpoq3sihcy] {
    min-width: 0;
    padding-top: 3px;
}

.brand-title-row[b-mpoq3sihcy] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-star[b-mpoq3sihcy] {
    color: var(--warm);
    font-size: 27px;
    line-height: 1;
    transform: translateY(-8px);
}

.brand-title[b-mpoq3sihcy] {
    white-space: nowrap;
    color: #f7f3eb;
    font-family: "Arial Narrow", "Aptos Narrow", "Segoe UI Semibold", sans-serif;
    font-size: clamp(22px, 2.15vw, 34px);
    font-stretch: condensed;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1;
}

.brand-subtitle[b-mpoq3sihcy] {
    margin: 8px 0 0 42px;
    color: var(--accent-soft);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .38em;
}

.brand-rule[b-mpoq3sihcy] {
    width: 95px;
    height: 8px;
    margin: 6px 0 0 auto;
    border-top: 2px solid var(--secondary);
    border-bottom: 2px solid var(--secondary);
}

.toolbar[b-mpoq3sihcy] {
    grid-area: toolbar;
    position: relative;
    min-width: 0;
    min-height: 96px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.segmented-control[b-mpoq3sihcy] {
    min-width: 330px;
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    overflow: hidden;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    background: rgba(0, 0, 0, .12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18);
}

.segment[b-mpoq3sihcy] {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-right: 1px solid var(--panel-line-soft);
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.segment:last-child[b-mpoq3sihcy] {
    border-right: 0;
}

.segment:hover[b-mpoq3sihcy] {
    background: rgba(255,255,255,.045);
}

.segment.is-active[b-mpoq3sihcy] {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}

.segment-icon[b-mpoq3sihcy] {
    color: #fff1cf;
    font-size: 25px;
    line-height: 1;
}

.toolbar-selects[b-mpoq3sihcy] {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.field-control[b-mpoq3sihcy] {
    min-width: 175px;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px 0 15px;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    background: rgba(2, 11, 18, .74);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.16);
}

.field-label[b-mpoq3sihcy] {
    color: #d5cbc0;
    font-size: 14px;
    white-space: nowrap;
}

.field-value[b-mpoq3sihcy] {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

.field-icon[b-mpoq3sihcy] {
    color: #fff1cf;
    font-size: 19px;
}

.field-control select[b-mpoq3sihcy] {
    width: 100%;
    min-width: 0;
    padding: 6px 23px 6px 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    appearance: auto;
}

.field-control select option[b-mpoq3sihcy] {
    color: #f5f5f5;
    background: #07131d;
}

.theme-menu-wrap[b-mpoq3sihcy] {
    position: relative;
}

.round-menu[b-mpoq3sihcy] {
    width: 51px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-line);
    border-radius: 50%;
    color: var(--accent-soft);
    background: rgba(2,11,18,.82);
    cursor: pointer;
    font-size: 21px;
}

.round-menu:hover[b-mpoq3sihcy] {
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-bg));
}

.theme-popover[b-mpoq3sihcy] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    width: 176px;
    padding: 10px;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: #07131d;
    box-shadow: 0 18px 45px rgba(0,0,0,.42);
}

.theme-popover-title[b-mpoq3sihcy] {
    padding: 3px 7px 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.theme-option[b-mpoq3sihcy] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.theme-option:hover[b-mpoq3sihcy],
.theme-option.is-selected[b-mpoq3sihcy] {
    background: rgba(255,255,255,.07);
}

.theme-swatch[b-mpoq3sihcy] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

.sidebar[b-mpoq3sihcy] {
    grid-area: sidebar;
    position: relative;
    min-width: 0;
    height: 100%;
    min-height: 710px;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 18px;
    overflow: hidden;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(6, 20, 31, .94), rgba(2, 12, 19, .98));
    box-shadow: var(--shadow);
}

.section-nav[b-mpoq3sihcy],
.transport[b-mpoq3sihcy],
.sidebar-utilities[b-mpoq3sihcy] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.section-nav[b-mpoq3sihcy] {
    gap: 2px;
}

.nav-item[b-mpoq3sihcy] {
    position: relative;
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 10px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-bottom: 1px dotted rgba(210, 177, 116, .28);
    color: #e6ddd1;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.nav-item:hover[b-mpoq3sihcy] {
    background: rgba(255,255,255,.035);
}

.nav-item.is-active[b-mpoq3sihcy] {
    color: #fff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 82%);
}

.nav-item.is-active[b-mpoq3sihcy]::before {
    content: "";
    position: absolute;
    inset: 6px auto 6px -14px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-bright);
}

.nav-icon[b-mpoq3sihcy] {
    color: #f2dcae;
    font-size: 23px;
    text-align: center;
}

.nav-item.is-active .nav-icon[b-mpoq3sihcy] {
    color: var(--accent-bright);
}

.nav-label[b-mpoq3sihcy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

.active-dot[b-mpoq3sihcy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
}

.sidebar-rule[b-mpoq3sihcy] {
    position: relative;
    z-index: 2;
    height: 1px;
    margin: 14px 2px;
    background: var(--panel-line-soft);
}

.transport[b-mpoq3sihcy] {
    gap: 7px;
}

.transport-button[b-mpoq3sihcy] {
    min-height: 46px;
    display: grid;
    grid-template-columns: 31px 1fr;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--panel-line);
    border-radius: 9px;
    color: #f5ead9;
    background: rgba(2, 11, 18, .58);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
}

.transport-button:hover:not(:disabled)[b-mpoq3sihcy] {
    background: rgba(255,255,255,.055);
}

.transport-button.primary[b-mpoq3sihcy] {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border-color: color-mix(in srgb, var(--accent-soft) 70%, white 30%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.transport-button:disabled[b-mpoq3sihcy] {
    cursor: not-allowed;
    opacity: .48;
}

.stop-square[b-mpoq3sihcy] {
    width: 13px;
    height: 13px;
    background: #f1e8d7;
}

.sidebar-utilities[b-mpoq3sihcy] {
    gap: 3px;
}

.utility-button[b-mpoq3sihcy] {
    min-height: 45px;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 0 10px;
    border: 0;
    color: #eee4d6;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
}

.utility-button:hover[b-mpoq3sihcy] {
    color: #fff;
}

.utility-icon[b-mpoq3sihcy] {
    color: #f2dcae;
    font-size: 24px;
}

.sidebar-decoration[b-mpoq3sihcy] {
    position: absolute;
    z-index: 1;
    inset: auto 0 0 0;
    height: 132px;
    pointer-events: none;
}

.sidebar-dot-field[b-mpoq3sihcy] {
    position: absolute;
    inset: 18px 12px 0 0;
    opacity: .8;
    background-image: radial-gradient(circle, var(--secondary) 1.4px, transparent 1.8px);
    background-size: 10px 10px;
    mask-image: linear-gradient(90deg, black, transparent 86%);
}

.sidebar-quarter-circle[b-mpoq3sihcy] {
    position: absolute;
    left: -36px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 0 47%, var(--accent) 48% 72%, transparent 73%);
}

.workspace[b-mpoq3sihcy] {
    grid-area: workspace;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(300px, 1.45fr) minmax(220px, .95fr) minmax(150px, .58fr);
    gap: 16px;
}

.staff-card[b-mpoq3sihcy],
.keyboard-card[b-mpoq3sihcy],
.stats-card[b-mpoq3sihcy] {
    min-width: 0;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.staff-card[b-mpoq3sihcy] {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}

.corner-stripes[b-mpoq3sihcy] {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.corner-stripes i[b-mpoq3sihcy] {
    display: block;
    height: 3px;
    background: var(--accent);
}

.corner-stripes i:nth-child(1)[b-mpoq3sihcy] { width: 105px; }
.corner-stripes i:nth-child(2)[b-mpoq3sihcy] { width: 88px; }
.corner-stripes i:nth-child(3)[b-mpoq3sihcy] { width: 72px; }
.corner-stripes i:nth-child(4)[b-mpoq3sihcy] { width: 54px; }
.corner-stripes i:nth-child(5)[b-mpoq3sihcy] { width: 35px; }

.corner-arc[b-mpoq3sihcy] {
    position: absolute;
    z-index: 1;
    top: -88px;
    right: -72px;
    width: 260px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 70%, color-mix(in srgb, var(--secondary) 78%, white 22%), var(--secondary-dark));
}

.staff-dot-field[b-mpoq3sihcy] {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 17px;
    width: 90px;
    height: 78px;
    background-image: radial-gradient(circle, var(--warm) 3px, transparent 3.4px);
    background-size: 17px 17px;
}

.staff[b-mpoq3sihcy] {
    position: absolute;
    inset: 19% 7.5% 14% 5.3%;
}

.staff-lines[b-mpoq3sihcy] {
    position: absolute;
    top: 28%;
    right: 0;
    left: 0;
    display: grid;
    gap: clamp(22px, 3.2vh, 34px);
}

.staff-lines span[b-mpoq3sihcy] {
    display: block;
    height: 3px;
    background: var(--ink);
}

.clef-glyph[b-mpoq3sihcy] {
    position: absolute;
    z-index: 3;
    top: 4%;
    left: 2.4%;
    color: var(--ink);
    font-family: "Segoe UI Symbol", "Noto Music", serif;
    font-size: clamp(145px, 15vw, 245px);
    line-height: 1;
    transform: scaleX(.82);
    transform-origin: left center;
}

.staff-note[b-mpoq3sihcy] {
    position: absolute;
    z-index: 4;
    left: var(--note-x);
    top: var(--note-y);
    width: 24px;
    height: 76px;
    transform: translate(-50%, -50%);
}

.note-head[b-mpoq3sihcy] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink);
    transform: rotate(-12deg);
}

.note-stem[b-mpoq3sihcy] {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 3px;
    height: 64px;
    background: var(--ink);
}

.keyboard-card[b-mpoq3sihcy] {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}

.white-keys[b-mpoq3sihcy] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
}

.white-key[b-mpoq3sihcy] {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 2px 28px;
    border: 0;
    border-right: 1px solid #aeb3b9;
    color: #111820;
    background: linear-gradient(180deg, #fff 0%, #fafafa 55%, #f5f5f5 100%);
    cursor: pointer;
    font-size: clamp(13px, 1.25vw, 19px);
    font-weight: 750;
}

.white-key:last-child[b-mpoq3sihcy] {
    border-right: 0;
}

.white-key:hover[b-mpoq3sihcy],
.white-key.is-selected[b-mpoq3sihcy] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, white), color-mix(in srgb, var(--accent) 19%, white));
}

.white-key.is-c[b-mpoq3sihcy] {
    color: var(--accent);
}

.black-key[b-mpoq3sihcy] {
    --black-key-width: calc((100% / 14) * .59);
    position: absolute;
    z-index: 5;
    top: 0;
    left: calc((100% / 14) * var(--key-boundary) - (var(--black-key-width) / 2));
    width: var(--black-key-width);
    height: 56%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px 20px;
    border: 1px solid #4f565e;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    color: #f9f5ec;
    background: linear-gradient(90deg, #090c10, #1a2026 54%, #070a0e);
    box-shadow: 0 7px 8px rgba(0,0,0,.34), inset 0 -4px 0 rgba(255,255,255,.055);
    cursor: pointer;
    font-size: clamp(9px, .9vw, 13px);
    font-weight: 700;
    line-height: 1.15;
}

.black-key small[b-mpoq3sihcy] {
    font-size: .84em;
}

.black-key:hover[b-mpoq3sihcy],
.black-key.is-selected[b-mpoq3sihcy] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, #19131f), #0b0a0e);
    box-shadow: 0 7px 9px rgba(0,0,0,.38), inset 0 -4px 0 color-mix(in srgb, var(--accent) 30%, transparent);
}

.stats-card[b-mpoq3sihcy] {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1.05fr .68fr .68fr 1.05fr;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(4, 16, 24, .98), rgba(2, 11, 18, .98));
}

.stat-section[b-mpoq3sihcy] {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 19px 22px;
    border-right: 1px solid var(--panel-line-soft);
}

.stat-section h2[b-mpoq3sihcy] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.tempo-stat h2[b-mpoq3sihcy] {
    color: var(--accent-bright);
}

.tempo-content[b-mpoq3sihcy] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(115px, .8fr) minmax(110px, 1.2fr);
    align-items: end;
    gap: 15px;
    margin-top: 14px;
}

.tempo-content dl[b-mpoq3sihcy] {
    margin: 0;
}

.tempo-content dl > div[b-mpoq3sihcy] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    margin: 9px 0;
}

.tempo-content dt[b-mpoq3sihcy],
.tempo-content dd[b-mpoq3sihcy] {
    margin: 0;
    font-size: 14px;
}

.tempo-content dd[b-mpoq3sihcy] {
    font-weight: 700;
}

.sparkline[b-mpoq3sihcy] {
    position: relative;
    min-width: 0;
    height: 84px;
    margin: 0 8px 4px 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 58%, transparent) 1px, transparent 1.4px);
    background-size: 9px 9px;
}

.sparkline-svg[b-mpoq3sihcy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sparkline i[b-mpoq3sihcy] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 2px rgba(255,255,255,.28);
    transform: translate(-50%, -50%);
}

.response-stat[b-mpoq3sihcy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.response-stat h2[b-mpoq3sihcy] {
    align-self: stretch;
    margin: -1px -22px 13px;
    padding: 8px 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.response-stat strong[b-mpoq3sihcy] {
    color: #fff;
    font-family: "Arial Narrow", "Aptos Narrow", sans-serif;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
}

.response-stat strong span[b-mpoq3sihcy] {
    margin-left: 1px;
    font-size: .62em;
}

.response-star[b-mpoq3sihcy] {
    margin-top: 10px;
    color: var(--warm);
    font-size: 27px;
}

.score-stat[b-mpoq3sihcy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.score-stat h2[b-mpoq3sihcy] {
    text-transform: none;
    letter-spacing: 0;
}

.score-stat strong[b-mpoq3sihcy] {
    margin-top: 15px;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1;
}

.correct-stat h2[b-mpoq3sihcy],
.correct-stat strong[b-mpoq3sihcy] {
    color: var(--success);
}

.incorrect-stat h2[b-mpoq3sihcy],
.incorrect-stat strong[b-mpoq3sihcy] {
    color: var(--warm);
}

.stats-decoration[b-mpoq3sihcy] {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
}

.stats-dot-field[b-mpoq3sihcy] {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 105px;
    height: 78px;
    background-image: radial-gradient(circle, var(--warm) 2.5px, transparent 2.8px);
    background-size: 15px 15px;
}

.rainbow-arcs[b-mpoq3sihcy] {
    position: absolute;
    right: -70px;
    bottom: -78px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 2px solid var(--secondary);
    background:
        radial-gradient(circle, var(--accent) 0 44%, transparent 45%),
        repeating-radial-gradient(circle, transparent 0 12px, var(--secondary) 13px 14px);
}

@media (max-width: 1280px) {
    .note-trainer[b-mpoq3sihcy] {
        --sidebar-width: 195px;
    }

    .toolbar[b-mpoq3sihcy] {
        grid-template-columns: minmax(305px, auto) minmax(0, 1fr) auto;
        gap: 10px;
    }

    .toolbar-selects[b-mpoq3sihcy] {
        gap: 8px;
    }

    .field-control[b-mpoq3sihcy] {
        min-width: 148px;
        padding-left: 10px;
    }

    .field-label[b-mpoq3sihcy] {
        font-size: 12px;
    }

    .stats-card[b-mpoq3sihcy] {
        grid-template-columns: 1.55fr 1fr .62fr .62fr .9fr;
    }
}

@media (max-width: 1050px) {
    .note-trainer[b-mpoq3sihcy] {
        min-height: auto;
        overflow: visible;
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "brand brand"
            "toolbar toolbar"
            "sidebar workspace";
    }

    .brand[b-mpoq3sihcy] {
        height: 76px;
    }

    .toolbar[b-mpoq3sihcy] {
        min-height: 68px;
    }

    .toolbar-selects[b-mpoq3sihcy] {
        flex-wrap: wrap;
    }

    .field-control[b-mpoq3sihcy] {
        min-width: 142px;
    }

    .workspace[b-mpoq3sihcy] {
        grid-template-rows: 350px 245px 185px;
    }

    .sidebar[b-mpoq3sihcy] {
        min-height: 812px;
    }

    .nav-item[b-mpoq3sihcy] {
        min-height: 46px;
    }

    .stat-section[b-mpoq3sihcy] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .response-stat h2[b-mpoq3sihcy] {
        margin-left: -14px;
        margin-right: -14px;
    }
}

@media (max-width: 820px) {
    .note-trainer[b-mpoq3sihcy] {
        display: flex;
        flex-direction: column;
        padding: 12px;
        overflow: visible;
    }

    .brand[b-mpoq3sihcy] {
        order: 1;
    }

    .toolbar[b-mpoq3sihcy] {
        order: 2;
        display: flex;
        flex-wrap: wrap;
    }

    .segmented-control[b-mpoq3sihcy] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .toolbar-selects[b-mpoq3sihcy] {
        flex: 1 1 calc(100% - 62px);
        justify-content: stretch;
    }

    .field-control[b-mpoq3sihcy] {
        flex: 1 1 145px;
    }

    .sidebar[b-mpoq3sihcy] {
        order: 4;
        min-height: 0;
    }

    .section-nav[b-mpoq3sihcy] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transport[b-mpoq3sihcy] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-utilities[b-mpoq3sihcy] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-decoration[b-mpoq3sihcy] {
        display: none;
    }

    .workspace[b-mpoq3sihcy] {
        order: 3;
        grid-template-rows: 300px 220px auto;
    }

    .stats-card[b-mpoq3sihcy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-section[b-mpoq3sihcy] {
        min-height: 150px;
        border-bottom: 1px solid var(--panel-line-soft);
    }

    .stats-decoration[b-mpoq3sihcy] {
        min-height: 150px;
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .brand-title[b-mpoq3sihcy] {
        font-size: 24px;
    }

    .brand-subtitle[b-mpoq3sihcy] {
        margin-left: 36px;
        font-size: 11px;
    }

    .brand-mark[b-mpoq3sihcy] {
        width: 58px;
    }

    .toolbar-selects[b-mpoq3sihcy] {
        flex-basis: 100%;
    }

    .round-menu[b-mpoq3sihcy] {
        position: absolute;
        right: 0;
        top: -64px;
    }

    .workspace[b-mpoq3sihcy] {
        grid-template-rows: 250px 180px auto;
    }

    .clef-glyph[b-mpoq3sihcy] {
        font-size: 130px;
    }

    .staff-lines[b-mpoq3sihcy] {
        gap: 22px;
    }

    .white-key[b-mpoq3sihcy] {
        padding-bottom: 18px;
        font-size: 11px;
    }

    .black-key[b-mpoq3sihcy] {
        height: 58%;
        padding-bottom: 12px;
        font-size: 8px;
    }

    .stats-card[b-mpoq3sihcy] {
        grid-template-columns: 1fr;
    }

    .stats-decoration[b-mpoq3sihcy] {
        grid-column: auto;
    }
}