* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* BRUTALIST FOUNDATION - High contrast, raw materials */
    --brutalist-black: #0A0A0A;
    --brutalist-charcoal: #1C1C1E;
    --brutalist-concrete: #2C2C2E;
    --brutalist-gray: #3A3A3C;
    --brutalist-light-gray: #C8C8C0;
    --brutalist-white: #F5F5F0;

    /* GYM ACCENTS - Warm but bold */
    --gym-coral: #FF6B6B;
    --gym-peach: #FF8E72;
    --gym-steel-blue: #4A90E2;
    --gym-iron-gray: #6C6C6C;

    /* FUNCTIONAL COLORS */
    --success-green: #34C759;
    --warning-coral: #FF6B6B;
    --error-red: #FF3B30;

    /* LEGACY MAPPINGS (for compatibility during transition) */
    --lift-purple-light: var(--brutalist-light-gray);
    --lift-purple-main: var(--brutalist-concrete);
    --lift-purple-dark: var(--brutalist-charcoal);
    --lift-purple-deeper: var(--brutalist-black);
    --lift-purple-darkest: var(--brutalist-black);
    --lift-accent-cyan: var(--gym-steel-blue);
    --lift-accent-pink: var(--gym-peach);
    --lift-gold: var(--gym-coral);
    --lift-silver: var(--brutalist-light-gray);
    --lift-bronze: var(--gym-iron-gray);

    /* Background colors */
    --dark-bg: var(--brutalist-black);
    --dark-purple: var(--brutalist-charcoal);
    --darker-purple: var(--brutalist-black);
    --grid-color: rgba(58, 58, 60, 0.15);

    /* Semantic colors */
    --primary: var(--gym-coral);
    --primary-dark: var(--brutalist-charcoal);
    --primary-light: var(--brutalist-light-gray);
    --secondary: var(--gym-steel-blue);
    --success: var(--success-green);
    --danger: var(--error-red);
    --text-primary: var(--brutalist-white);
    --text-secondary: var(--brutalist-light-gray);
    --card-bg: var(--brutalist-charcoal);
    --border: var(--brutalist-gray);

    /* BRUTALIST SHADOWS - Harsh offset shadows, no blur */
    --shadow-sm: 4px 4px 0px rgba(0, 0, 0, 0.8);
    --shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
    --shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.9);
    --shadow-lg: 8px 8px 0px #000000;
    --shadow-long: 6px 6px 0px rgba(0, 0, 0, 0.9);

    /* ACCENT SHADOWS (for hover states) */
    --shadow-coral: 6px 6px 0px var(--gym-coral);
    --shadow-steel: 6px 6px 0px var(--gym-steel-blue);
    --shadow-peach: 6px 6px 0px var(--gym-peach);

    /* REMOVED: All glows - brutalism has no soft effects */
    --glow-purple: none;
    --glow-purple-strong: none;
    --glow-cyan: none;
    --glow-gold: none;
}

html {
    height: 100%;
    overflow: hidden;
}

/* REMOVED: gridPulse - brutalism has no pulsing effects */
/* REMOVED: neonFlicker - brutalism has no glowing effects */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.1s linear forwards;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    /* BRUTALIST GRADIENT - Modern athletic background */
    background: linear-gradient(135deg,
        #0A0A0A 0%,
        #1C1C1E 40%,
        #2C2C2E 70%,
        #1C1C1E 100%
    );
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-primary);
    line-height: 1.6;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Testing Mode Banner */
.testing-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E72 100%);
    color: var(--brutalist-black);
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 10000;
    border-bottom: 3px solid var(--brutalist-black);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.testing-mode-icon {
    font-size: 1.2rem;
}

.testing-mode-text {
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Subtle concrete texture for brutalist aesthetic */
    background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3C/filter%3E%3Crect width="100" height="100" filter="url(%23noise)" opacity="0.03"/%3E%3C/svg%3E');
    pointer-events: none;
    z-index: 1;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}

/* BRUTALIST TYPOGRAPHY SYSTEM */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial Black', 'Impact', 'Franklin Gothic Bold', 'Arial Narrow', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--brutalist-white);
    line-height: 1.1;
    margin: 0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p, span, div {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Monospace only for technical data */
.note-display, .frequency-display, .stats, .data-value {
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
}

header {
    text-align: center;
    padding: 24px 20px 20px;
    background: var(--brutalist-black);
    color: var(--text-primary);
    border-radius: 0px;
    margin-bottom: 16px;
    box-shadow: none;
    position: relative;
    border: none;
    border-bottom: 4px solid var(--gym-coral);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.main-logo {
    width: 96px;
    height: 96px;
    filter: none;
    animation: none;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    background: none;
    padding: 0;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: none;
    }
    50% {
        transform: scale(1.02);
        filter: none;
    }
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.brand-text h1 {
    margin-bottom: 0;
}

.brand-text .subtitle {
    margin-top: 0;
}

header h1 {
    font-size: 1.8rem;
    margin-bottom: 2px;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--brutalist-white);
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Arial Black', 'Impact', 'Franklin Gothic Bold', sans-serif;
}

header h1::before {
    content: '';
    display: none;
}

.subtitle {
    font-size: 0.875rem;
    color: var(--gym-coral);
    font-weight: 500;
    text-shadow: none;
    letter-spacing: 0.05em;
}

.exercise-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.card {
    background: var(--brutalist-charcoal);
    border-radius: 0px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: none;
    border: 3px solid var(--brutalist-gray);
    transition: none;
    position: relative;
    backdrop-filter: none;
}

.card::before {
    display: none;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.card:hover {
    box-shadow: none;
    transform: none;
}

.card h2 {
    color: var(--lift-accent-pink);
    margin-bottom: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 2px rgba(255, 0, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.card p {
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.card ul {
    list-style: none;
    padding-left: 0;
}

.card ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.card ul li:last-child {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Setup Flow Styles */
.setup-step {
    text-align: center;
}

.setup-step .instruction {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 4px;
}

.setup-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.prompt-content {
    width: 100%;
    max-width: 500px;
    padding: 30px;
}

.prompt-content h2 {
    margin-bottom: 20px;
}

.prompt-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: var(--text-primary);
}

.range-choice-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px 0;
    align-items: center;
}

.range-choice-btn {
    width: 100%;
    max-width: 400px;
    min-height: 120px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.range-choice-btn .btn-icon {
    font-size: 2.5rem;
}

.range-choice-btn .btn-text {
    font-size: 1.25rem;
    font-weight: 700;
}

.range-choice-btn .btn-subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
}

.choice-divider {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    gap: 12px;
}

.choice-divider::before,
.choice-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--lift-accent-cyan), transparent);
}

.choice-divider span {
    color: var(--lift-accent-cyan);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0 8px;
}

.standard-ranges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.standard-range-btn {
    background: rgba(10, 10, 31, 0.9);
    color: var(--lift-accent-cyan);
    border: 3px solid var(--lift-accent-cyan);
    border-radius: 0px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: none cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    text-align: center;
}

.standard-range-btn:hover {
    background: rgba(10, 10, 31, 0.95);
    border-color: var(--lift-accent-pink);
    color: var(--lift-accent-pink);
    box-shadow: 0 0 20px var(--lift-accent-pink);
    transform: translateY(-4px);
}

.standard-range-btn .range-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lift-accent-pink);
}

.standard-range-btn .range-notes {
    font-size: 0.875rem;
    color: var(--lift-accent-cyan);
}

.standard-range-btn .range-freq {
    font-size: 0.75rem;
    opacity: 0.7;
    color: var(--text-secondary);
}

.vocal-range-container {
    margin: 20px 0 16px;
}

.pitch-display-with-range {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.pitch-display {
    flex: 1;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    min-width: 200px;
    padding: 32px 20px;
    background: rgba(10, 10, 31, 0.8);
    border-radius: 0px;
    box-shadow: inset 0 0 30px rgba(255, 0, 255, 0.3), var(--glow-purple);
    position: relative;
    overflow: hidden;
    border: 3px solid var(--lift-purple-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pitch-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 0, 255, 0.1) 2px,
            rgba(255, 0, 255, 0.1) 4px
        );
    pointer-events: none;
}

.pitch-display::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 48px;
    height: 48px;
    background-image: url('skeleton-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

.range-bar-container {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.range-bar {
    width: 60px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.range-labels {
    position: absolute;
    left: -40px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.range-label-top,
.range-label-bottom {
    writing-mode: horizontal-tb;
}

.range-bar-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000033;
    border: 3px solid var(--lift-accent-cyan);
    border-radius: 0px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.range-bar-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 8px,
            rgba(0, 255, 255, 0.1) 8px,
            rgba(0, 255, 255, 0.1) 9px
        );
    pointer-events: none;
}

.range-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
    border-radius: 0;
    transition: height 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: none;
}

.range-fill::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 3px,
            var(--lift-gold) 3px,
            var(--lift-gold) 4px,
            transparent 4px,
            transparent 6px
        );
    box-shadow: 0 0 15px var(--lift-gold);
}

.range-marker {
    position: absolute;
    width: calc(100% + 8px);
    left: -4px;
    height: 3px;
    background: var(--lift-accent-pink);
    box-shadow: 0 0 10px var(--lift-accent-pink), 0 0 20px var(--lift-accent-pink);
    transition: bottom 0.3s ease;
    z-index: 2;
}

.range-marker::before,
.range-marker::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--lift-accent-pink);
    box-shadow: 0 0 8px var(--lift-accent-pink);
}

.range-marker::before {
    left: -3px;
    top: -1.5px;
}

.range-marker::after {
    right: -3px;
    top: -1.5px;
}

.range-low-marker {
    position: absolute;
    width: calc(100% + 8px);
    left: -4px;
    height: 2px;
    background: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
    z-index: 1;
}

.note-name {
    font-size: 3rem;
    font-weight: 700;
    color: var(--lift-accent-pink);
    margin-bottom: 4px;
    text-shadow: 0 0 3px rgba(255, 0, 255, 0.9);
    position: relative;
    z-index: 1;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.2em;
    min-height: 3.5rem;
    max-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-freq {
    font-size: 0.875rem;
    color: var(--lift-accent-cyan);
    position: relative;
    z-index: 1;
    text-shadow: 0 0 2px rgba(0, 255, 255, 0.8);
    letter-spacing: 0.1em;
    min-height: 1.5rem;
    max-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button Styles */
.btn-primary {
    background: var(--gym-coral);
    color: var(--brutalist-black);
    border: 3px solid var(--brutalist-black);
    padding: 16px 32px;
    font-size: 1rem;
    border-radius: 0px;
    cursor: pointer;
    transition: none;
    font-weight: 900;
    margin: 6px;
    box-shadow: 4px 4px 0px #000000;
    text-shadow: none;
    position: relative;
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-primary::before {
    display: none;
}

.btn-primary:hover::before {
    display: none;
}

.btn-primary:hover {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
    background: var(--gym-peach);
}

.btn-primary:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-success {
    background: transparent;
    color: var(--lift-gold);
    border: 3px solid var(--lift-gold);
    padding: 12px 24px;
    font-size: 0.9375rem;
    border-radius: 0px;
    cursor: pointer;
    transition: none ease;
    font-weight: 700;
    margin: 6px;
    box-shadow: var(--glow-green);
    text-shadow: 0 0 2px rgba(57, 255, 20, 0.8);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--lift-gold), transparent);
    transition: left 0.5s;
    opacity: 0.3;
}

.btn-success:hover::before {
    left: 100%;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--lift-gold), 0 0 40px var(--lift-gold);
    background: rgba(57, 255, 20, 0.1);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 3px solid var(--border);
    padding: 10px 20px;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
    transition: none ease;
    font-weight: 500;
    margin-top: 8px;
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--text-secondary);
}

/* Range Summary */
.range-summary {
    background: var(--bg);
    padding: 16px;
    border-radius: 8px;
    margin: 12px 0;
    border: 3px solid var(--border);
}

.range-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.range-item:last-child {
    border-bottom: none;
}

.range-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.range-value {
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
}

/* Exercise Categories */
.exercise-category {
    margin-bottom: 32px;
}

.exercise-category:last-child {
    margin-bottom: 0;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--brutalist-black);
    border: none;
    border-bottom: 3px solid var(--brutalist-gray);
    border-radius: 0px;
    padding: 12px 16px;
    margin-bottom: 0;
    cursor: pointer;
    transition: none;
}

.category-header:hover {
    background: var(--brutalist-concrete);
    box-shadow: none;
}

.category-title {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.category-toggle {
    background: var(--brutalist-charcoal);
    border: 3px solid var(--gym-coral);
    border-radius: 0px;
    color: var(--gym-coral);
    font-size: 1.5rem;
    font-weight: bold;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    pointer-events: none;
}

.category-header:hover .category-toggle {
    background: var(--gym-coral);
    color: var(--brutalist-black);
}

.category-toggle:hover {
    background: var(--gym-coral);
    color: var(--brutalist-black);
    box-shadow: none;
}

.category-toggle:active {
    transform: scale(0.95);
}

.exercise-category.collapsed .category-toggle {
    transform: rotate(0deg);
}

.exercise-category:not(.collapsed) .category-toggle {
    transform: rotate(0deg);
}

.exercise-category.collapsed .category-header {
    border-radius: 0px;
    margin-bottom: 0;
}

.exercise-category.collapsed .category-description,
.exercise-category.collapsed .exercise-grid {
    display: none;
}

.category-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 0px;
}

/* Exercise Grid */
.exercise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
    border: none;
    border-radius: 0px;
    padding: 12px;
    background: transparent;
}

/* Exercise Placeholder */
.exercise-placeholder {
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 0px;
    padding: 32px 16px;
    text-align: center;
    opacity: 0.6;
}

.placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.exercise-placeholder p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.exercise-card {
    background: var(--brutalist-charcoal);
    border: 3px solid var(--brutalist-gray);
    border-radius: 0px;
    padding: 24px 20px;
    cursor: pointer;
    transition: none;
    text-align: center;
    position: relative;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
}

.exercise-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px var(--gym-coral);
    border-color: var(--gym-coral);
    background: var(--brutalist-concrete);
}

.exercise-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.exercise-card h3 {
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 600;
}

.exercise-card p {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: 0;
}

/* Exercise Card Wrapper with Checkbox */
.exercise-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exercise-card-wrapper .exercise-card {
    width: 100%;
    margin: 0;
}

.exercise-hide-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    transition: background 0.2s;
}

.exercise-hide-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.exercise-hide-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--gym-coral);
}

.exercise-hide-checkbox span {
    flex: 1;
}

/* Hidden Exercise State */
.exercise-card-wrapper.hidden-exercise .exercise-card {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--brutalist-black);
}

.exercise-card-wrapper.hidden-exercise .exercise-card:hover {
    transform: none;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
    border-color: var(--brutalist-gray);
}

.exercise-card-wrapper.hidden-exercise .exercise-card h3,
.exercise-card-wrapper.hidden-exercise .exercise-card p {
    text-decoration: line-through;
}

.exercise-card-wrapper.no-checkbox {
    gap: 0;
}

/* Intonation Exercise Styles */
.exercise-container {
    position: relative;
}

.exit-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: var(--error-red);
    color: var(--brutalist-white);
    border: 3px solid var(--brutalist-black);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 900;
    cursor: pointer;
    transition: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0px #000000;
    text-shadow: none;
}

.exit-btn:hover {
    background: var(--brutalist-white);
    color: var(--error-red);
    border-color: var(--error-red);
    box-shadow: 4px 4px 0px var(--error-red);
    text-shadow: none;
    transform: translate(-1px, -1px);
}

.back-btn {
    background: var(--brutalist-concrete);
    color: var(--brutalist-white);
    border: 3px solid var(--brutalist-gray);
    padding: 10px 20px;
    border-radius: 0px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.back-btn:hover {
    background: var(--gym-steel-blue);
    color: var(--brutalist-black);
    border-color: var(--gym-steel-blue);
    box-shadow: 6px 6px 0px var(--gym-steel-blue);
    text-shadow: none;
    transform: translate(-2px, -2px);
}

.exercise-main {
    text-align: center;
}

.tone-display {
    position: relative;
    margin: 20px 0 16px;
    padding: 40px 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 0px;
    box-shadow: var(--shadow-md);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.exercise-note {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

.exercise-freq {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

.exercise-instruction {
    font-size: 0.875rem;
    color: var(--kells-gold);
    font-style: italic;
    margin-top: 8px;
    position: relative;
    z-index: 2;
    opacity: 0.8;
}

.tone-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.tone-animation.playing {
    opacity: 1;
}

.tone-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
}

.tone-animation.playing .tone-wave {
    animation: pulse-wave 2s ease-out infinite;
}

.tone-animation.playing .tone-wave:nth-child(1) {
    animation-delay: 0s;
}

.tone-animation.playing .tone-wave:nth-child(2) {
    animation-delay: 0.7s;
}

.tone-animation.playing .tone-wave:nth-child(3) {
    animation-delay: 1.4s;
}

@keyframes pulse-wave {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.exercise-controls {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.btn-exercise {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: none ease;
    border: none;
    min-width: 200px;
    box-shadow: var(--shadow-sm);
}

.btn-stop {
    background: var(--danger);
    color: white;
}

.btn-stop:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-next {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.btn-next:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Big Exercise Buttons */
.exercise-controls-big {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 70vh;
    justify-content: center;
    align-items: center;
}

.btn-exercise-big {
    position: relative;
    width: 85%;
    max-width: 400px;
    min-height: 160px;
    padding: 0;
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: 0px;
    cursor: pointer;
    transition: none ease;
    border: 3px solid;
    background: rgba(10, 10, 31, 0.95);
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.btn-exercise-big.btn-stop {
    border-color: var(--lift-accent-pink);
    color: var(--lift-accent-pink);
}

.btn-exercise-big.btn-next {
    border-color: var(--lift-accent-cyan);
    color: var(--lift-accent-cyan);
}

.btn-exercise-big.btn-secondary {
    border-color: var(--lift-purple-main);
    color: var(--lift-purple-main);
    min-height: 100px;
}

/* Octave Match button sizing */
.octave-control-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.octave-control-row .btn-exercise-big {
    flex: 1;
}

#octaveExercise .btn-exercise-big.btn-next {
    /* High/Low note buttons - smaller to fit on screen */
    min-height: 110px;
}

#octaveExercise .btn-exercise-big.btn-next .btn-content {
    min-height: 110px;
    padding: 20px 20px;
}

#octaveExercise .btn-exercise-big.btn-next .btn-icon {
    font-size: 2.5rem;
    margin-bottom: 6px;
}

#octaveExercise .btn-exercise-big.btn-next .btn-text {
    font-size: 1.1rem;
}

#octaveExercise .btn-exercise-big.btn-stop {
    /* Play/Pause button - half size */
    min-height: 70px;
}

#octaveExercise .btn-exercise-big.btn-stop .btn-content {
    min-height: 70px;
    padding: 12px 20px;
}

#octaveExercise .btn-exercise-big.btn-stop .btn-icon {
    font-size: 1.75rem;
    margin-bottom: 3px;
}

#octaveExercise .btn-exercise-big.btn-stop .btn-text {
    font-size: 0.9rem;
}

#octaveExercise .btn-exercise-big.btn-secondary {
    /* Next Octave button - half the size of note buttons */
    min-height: 70px;
}

#octaveExercise .btn-exercise-big.btn-secondary .btn-content {
    min-height: 70px;
    padding: 12px 20px;
}

#octaveExercise .btn-exercise-big.btn-secondary .btn-icon {
    font-size: 1.75rem;
    margin-bottom: 3px;
}

#octaveExercise .btn-exercise-big.btn-secondary .btn-text {
    font-size: 0.9rem;
}

.btn-exercise-big:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px currentColor;
}

.btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
    padding: 30px 20px;
    position: relative;
    z-index: 2;
}

.btn-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    text-shadow: 0 0 20px currentColor;
}

.btn-text {
    font-size: 1.25rem;
    text-shadow: 0 0 10px currentColor;
    text-align: center;
}

/* Animation inside button - visualizer bars */
.tone-animation-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.tone-animation-btn.playing {
    opacity: 1;
}

.tone-animation-btn .tone-wave {
    position: relative;
    width: 10px;
    height: 100%;
    background: currentColor;
    border-radius: 5px;
    opacity: 0.8;
    transform-origin: center;
}

.tone-animation-btn.playing .tone-wave {
    animation: visualizer-bar-3d 0.8s ease-in-out infinite;
}

.tone-animation-btn.playing .tone-wave:nth-child(1) {
    animation-delay: 0s;
}

.tone-animation-btn.playing .tone-wave:nth-child(2) {
    animation-delay: 0.15s;
}

.tone-animation-btn.playing .tone-wave:nth-child(3) {
    animation-delay: 0.3s;
}

/* Smaller animation for compact scale buttons */
.tone-animation-btn-small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.tone-animation-btn-small.playing {
    opacity: 1;
}

.tone-animation-btn-small .tone-wave {
    position: relative;
    width: 6px;
    height: 100%;
    background: currentColor;
    border-radius: 3px;
    opacity: 0.8;
    transform-origin: center;
}

.tone-animation-btn-small.playing .tone-wave {
    animation: visualizer-bar-3d 0.8s ease-in-out infinite;
}

.tone-animation-btn-small.playing .tone-wave:nth-child(1) {
    animation-delay: 0s;
}

.tone-animation-btn-small.playing .tone-wave:nth-child(2) {
    animation-delay: 0.15s;
}

.tone-animation-btn-small.playing .tone-wave:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes visualizer-bar-3d {
    0%, 100% {
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Emanating waves outside button */
.btn-exercise-big.btn-stop::before,
.btn-exercise-big.btn-stop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 3px solid currentColor;
    border-radius: 0px;
    opacity: 0;
    pointer-events: none;
}

.btn-exercise-big.btn-stop::before {
    animation: emanate-box 2s ease-out infinite;
}

.btn-exercise-big.btn-stop::after {
    animation: emanate-box 2s ease-out infinite;
    animation-delay: 1s;
}

@keyframes emanate-box {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* Audio Settings Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 0px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    position: relative;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}

.modal-content h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 1.25rem;
}

.settings-section {
    margin: 16px 0;
}

.settings-section label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.settings-description {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
    opacity: 0.5;
}

/* Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0px;
    cursor: pointer;
    transition: none ease;
}

.toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: none ease;
}

.toggle-checkbox:checked + .toggle-label {
    background: var(--lift-accent-cyan);
}

.toggle-checkbox:checked + .toggle-label .toggle-slider {
    transform: translateX(24px);
}

.toggle-status {
    font-size: 0.9rem;
    color: var(--lift-accent-cyan);
    font-weight: 600;
    min-width: 30px;
}

.settings-select {
    width: 100%;
    padding: 10px 12px;
    border: 3px solid var(--border);
    border-radius: 8px;
    background: var(--dark-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
}

.settings-select option {
    background: var(--dark-bg);
    color: var(--text-primary);
}

.settings-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Microphone Gain Control */
.gain-control-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.gain-slider {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.gain-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--lift-purple-main);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--lift-purple-main);
    transition: none ease;
}

.gain-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--lift-purple-main);
}

.gain-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--lift-purple-main);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--lift-purple-main);
    transition: none ease;
}

.gain-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--lift-purple-main);
}

.gain-value {
    min-width: 45px;
    text-align: right;
    color: var(--lift-purple-main);
    font-weight: 600;
    font-size: 0.9rem;
}

.settings-btn {
    background: transparent;
    color: var(--brutalist-white);
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    transition: transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.9));
    padding: 4px;
}

.settings-btn:hover {
    color: var(--gym-coral);
    filter: drop-shadow(3px 3px 0px var(--gym-coral));
    transform: translateY(-2px);
}

.tone-counter-display {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
    color: var(--lift-accent-cyan);
}

.tone-counter-display .counter-label {
    color: var(--text-secondary);
    margin-right: 8px;
}

.tone-counter-display .counter-value {
    color: var(--lift-accent-pink);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 10px var(--lift-accent-pink);
}

/* Pitch Match button sizing */
#intonationExercise .btn-exercise-big.btn-stop {
    min-height: 180px;
}

#intonationExercise .btn-exercise-big.btn-secondary {
    min-height: 100px;
}

/* Glissando Exercise Styles */
.glissando-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
    padding: 20px 0;
}

.glissando-progress {
    text-align: center;
    margin-bottom: 10px;
}

.progress-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lift-purple-main);
    text-shadow: 0 0 15px var(--lift-purple-main);
    margin-bottom: 8px;
}

.progress-direction {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 10px currentColor;
    animation: pulse-glow 2s ease-in-out infinite;
}

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

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 40px var(--lift-gold);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes celebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(5deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.2) rotate(3deg);
    }
}

.glissando-instruction {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.6;
    padding: 0 20px;
}

.pitch-match-instruction {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.6;
    padding: 0 20px;
    margin-bottom: 16px;
}

/* Pitch Hold Styles */
.pitch-hold-success {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
}

.success-thumbs {
    font-size: 8rem;
    animation: thumbsUp 2s ease-out;
}

@keyframes thumbsUp {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0;
    }
}

.pitch-hold-success.animate-success .success-thumbs {
    animation: thumbsUp 2s ease-out;
}

/* Pitch Hold Bucket Styles */
.pitch-hold-controls-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    justify-content: center;
}

.pitch-hold-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pitch-hold-bucket {
    width: 120px;
    height: 160px;
    flex-shrink: 0;
}

.bucket-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.bucket-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.bucket-fill {
    position: absolute;
    bottom: 8%;
    left: 15%;
    width: 70%;
    height: 0%;
    background: linear-gradient(180deg,
        rgba(0, 255, 255, 0.3) 0%,
        rgba(0, 255, 255, 0.6) 50%,
        var(--lift-accent-cyan) 100%);
    /* Normal taper: wider at top (0% and 100%), narrower at bottom (10% and 90%) */
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
    transition: height 0.1s linear;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.6),
        inset 0 0 15px rgba(0, 255, 255, 0.4);
    z-index: 1;
}

/* Scale Match Up Styles - Vertical Layout */
/* Scale Match Up - Carousel Layout */
.scale-horizontal-layout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    align-items: stretch;
}

.scale-row {
    display: flex;
    width: 100%;
}

/* Top Do (high root note) - All the way to the right, 30% width */
.scale-row-do-high {
    justify-content: flex-end;
}

/* Bottom Do (low root note) - All the way to the left, 30% width */
.scale-row-do-low {
    justify-content: flex-start;
}

/* Re through Ti - 15% width (half of Do), evenly spaced horizontally */
/* Re is centered on high Do (right side), Ti is centered on low Do (left side) */
/* Calculate: Do is 30%, so center of high Do is at 85% from left (100% - 30%/2) */
/* Regular note width is 15%, so to center Re on high Do: 85% - 15%/2 = 77.5% from left */
/* Center of low Do is at 15% from left (30%/2) */
/* To center Ti on low Do: 15% - 15%/2 = 7.5% from left */
.scale-row-1 { justify-content: flex-start; margin-left: 7.5%; } /* Re - centered on low Do */
.scale-row-2 { justify-content: flex-start; margin-left: 20.83%; } /* Mi */
.scale-row-3 { justify-content: flex-start; margin-left: 34.17%; } /* Fa */
.scale-row-4 { justify-content: flex-start; margin-left: 47.5%; } /* Sol */
.scale-row-5 { justify-content: flex-start; margin-left: 60.83%; } /* La */
.scale-row-6 { justify-content: flex-start; margin-left: 74.17%; } /* Ti - centered on high Do (approaching right) */

.btn-scale-horizontal {
    position: relative;
    width: 15%; /* Half the size of Do notes */
    min-height: 50px;
    padding: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: none cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid;
    background: rgba(10, 10, 31, 0.95);
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-color: var(--lift-accent-cyan);
    color: var(--lift-accent-cyan);
}

.btn-scale-horizontal.btn-do-half {
    width: 30%; /* 30% of exercise area */
    border-color: var(--lift-accent-pink);
    color: var(--lift-accent-pink);
    min-height: 60px;
    border-width: 2.5px;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
}

.btn-scale-horizontal.current-note {
    border-color: var(--lift-gold);
    color: var(--lift-gold);
    box-shadow: 0 0 20px var(--lift-gold);
    transform: scale(1.03);
}

.btn-scale-horizontal:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px currentColor;
}

.btn-scale-horizontal.btn-do-half:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px currentColor;
}

.btn-scale-secondary {
    position: relative;
    width: 100%;
    min-height: 60px;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: none ease;
    border: 3px solid var(--lift-purple-main);
    background: rgba(10, 10, 31, 0.95);
    color: var(--lift-purple-main);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-scale-secondary:hover {
    transform: scale(1.02);
    box-shadow: 0 0 25px var(--lift-purple-main);
}

.btn-scale-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}

.solfege-label {
    font-size: 1.2rem;
    text-shadow: 0 0 10px currentColor;
    margin-top: 2px;
}

.btn-scale-note-compact .solfege-label {
    font-size: 1.1rem;
}

.root-label {
    font-size: 0.75rem;
    margin-top: 4px;
    opacity: 0.8;
}

.step-indicator-side {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--lift-purple-main);
    color: var(--dark-bg);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 10px var(--lift-purple-main);
    z-index: 10;
}

.step-indicator-side::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--lift-purple-main);
}

/* Pitch Match Small Button Styles */
/* Pitch visualizer styles removed - now uses tone-animation-btn like other exercises */

.exercise-controls-small {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.btn-exercise-small {
    position: relative;
    min-width: 140px;
    min-height: 100px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: none ease;
    border: 3px solid;
    background: rgba(10, 10, 31, 0.95);
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-exercise-small.btn-pause {
    border-color: var(--lift-accent-pink);
    color: var(--lift-accent-pink);
}

.btn-exercise-small.btn-next {
    border-color: var(--lift-accent-cyan);
    color: var(--lift-accent-cyan);
}

.btn-exercise-small:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px currentColor;
}

.btn-content-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.btn-icon-small {
    font-size: 2rem;
    margin-bottom: 6px;
    text-shadow: 0 0 10px currentColor;
}

.btn-text-small {
    font-size: 0.875rem;
    text-shadow: 0 0 8px currentColor;
}

@media (max-width: 600px) {
    .container {
        padding: 8px;
    }

    header {
        padding: 12px 16px 10px;
        margin-bottom: 8px;
    }

    header h1 {
        font-size: 1.25rem;
    }

    .subtitle {
        font-size: 0.8125rem;
    }

    .settings-btn {
        font-size: 1.5rem;
    }

    /* Removed old pitch animation responsive styles */

    .exercise-controls-small {
        gap: 8px;
    }

    .btn-exercise-small {
        min-width: 110px;
        min-height: 80px;
        padding: 12px;
    }

    .btn-icon-small {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }

    .btn-text-small {
        font-size: 0.75rem;
    }

    .card {
        padding: 12px;
        margin-bottom: 8px;
    }

    .card h2 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .pitch-display {
        margin: 16px 0 12px;
        padding: 24px 16px;
    }

    .note-name {
        font-size: 2rem;
    }

    .note-freq {
        font-size: 0.8125rem;
    }

    .exercise-grid {
        gap: 8px;
    }

    .exercise-card {
        padding: 16px 12px;
    }

    .exercise-icon {
        font-size: 1.75rem;
        margin-bottom: 6px;
    }

    .exercise-card h3 {
        font-size: 0.9375rem;
    }

    .exercise-card p {
        font-size: 0.75rem;
    }

    .btn-primary, .btn-success {
        padding: 10px 20px;
        font-size: 0.875rem;
        margin: 4px;
    }

    .btn-secondary {
        padding: 8px 16px;
        font-size: 0.8125rem;
    }

    .exercise-note {
        font-size: 2rem;
    }

    .exercise-freq {
        font-size: 0.875rem;
    }

    .tone-display {
        margin: 16px 0 12px;
        padding: 32px 20px;
        min-height: 160px;
    }

    .btn-exercise {
        padding: 12px 24px;
        font-size: 0.9375rem;
        min-width: 160px;
    }

    .exit-btn {
        width: 32px;
        height: 32px;
        font-size: 1.125rem;
        top: 12px;
        right: 16px;
    }

    .tone-animation {
        width: 100px;
        height: 100px;
    }

    .modal-content {
        padding: 20px;
    }

    .range-summary {
        padding: 12px;
        margin: 10px 0;
    }

    .range-item {
        padding: 6px 0;
    }

    footer {
        padding: 8px;
        margin-top: 8px;
    }
}

/* Debug Panel */
.debug-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    background: rgba(10, 10, 31, 0.5);
    border: 3px solid rgba(176, 38, 255, 0.4);
    border-radius: 8px;
    padding: 12px;
    z-index: 2500;
    box-shadow: 0 0 30px rgba(176, 38, 255, 0.2);
    font-family: 'Courier New', monospace;
    pointer-events: none;
    backdrop-filter: blur(2px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lift-purple-main);
}

.debug-header h3 {
    margin: 0;
    color: var(--lift-purple-main);
    font-size: 0.95rem;
    text-shadow: 0 0 10px var(--lift-purple-main);
}

.debug-header-buttons {
    display: flex;
    gap: 5px;
}

.debug-close-btn,
.debug-minimize-btn {
    background: transparent;
    border: none;
    color: var(--lift-purple-main);
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none ease;
    border-radius: 50%;
    pointer-events: auto;
}

.debug-close-btn:hover,
.debug-minimize-btn:hover {
    background: rgba(176, 38, 255, 0.2);
}

.debug-close-btn:hover {
    transform: rotate(90deg);
}

.debug-minimize-btn {
    font-size: 2rem;
    line-height: 1;
}

/* Debug Toggle Button */
.debug-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(176, 38, 255, 0.8);
    border: 3px solid var(--lift-purple-main);
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2500;
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.5);
    transition: none ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(176, 38, 255, 0.8);
}

.debug-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.debug-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 6px;
    border: 3px solid rgba(176, 38, 255, 0.3);
}

.debug-section h4 {
    margin: 0 0 4px 0;
    color: var(--lift-accent-cyan);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.debug-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    gap: 8px;
}

.debug-row:last-child {
    margin-bottom: 0;
}

.debug-label {
    color: var(--text-secondary);
    font-size: 0.7rem;
    white-space: nowrap;
}

.debug-value {
    color: var(--lift-gold);
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 0 8px currentColor;
    text-align: right;
}

.debug-stability {
    font-size: 0.8rem;
}

.debug-status-match {
    color: var(--lift-gold);
    font-weight: 700;
    animation: pulse 1s ease-in-out infinite;
}

.debug-status-off {
    color: var(--lift-accent-pink);
}

.debug-status-none {
    color: var(--text-secondary);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Debug Volume Meter */
.debug-volume-meter {
    flex: 1;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: hidden;
    border: 3px solid rgba(176, 38, 255, 0.5);
    margin-left: 8px;
    min-width: 100px;
    position: relative;
}

.debug-volume-fill {
    height: 100%;
    width: 0%;
    background: var(--lift-gold);
    transition: width 0.05s ease-out, background-color 0.2s ease;
    box-shadow: 0 0 10px currentColor;
    min-width: 2px;
}

.debug-candidates {
    font-size: 0.65rem;
    color: var(--text-secondary);
    line-height: 1.3;
    word-wrap: break-word;
    margin-top: 2px;
}

/* Tips and Tricks Modal */
.tips-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tips-modal-content {
    background: var(--dark-bg);
    border: 3px solid var(--lift-accent-cyan);
    border-radius: 0px;
    max-width: 500px;
    width: 100%;
    padding: 30px;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tips-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--lift-accent-cyan);
    font-size: 2.5rem;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none ease;
    border-radius: 50%;
}

.tips-close-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    transform: rotate(90deg);
}

.tip-card {
    text-align: center;
    margin-bottom: 30px;
}

.tip-image {
    font-size: 4rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.tip-title {
    color: var(--lift-accent-pink);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
}

.tip-text {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.tips-navigation {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-tip-nav {
    flex: 0;
    padding: 8px 16px;
    background: transparent;
    border: 3px solid var(--lift-purple-main);
    color: var(--lift-purple-main);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: none ease;
    min-width: 50px;
}

.btn-tip-nav:hover {
    background: rgba(176, 38, 255, 0.2);
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.4);
    transform: translateY(-2px);
}

.btn-tip-nav:active {
    transform: translateY(0);
}

.btn-tip-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-tip-nav:disabled:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}

@media (max-width: 600px) {
    .tips-modal-content {
        padding: 20px;
        max-width: 90%;
    }

    .tip-image {
        font-size: 3rem;
    }

    .tip-title {
        font-size: 1.25rem;
    }

    .tip-text {
        font-size: 0.9rem;
    }

    .tips-navigation {
        gap: 10px;
    }
}

/* Tone Slide Exercise */
#toneSlideExercise,
#halfStepSlideExercise,
#wholeStepSlideExercise {
    background: var(--dark-bg);
    background-image:
        linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    background-position: -1px -1px;
}

.tone-slide-main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    padding: 0;
    position: relative;
}

.tone-slide-accuracy {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--dark-bg);
    background-image:
        linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    background-position: -1px -1px;
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
    padding: 12px 16px;
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.4);
    z-index: 10;
}

.accuracy-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.accuracy-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 10px var(--lift-accent-cyan);
}

.tone-slide-target {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    text-align: center;
    z-index: 5;
}

.target-note {
    font-size: 3rem;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 20px var(--lift-accent-cyan);
}

.tone-slide-slider-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100%;
    position: relative;
    padding: 0;
}

.tone-slide-slider {
    position: relative;
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tone-slide-track {
    position: absolute;
    width: 20px;
    height: 100%;
    background: linear-gradient(to bottom,
        var(--lift-accent-pink) 0%,
        var(--lift-purple-main) 25%,
        var(--lift-accent-cyan) 50%,
        var(--lift-gold) 75%,
        var(--lift-gold) 100%);
    border-radius: 0px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(176, 38, 255, 0.5);
}

.tone-slide-knob {
    position: absolute;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, var(--lift-accent-cyan), var(--lift-purple-main));
    border: 3px solid white;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    z-index: 10;
    box-shadow: 0 0 25px var(--lift-accent-cyan), 0 0 35px var(--lift-purple-main);
    transition: none ease, box-shadow 0.2s ease;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tone-slide-knob:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 35px var(--lift-accent-cyan), 0 0 45px var(--lift-purple-main);
}

.tone-slide-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px;
    gap: 20px;
    max-width: 500px;
    margin: 20px;
    background: var(--dark-bg);
    background-image:
        linear-gradient(0deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, var(--grid-color) 25%, var(--grid-color) 26%, transparent 27%, transparent 74%, var(--grid-color) 75%, var(--grid-color) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    background-position: -1px -1px;
    border-radius: 4px;
    box-shadow: var(--glow-purple);
    border: 3px solid var(--lift-purple-main);
    backdrop-filter: blur(10px);
}

.tone-slide-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
}

.tone-slide-top-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.btn-exercise-small {
    flex: 1;
    min-height: 60px;
    padding: 12px;
    font-size: 0.85rem;
    border-radius: 0px;
    font-weight: 600;
    cursor: pointer;
    transition: none ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-exercise-large {
    width: 100%;
    min-height: 80px;
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 0px;
    font-weight: 600;
    cursor: pointer;
    transition: none ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-content-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.play-pause-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: currentColor;
    transition: none ease;
}

.play-pause-icon-small {
    font-size: 1rem;
    line-height: 1;
    color: currentColor;
    transition: none ease;
}

.btn-scale-content-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

/* Tone Darts Styles */
.dart-game-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    padding: 60px 20px 20px;
}

/* Corner Score Displays */
.dart-rounds-corner,
.dart-score-corner {
    position: absolute;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background: rgba(10, 10, 31, 0.9);
    border: 3px solid var(--lift-accent-cyan);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.dart-rounds-corner {
    left: 20px;
}

.dart-score-corner {
    right: 20px;
}

.dart-corner-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dart-corner-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 10px var(--lift-accent-cyan);
    min-width: 40px;
    text-align: center;
}
.dart-target-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(138, 43, 226, 0.9);
    border: 3px solid var(--lift-purple-main);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
    z-index: 10;
}
.dart-target-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lift-purple-main);
    text-shadow: 0 0 10px var(--lift-purple-main);
    text-align: center;
}

/* Tutorial Styles */
.tutorial-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
    min-height: 400px;
}

.tutorial-step-indicator {
    text-align: center;
    font-size: 1rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.tutorial-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tutorial-title {
    font-size: 2rem;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 10px var(--lift-accent-cyan);
    margin: 0;
    text-align: center;
}

.tutorial-content {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.tutorial-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: auto;
}

.tutorial-final-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-tutorial {
    padding: 15px 40px;
    font-size: 1.1rem;
    min-width: 150px;
}

/* Pitch Visualization Styles */
.pitch-viz-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
}

.pitch-viz-frequency-display {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 255, 255, 0.05);
    border: 3px solid var(--lift-accent-cyan);
    border-radius: 8px;
}

.pitch-viz-interval-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pitch-viz-select {
    padding: 8px 12px;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: var(--lift-accent-cyan);
    border: 3px solid var(--lift-purple-main);
    border-radius: 4px;
    cursor: pointer;
}

.pitch-viz-select:hover {
    border-color: var(--lift-accent-cyan);
}

.pitch-viz-freq-display-grid {
    display: flex;
    gap: 40px;
}

.pitch-viz-interval-name {
    font-size: 1.2rem;
    color: var(--lift-purple-main);
    text-align: center;
}

.pitch-viz-interval-text {
    text-shadow: 0 0 10px var(--lift-purple-main);
}

.pitch-viz-button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.pitch-viz-slider-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pitch-viz-slider-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
}

.pitch-viz-slider {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.pitch-viz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--lift-purple-main);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--lift-purple-main);
    transition: box-shadow 0.2s;
}

.pitch-viz-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 20px var(--lift-purple-main);
}

.pitch-viz-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--lift-purple-main);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--lift-purple-main);
    transition: box-shadow 0.2s;
}

.pitch-viz-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 20px var(--lift-purple-main);
}

.pitch-viz-slider-markers {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 0 5px;
}

.pitch-viz-freq-value,
.pitch-viz-note-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pitch-viz-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.pitch-viz-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--lift-accent-cyan);
    text-shadow: 0 0 10px var(--lift-accent-cyan);
    min-width: 120px;
    text-align: center;
}

.pitch-viz-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pitch-viz-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid var(--lift-purple-main);
    border-radius: 8px;
}

.pitch-viz-item h3 {
    font-size: 1rem;
    color: var(--lift-purple-main);
    text-align: center;
    margin: 0;
}

.pitch-viz-canvas {
    width: 100%;
    height: 150px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .pitch-viz-grid {
        grid-template-columns: 1fr;
    }

    .pitch-viz-frequency-display {
        flex-direction: column;
        gap: 15px;
    }
}

.dartboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    max-width: 500px;
    /* Ensure container maintains square ratio on iOS */
    width: 100%;
}

.dartboard {
    position: relative;
    width: 400px;
    height: 400px;
    /* Use min() to maintain square on iOS - whichever is smaller */
    max-width: min(85vw, 70vh);
    max-height: min(85vw, 70vh);
    aspect-ratio: 1 / 1; /* Force square for Safari/iOS */
    border-radius: 50%;
    /* Ensure circular on iOS Safari */
    -webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
    /* Prevent squashing */
    flex-shrink: 0;
    background: radial-gradient(circle,
        /* Bullseye (0-5 cents) - innermost */
        #ffffff 0%,
        #ffffff 5%,
        /* Perfect green zone (5-10 cents) */
        #00ff00 5%,
        #00ff00 10%,
        /* Good chartreuse zone (10-20 cents) */
        #7fff00 10%,
        #7fff00 20%,
        /* Yellow zone (20-30 cents) */
        #ffff00 20%,
        #ffff00 30%,
        /* Orange zone (30-40 cents) */
        #ffa500 30%,
        #ffa500 40%,
        /* Red zone (40-50 cents) */
        #ff4500 40%,
        #ff4500 50%,
        /* Dark red zone (50-60 cents) */
        var(--lift-accent-pink) 50%,
        var(--lift-accent-pink) 60%,
        /* Black ring (60-80 cents / half-step range) */
        #1a1a1a 60%,
        #1a1a1a 80%,
        /* Purple outer ring (>80 cents / whole-step range) */
        #6a0dad 80%,
        #6a0dad 100%
    );
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.3);
    border: 4px solid #2a2a2a;
}

.dart-segment {
    /* Not used in vertical dartboard - zones are in gradient */
    display: none;
}

.dart-black-ring {
    display: none;
}

.dart-main-area {
    display: none;
}

.dart-bullseye {
    display: none;
}

/* Black number band (outermost) */
.dart-number-band {
    width: 100%;
    height: 100%;
    background: #000;
}

/* Outer double ring (red/green alternating) */
.dart-double-ring {
    width: 88%;
    height: 88%;
    background: conic-gradient(
        from 0deg,
        var(--lift-accent-pink) 0deg, var(--lift-accent-pink) 18deg,
        var(--lift-gold) 18deg, var(--lift-gold) 36deg,
        var(--lift-accent-pink) 36deg, var(--lift-accent-pink) 54deg,
        var(--lift-gold) 54deg, var(--lift-gold) 72deg,
        var(--lift-accent-pink) 72deg, var(--lift-accent-pink) 90deg,
        var(--lift-gold) 90deg, var(--lift-gold) 108deg,
        var(--lift-accent-pink) 108deg, var(--lift-accent-pink) 126deg,
        var(--lift-gold) 126deg, var(--lift-gold) 144deg,
        var(--lift-accent-pink) 144deg, var(--lift-accent-pink) 162deg,
        var(--lift-gold) 162deg, var(--lift-gold) 180deg,
        var(--lift-accent-pink) 180deg, var(--lift-accent-pink) 198deg,
        var(--lift-gold) 198deg, var(--lift-gold) 216deg,
        var(--lift-accent-pink) 216deg, var(--lift-accent-pink) 234deg,
        var(--lift-gold) 234deg, var(--lift-gold) 252deg,
        var(--lift-accent-pink) 252deg, var(--lift-accent-pink) 270deg,
        var(--lift-gold) 270deg, var(--lift-gold) 288deg,
        var(--lift-accent-pink) 288deg, var(--lift-accent-pink) 306deg,
        var(--lift-gold) 306deg, var(--lift-gold) 324deg,
        var(--lift-accent-pink) 324deg, var(--lift-accent-pink) 342deg,
        var(--lift-gold) 342deg, var(--lift-gold) 360deg
    );
}

/* Outer single (black/white alternating) */
.dart-outer-single {
    width: 75%;
    height: 75%;
    background: conic-gradient(
        from 0deg,
        #1a1a1a 0deg, #1a1a1a 18deg,
        #f5f5dc 18deg, #f5f5dc 36deg,
        #1a1a1a 36deg, #1a1a1a 54deg,
        #f5f5dc 54deg, #f5f5dc 72deg,
        #1a1a1a 72deg, #1a1a1a 90deg,
        #f5f5dc 90deg, #f5f5dc 108deg,
        #1a1a1a 108deg, #1a1a1a 126deg,
        #f5f5dc 126deg, #f5f5dc 144deg,
        #1a1a1a 144deg, #1a1a1a 162deg,
        #f5f5dc 162deg, #f5f5dc 180deg,
        #1a1a1a 180deg, #1a1a1a 198deg,
        #f5f5dc 198deg, #f5f5dc 216deg,
        #1a1a1a 216deg, #1a1a1a 234deg,
        #f5f5dc 234deg, #f5f5dc 252deg,
        #1a1a1a 252deg, #1a1a1a 270deg,
        #f5f5dc 270deg, #f5f5dc 288deg,
        #1a1a1a 288deg, #1a1a1a 306deg,
        #f5f5dc 306deg, #f5f5dc 324deg,
        #1a1a1a 324deg, #1a1a1a 342deg,
        #f5f5dc 342deg, #f5f5dc 360deg
    );
}

/* Triple ring (red/green) */
.dart-triple-ring {
    width: 54%;
    height: 54%;
    background: conic-gradient(
        from 0deg,
        var(--lift-accent-pink) 0deg, var(--lift-accent-pink) 18deg,
        var(--lift-gold) 18deg, var(--lift-gold) 36deg,
        var(--lift-accent-pink) 36deg, var(--lift-accent-pink) 54deg,
        var(--lift-gold) 54deg, var(--lift-gold) 72deg,
        var(--lift-accent-pink) 72deg, var(--lift-accent-pink) 90deg,
        var(--lift-gold) 90deg, var(--lift-gold) 108deg,
        var(--lift-accent-pink) 108deg, var(--lift-accent-pink) 126deg,
        var(--lift-gold) 126deg, var(--lift-gold) 144deg,
        var(--lift-accent-pink) 144deg, var(--lift-accent-pink) 162deg,
        var(--lift-gold) 162deg, var(--lift-gold) 180deg,
        var(--lift-accent-pink) 180deg, var(--lift-accent-pink) 198deg,
        var(--lift-gold) 198deg, var(--lift-gold) 216deg,
        var(--lift-accent-pink) 216deg, var(--lift-accent-pink) 234deg,
        var(--lift-gold) 234deg, var(--lift-gold) 252deg,
        var(--lift-accent-pink) 252deg, var(--lift-accent-pink) 270deg,
        var(--lift-gold) 270deg, var(--lift-gold) 288deg,
        var(--lift-accent-pink) 288deg, var(--lift-accent-pink) 306deg,
        var(--lift-gold) 306deg, var(--lift-gold) 324deg,
        var(--lift-accent-pink) 324deg, var(--lift-accent-pink) 342deg,
        var(--lift-gold) 342deg, var(--lift-gold) 360deg
    );
}

/* Inner single (black/white) */
.dart-inner-single {
    width: 46%;
    height: 46%;
    background: conic-gradient(
        from 0deg,
        #1a1a1a 0deg, #1a1a1a 18deg,
        #f5f5dc 18deg, #f5f5dc 36deg,
        #1a1a1a 36deg, #1a1a1a 54deg,
        #f5f5dc 54deg, #f5f5dc 72deg,
        #1a1a1a 72deg, #1a1a1a 90deg,
        #f5f5dc 90deg, #f5f5dc 108deg,
        #1a1a1a 108deg, #1a1a1a 126deg,
        #f5f5dc 126deg, #f5f5dc 144deg,
        #1a1a1a 144deg, #1a1a1a 162deg,
        #f5f5dc 162deg, #f5f5dc 180deg,
        #1a1a1a 180deg, #1a1a1a 198deg,
        #f5f5dc 198deg, #f5f5dc 216deg,
        #1a1a1a 216deg, #1a1a1a 234deg,
        #f5f5dc 234deg, #f5f5dc 252deg,
        #1a1a1a 252deg, #1a1a1a 270deg,
        #f5f5dc 270deg, #f5f5dc 288deg,
        #1a1a1a 288deg, #1a1a1a 306deg,
        #f5f5dc 306deg, #f5f5dc 324deg,
        #1a1a1a 324deg, #1a1a1a 342deg,
        #f5f5dc 342deg, #f5f5dc 360deg
    );
}

/* Bull outer (green - 25 points) */
.dart-bull-outer {
    width: 10%;
    height: 10%;
    background: var(--lift-gold);
    box-shadow: 0 0 10px rgba(34, 139, 34, 0.5);
}

/* Bull center (red - 50 points) */
.dart-bull-center {
    width: 5%;
    height: 5%;
    background: var(--lift-accent-pink);
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.6);
}

/* Dividing wires */
.dart-wire {
    position: absolute;
    background: #888;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

.dart-wire-h {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.dart-wire-v {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.dart-wire-d1 {
    display: none; /* Hide diagonal wire */
}

.dart-wire-d2 {
    display: none; /* Hide diagonal wire */
}

/* Dartboard numbers */
.dart-number {
    position: absolute;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    pointer-events: none;
    z-index: 15;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Position numbers around the circle (20 positions, 18° apart)
   Standard dartboard sequence: 20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8, 11, 14, 9, 12, 5 */
.dart-number-0 { top: 0%; left: 50%; transform: translate(-50%, 0); } /* 20 at top (0°) */
.dart-number-1 { top: 5%; left: 69%; transform: translate(-50%, 0); } /* 1 (18°) */
.dart-number-2 { top: 15%; left: 85%; transform: translate(-50%, 0); } /* 18 (36°) */
.dart-number-3 { top: 31%; left: 95%; transform: translate(-50%, 0); } /* 4 (54°) */
.dart-number-4 { top: 50%; left: 100%; transform: translate(-50%, -50%); } /* 13 (90°) */
.dart-number-5 { top: 69%; left: 95%; transform: translate(-50%, -50%); } /* 6 (126°) */
.dart-number-6 { top: 85%; left: 85%; transform: translate(-50%, -50%); } /* 10 (144°) */
.dart-number-7 { top: 95%; left: 69%; transform: translate(-50%, -50%); } /* 15 (162°) */
.dart-number-8 { top: 100%; left: 50%; transform: translate(-50%, -100%); } /* 2 (180°) */
.dart-number-9 { top: 95%; left: 31%; transform: translate(-50%, -50%); } /* 17 (198°) */
.dart-number-10 { top: 85%; left: 15%; transform: translate(-50%, -50%); } /* 3 (216°) */
.dart-number-11 { top: 69%; left: 5%; transform: translate(-50%, -50%); } /* 19 (234°) */
.dart-number-12 { top: 50%; left: 0%; transform: translate(-50%, -50%); } /* 7 (270°) */
.dart-number-13 { top: 31%; left: 5%; transform: translate(-50%, 0); } /* 16 (306°) */
.dart-number-14 { top: 15%; left: 15%; transform: translate(-50%, 0); } /* 8 (324°) */
.dart-number-15 { top: 5%; left: 31%; transform: translate(-50%, 0); } /* 11 (342°) */
.dart-number-16 { top: 0%; left: 50%; transform: translate(-50%, 0); } /* 14 (360°/0° - next to 20) */
.dart-number-17 { top: 5%; left: 69%; transform: translate(-50%, 0); } /* 9 (18° offset) */
.dart-number-18 { top: 15%; left: 85%; transform: translate(-50%, 0); } /* 12 (36° offset) */
.dart-number-19 { top: 31%; left: 95%; transform: translate(-50%, 0); } /* 5 (54° offset) */

.dart {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 700;
    transform: translate(-50%, -50%) scale(0);
    transition: none ease-out;
    pointer-events: none;
    z-index: 20;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.dart-landed {
    transform: translate(-50%, -50%) scale(1);
}

/* Button styling */
.dart-button-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.btn-dart-play {
    min-width: 200px;
    min-height: 60px;
    padding: 15px 30px;
    font-size: 1rem;
    border-radius: 0px;
    background: linear-gradient(135deg, var(--lift-accent-cyan), var(--lift-purple-main));
    color: var(--text-primary);
    border: 3px solid var(--lift-accent-cyan);
    font-weight: 600;
    cursor: pointer;
    transition: none ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.btn-dart-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

/* Mobile adjustments */
@media (max-height: 700px) {
    .tone-slide-knob {
        width: 50px;
        height: 50px;
    }

    .target-note {
        font-size: 2rem;
    }

    .tone-slide-controls {
        gap: 15px;
        padding: 20px;
    }

    .btn-exercise-small {
        min-height: 50px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .btn-exercise-large {
        min-height: 100px;
        padding: 15px;
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .tone-slide-controls {
        padding: 20px;
        max-width: 100%;
    }

    .btn-exercise-small {
        font-size: 0.85rem;
    }

    .btn-exercise-large {
        font-size: 1.1rem;
    }
}

/* ========================================
   Audio Diagnostics Exercise
   ======================================== */

.diag-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.diag-instructions {
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.diag-test-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.btn-diag {
    padding: 12px 20px;
    font-size: 1rem;
    border: 3px solid var(--lift-accent-cyan);
    background: rgba(0, 255, 255, 0.1);
    color: var(--lift-accent-cyan);
    border-radius: 8px;
    cursor: pointer;
    transition: none ease;
}

.btn-diag:hover:not(:disabled) {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-diag:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-diag.btn-stop {
    border-color: var(--neon-red);
    color: var(--neon-red);
    background: rgba(255, 68, 68, 0.1);
}

.btn-diag.btn-stop:hover:not(:disabled) {
    background: rgba(255, 68, 68, 0.2);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.3);
}

.diag-current-test {
    padding: 15px;
    background: rgba(0, 255, 255, 0.05);
    border-left: 4px solid var(--lift-accent-cyan);
    border-radius: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.diag-waveform-section canvas {
    width: 100%;
    height: 200px;
    background: #0a0a0a;
    border-radius: 8px;
    border: 3px solid rgba(0, 255, 255, 0.3);
}

.diag-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.diag-metric {
    padding: 12px;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 6px;
    border: 3px solid rgba(0, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.diag-label {
    font-weight: 600;
    color: var(--lift-accent-cyan);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diag-value {
    font-size: 1.1rem;
    color: var(--text-color);
    font-family: 'Courier New', monospace;
}

.diag-results-section {
    max-height: 400px;
}

.diag-results {
    background: #0a0a0a;
    border: 3px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    color: var(--text-color);
}

.diag-result-line {
    margin-bottom: 4px;
}

.diag-result-line:empty {
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .diag-test-buttons {
        grid-template-columns: 1fr;
    }

    .diag-metrics-grid {
        grid-template-columns: 1fr;
    }

    .diag-waveform-section canvas {
        height: 150px;
    }
}

/* Feel the Root Exercise Styles */
.dual-tone-display {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0px;
    border: 3px solid var(--border);
}

.tone-display-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tone-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tone-animation-display {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: rgba(45, 80, 22, 0.3);
    border-radius: 8px;
    border: 3px solid rgba(61, 121, 52, 0.3);
    opacity: 0.5;
    transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.tone-animation-display.playing {
    opacity: 1;
    border-color: rgba(61, 121, 52, 0.8);
    background: rgba(45, 80, 22, 0.5);
    box-shadow: 0 0 20px rgba(61, 121, 52, 0.3);
}

.tone-animation-display .tone-wave {
    position: relative;
    width: 8px;
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    opacity: 0.7;
    transform-origin: center;
}

.tone-animation-display.playing .tone-wave {
    animation: visualizer-bar-3d 0.8s ease-in-out infinite;
}

.tone-animation-display.playing .tone-wave:nth-child(1) {
    animation-delay: 0s;
}

.tone-animation-display.playing .tone-wave:nth-child(2) {
    animation-delay: 0.15s;
}

.tone-animation-display.playing .tone-wave:nth-child(3) {
    animation-delay: 0.3s;
}

.current-freq-display {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
}

.btn-exercise-big.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(61, 121, 52, 0.4);
}

/* Feel the Root Button Styles */
.btn-feel-root {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    min-height: 120px;
    border-color: var(--lift-gold);
    color: var(--lift-gold);
    background: rgba(10, 10, 31, 0.95);
}

.btn-feel-root .btn-text {
    font-size: 1rem;
    font-weight: 600;
    z-index: 2;
    position: relative;
}

.btn-feel-root.playing {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(61, 121, 52, 0.5);
}

/* Hide tone animation by default */
.btn-feel-root .tone-animation-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show tone animation when playing */
.btn-feel-root.playing .tone-animation-btn {
    opacity: 1;
}

/* Horizontal button group for Both and Swap buttons */
.btn-group-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

/* Both Notes Button - Half height, centered between note buttons */
.btn-both-notes {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    min-height: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: none ease;
    border: 3px solid var(--lift-accent-cyan);
    color: var(--lift-accent-cyan);
    background: rgba(10, 10, 31, 0.95);
    overflow: visible;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0px;
}

.btn-both-notes:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px var(--lift-accent-cyan);
}

.btn-both-notes .btn-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-shadow: 0 0 10px currentColor;
}

/* Exercise Instructions */
.instruction-box {
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid var(--border);
    border-radius: 0px;
    padding: 20px;
    margin-bottom: 20px;
}

.instruction-content {
    margin-bottom: 15px;
}

.instruction-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.instruction-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.instruction-prev,
.instruction-next {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: none ease;
}

.instruction-prev:hover:not(:disabled),
.instruction-next:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.instruction-prev:disabled,
.instruction-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.instruction-progress {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
}

.instruction-step {
    color: var(--primary-color);
    font-weight: 600;
}

.instruction-separator {
    color: var(--text-secondary);
}

.instruction-total {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .instruction-box {
        padding: 15px;
    }

    .instruction-text {
        font-size: 0.875rem;
    }

    .instruction-prev,
    .instruction-next {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Responsive adjustments for dual tone display */
@media (max-width: 768px) {
    .dual-tone-display {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .tone-display-item {
        width: 100%;
    }

    .tone-animation-display {
        width: 100%;
        max-width: 200px;
    }
}


/* ===== Tuning Fork Visualization Exercise ===== */
.tuning-fork-viz-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.tuning-fork-top-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.tuning-fork-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0px;
}

.tuning-fork-frequency-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.tuning-fork-viz-container {
    width: 100%;
    min-height: 500px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuning-fork-combined-canvas {
    width: 100%;
    height: 500px;
    border-radius: 0px;
}

.tuning-fork-freq-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tuning-fork-freq-control label {
    min-width: 80px;
    text-align: right;
    color: var(--lift-accent-cyan);
}

.tuning-fork-freq-sliders {
    display: flex;
    gap: 5px;
    flex-direction: column;
    flex: 1;
}

.tuning-fork-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
}

.tuning-fork-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--lift-accent-cyan);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--lift-accent-cyan);
}

.tuning-fork-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--lift-accent-cyan);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--lift-accent-cyan);
}

.tuning-fork-freq-control input[type="number"] {
    width: 80px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--lift-purple-main);
    color: white;
    font-size: 16px;
    border-radius: 5px;
}

.tuning-fork-interval-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--lift-purple-main);
    text-align: center;
    margin-top: 5px;
}

.tuning-fork-button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.tuning-fork-settings-panel {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
    padding: 15px;
}

.tuning-fork-settings-header {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--lift-accent-cyan);
    padding: 10px;
    user-select: none;
}

.tuning-fork-settings-header:hover {
    color: var(--lift-purple-main);
}

.tuning-fork-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.tuning-fork-setting-group {
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
}

.tuning-fork-setting-group h4 {
    color: var(--lift-accent-cyan);
    margin: 0 0 15px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

/* Cymatic Visualizations Styles */
.cymatic-viz-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.cymatic-type-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.cymatic-type-btn {
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--lift-accent-cyan);
    color: var(--lift-accent-cyan);
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: none ease;
}

.cymatic-type-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 15px var(--lift-accent-cyan);
}

.cymatic-type-btn.active {
    background: var(--lift-accent-cyan);
    color: black;
    box-shadow: 0 0 20px var(--lift-accent-cyan);
}

.cymatic-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
    padding: 20px;
}

.cymatic-tone-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cymatic-tone-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cymatic-tone-control label {
    min-width: 120px;
    color: var(--lift-accent-cyan);
    font-weight: bold;
}

.cymatic-position-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cymatic-position-slider {
    flex: 1;
    min-width: 150px;
}

.cymatic-freq-slider {
    flex: 1;
    min-width: 150px;
}

.cymatic-tone-control input[type="number"] {
    width: 80px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--lift-purple-main);
    color: white;
    font-size: 16px;
    border-radius: 5px;
}

.cymatic-button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cymatic-viz-container {
    width: 100%;
    min-height: 600px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0px;
    overflow: hidden;
}

.cymatic-canvas {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 0px;
    display: block;
    margin: 0 auto;
}

.cymatic-settings-panel {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
    padding: 15px;
}

.cymatic-settings-header {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--lift-accent-cyan);
    padding: 10px;
    user-select: none;
}

.cymatic-settings-header:hover {
    color: var(--lift-purple-main);
}

.cymatic-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.cymatic-setting-group {
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
}

.cymatic-setting-group h4 {
    color: var(--lift-accent-cyan);
    margin: 0 0 15px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.tuning-fork-setting-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: white;
    font-size: 14px;
}

.tuning-fork-setting-group label span:first-child {
    min-width: 140px;
    color: rgba(255, 255, 255, 0.8);
}

.tuning-fork-setting-group label span:last-child {
    min-width: 50px;
    text-align: right;
    color: var(--lift-purple-main);
    font-weight: bold;
}

.tuning-fork-setting-group input[type="range"] {
    flex: 1;
    accent-color: var(--lift-purple-main);
}

.tuning-fork-setting-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--lift-purple-main);
}

.tuning-fork-setting-group input[type="color"] {
    width: 60px;
    height: 30px;
    border: 3px solid var(--lift-purple-main);
    border-radius: 5px;
    cursor: pointer;
}

.btn-preset {
    background: rgba(138, 43, 226, 0.3);
    border: 3px solid var(--lift-purple-main);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px;
    transition: none ease;
}

.btn-preset:hover {
    background: rgba(138, 43, 226, 0.6);
    box-shadow: 0 0 15px var(--lift-purple-main);
}

.tuning-fork-viz-canvas-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.tuning-fork-viz-canvas {
    width: 100%;
    max-width: 900px;
    height: 500px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
}

@media (max-width: 768px) {
    .tuning-fork-settings-grid {
        grid-template-columns: 1fr;
    }

    .tuning-fork-viz-canvas {
        height: 400px;
    }

    .tuning-fork-freq-control {
        flex-direction: column;
        gap: 5px;
    }

    .tuning-fork-freq-control label {
        min-width: auto;
        text-align: center;
    }
}

/* Overview Exercise Settings Panel */
.overview-settings-panel {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid var(--lift-purple-main);
    border-radius: 0px;
    padding: 15px;
    margin-top: 20px;
}

.overview-settings-header {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--lift-accent-cyan);
    padding: 10px;
    user-select: none;
}

.overview-settings-header:hover {
    color: var(--lift-purple-main);
}

.overview-settings-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    padding: 10px;
}

.overview-settings-content label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 16px;
}

.overview-settings-content input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Wave Visualization */
.wave-viz-frame {
    position: relative;
    margin: 12px 0 24px;
    padding: 14px;
    border-radius: 0px;
    background: linear-gradient(135deg, rgba(10, 12, 28, 0.95), rgba(18, 20, 46, 0.95));
    border: 3px solid rgba(0, 255, 255, 0.25);
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(0, 255, 255, 0.2),
        inset 0 0 12px rgba(0, 255, 255, 0.08);
}

.wave-viz-frame::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 0px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 255, 255, 0.05) 0,
            rgba(0, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 12px
        ),
        linear-gradient(180deg, rgba(255, 0, 255, 0.08), rgba(0, 255, 255, 0.05));
    opacity: 0.6;
    pointer-events: none;
    filter: blur(0.3px);
}

.wave-viz-frame-inner {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    background: radial-gradient(circle at 15% 15%, rgba(0, 255, 255, 0.1), transparent 45%),
                radial-gradient(circle at 85% 25%, rgba(255, 0, 255, 0.1), transparent 50%),
                rgba(2, 4, 20, 0.95);
    border: 3px solid rgba(0, 255, 255, 0.2);
}

#waveVizCanvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
}

.wave-viz-controls {
    display: grid;
    gap: 18px;
    margin-top: 12px;
    background: rgba(12, 14, 32, 0.8);
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-radius: 0px;
    padding: 18px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}

.wave-viz-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.wave-viz-primary-btn {
    font-size: 1rem;
    padding: 12px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), rgba(0, 128, 255, 0.35));
    border: 3px solid rgba(0, 255, 255, 0.5);
    color: var(--text-primary);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.wave-viz-primary-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.35), rgba(0, 128, 255, 0.45));
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.4);
}

.wave-viz-random {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(255, 128, 0, 0.3));
    border-color: rgba(255, 0, 255, 0.5);
    box-shadow: 0 0 14px rgba(255, 0, 255, 0.3);
}

.wave-viz-random:hover {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.4), rgba(255, 128, 0, 0.4));
}

.wave-viz-toggle-group {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 12px;
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(0, 255, 255, 0.15);
}

.wave-viz-toggle-label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: rgba(0, 255, 255, 0.8);
    text-transform: uppercase;
}

.wave-viz-toggle-option {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 999px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: none ease;
    font-size: 0.85rem;
}

.wave-viz-toggle-option input {
    accent-color: var(--lift-accent-cyan);
}

.wave-viz-toggle-option:hover {
    border-color: rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.1);
}

.wave-viz-tone-panel {
    border-radius: 0px;
    border: 3px solid rgba(0, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    padding: 12px 16px;
}

.wave-viz-tone-panel summary {
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    list-style: none;
    position: relative;
    padding-left: 18px;
}

.wave-viz-tone-panel summary::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 0;
    transition: none ease;
}

.wave-viz-tone-panel[open] summary::before {
    transform: rotate(90deg);
}

.wave-viz-tone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.wave-viz-tone-card {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0px;
    padding: 14px;
    border: 3px solid rgba(0, 255, 255, 0.15);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
    display: grid;
    gap: 10px;
}

.wave-viz-tone-root {
    border-color: rgba(0, 255, 255, 0.25);
    box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.1);
}

.wave-viz-tone-interval {
    border-color: rgba(255, 0, 255, 0.25);
    box-shadow: inset 0 0 12px rgba(255, 0, 255, 0.1);
}

.wave-viz-tone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wave-viz-tone-header h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.wave-viz-slider-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 255, 255, 0.7);
}

.wave-viz-tone-card input[type="range"],
.wave-viz-tone-card input[type="number"] {
    width: 100%;
}

.wave-viz-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(0, 255, 255, 0.12);
}

.wave-viz-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wave-viz-meta-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 255, 255, 0.6);
}

.wave-viz-meta-value {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.wave-viz-solfege {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid rgba(0, 255, 255, 0.12);
    border-radius: 0px;
}

.wave-viz-solfege-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 255, 255, 0.75);
}

.wave-viz-solfege-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.wave-viz-solfege-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.08);
    border: 3px solid rgba(0, 255, 255, 0.2);
}

.wave-viz-solfege-btn:hover {
    background: rgba(0, 255, 255, 0.18);
    border-color: rgba(0, 255, 255, 0.4);
}

.wave-viz-note {
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(0, 255, 255, 0.75);
    margin-top: -4px;
}

@media (max-width: 720px) {
    .wave-viz-tone-grid {
        grid-template-columns: 1fr;
    }

    #waveVizCanvas {
        min-height: 220px;
    }

    .wave-viz-meta {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wave-viz-toggle-group {
        flex-direction: column;
    }
}

/* Combined Visualization */
.combined-viz-main {
    display: grid;
    gap: 20px;
}

@media (min-width: 1024px) {
    .combined-viz-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.combined-viz-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.combined-viz-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.combined-viz-description {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(0, 255, 255, 0.65);
}

.combined-canvas-wrap {
    position: relative;
    background: rgba(10, 10, 31, 0.85);
    border: 3px solid rgba(0, 255, 255, 0.2);
    border-radius: 0px;
    padding: 12px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 640px);
    margin: 0 auto;
}

.combined-canvas-wrap canvas {
    display: block;
    border-radius: 8px;
    background: #050510;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.combined-canvas-wrap canvas[data-interference="canvas"] {
    aspect-ratio: 1 / 1;
    max-width: 520px;
}

.combined-controls {
    display: grid;
    gap: 12px;
}

.combined-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.combined-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 255, 255, 0.75);
}

.combined-control-row input[type="range"] {
    flex: 1;
    min-width: 120px;
}

.combined-control-row input[type="number"] {
    width: 90px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 3px solid rgba(0, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
}

.combined-solfege-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.combined-solfege-row {
    align-items: center;
}

.combined-view-toggle {
    gap: 16px;
}

.combined-toggle-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.combined-toggle-option input[type="radio"] {
    accent-color: var(--lift-accent-cyan);
}

.combined-meta-row {
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.combined-meta {
    font-size: 0.82rem;
    color: rgba(0, 255, 255, 0.8);
}

.combined-viz-card .btn-control {
    padding: 6px 12px;
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .combined-viz-main {
        grid-template-columns: 1fr;
    }
}

.combined-home-card {
    margin-top: 16px;
}

.combined-home-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.combined-home-description {
    margin: 6px 0 16px 0;
    font-size: 0.85rem;
    color: rgba(0, 255, 255, 0.7);
}

.combined-home-grid {
    display: grid;
    grid-template-columns: 1fr;
}


/* ===================================
   Combined Visualization Claude
   =================================== */

.claude-controls-panel {
    margin-bottom: 20px;
    padding: 20px;
}

.claude-primary-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.claude-tone-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .claude-tone-controls {
        grid-template-columns: 1fr;
    }
}

.claude-tone-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claude-tone-group .control-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(0, 255, 255, 0.9);
    text-transform: uppercase;
}

.claude-tone-group .slider {
    width: 100%;
}

.claude-tone-group .number-input {
    width: 120px;
}

.claude-solfege {
    margin-bottom: 20px;
}

.claude-solfege .control-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(0, 255, 255, 0.9);
    text-transform: uppercase;
}

.solfege-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-solfege {
    padding: 8px 16px;
    font-size: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: none, box-shadow 0.2s;
}

.btn-solfege:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-solfege:active {
    transform: translateY(0);
}

.claude-view-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.viz-selection-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.claude-view-toggles .toggle-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0, 255, 255, 0.9);
    white-space: nowrap;
    padding: 4px 8px;
    margin: 0;
    width: auto !important;
    height: auto !important;
    position: static !important;
    background: transparent !important;
}

.claude-view-toggles .toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.claude-view-toggles .toggle-label span {
    user-select: none;
    line-height: 1.2;
}

.claude-wave-settings {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    margin-top: 8px;
}

.claude-wave-settings .control-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(0, 255, 255, 0.9);
    text-transform: uppercase;
    margin: 0;
}

.wave-mode-options {
    display: flex;
    gap: 16px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0, 255, 255, 0.9);
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.radio-label span {
    user-select: none;
}

.claude-viz-panels {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}

.claude-panel {
    background: #0a0a14;
    border-radius: 8px;
    padding: 8px;
    border: 3px solid rgba(0, 255, 255, 0.1);
    width: 100%;
    margin-bottom: 0;
}

.claude-panel .panel-title {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: rgba(0, 255, 255, 0.95);
    text-align: center;
}

.panel-hz-labels {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: normal;
}

.claude-canvas-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 160px;
    background: #0a0a14;
    border-radius: 8px;
    overflow: hidden;
}

.claude-canvas-container canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Play button active state */
.btn-control.playing {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Instructions Panel */
.claude-instructions {
    margin-bottom: 20px;
    padding: 20px;
}

.claude-instruction-content {
    min-height: 120px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.claude-instruction-content p {
    margin: 0 0 12px 0;
}

.claude-instruction-content p:last-child {
    margin-bottom: 0;
}

.claude-instruction-content strong {
    color: rgba(0, 255, 255, 0.95);
}

.claude-instruction-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.claude-instruction-indicator {
    font-size: 14px;
    color: rgba(0, 255, 255, 0.8);
    min-width: 60px;
    text-align: center;
}

.claude-instruction-nav button {
    flex-shrink: 0;
}

.claude-instruction-nav button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Tutorial System Styles */
.tutorial-panel {
    position: relative;
    z-index: 10;
    margin-bottom: -20px;
    padding: 12px;
}

.tutorial-text {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.tutorial-text p {
    margin: 0 0 12px 0;
}

.tutorial-text p:last-child {
    margin-bottom: 0;
}

.tutorial-text strong {
    color: rgba(0, 255, 255, 0.95);
}

.tutorial-inline-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 4px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.3));
    border: 3px solid rgba(0, 255, 136, 0.6);
    color: white;
    cursor: pointer;
    transition: none;
    white-space: nowrap;
}

.tutorial-inline-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 255, 136, 0.4);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.5), rgba(0, 200, 100, 0.5));
}

.tutorial-inline-btn:active {
    transform: translateY(0);
}

.tutorial-btn-pulse {
    animation: tutorial-pulse 2s ease-in-out infinite;
}

@keyframes tutorial-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(118, 75, 162, 0.6);
        transform: scale(1.05);
    }
}

.tutorial-text-fade-in {
    animation: tutorial-text-fade 0.6s ease-out;
}

@keyframes tutorial-text-fade {
    0% {
        opacity: 0;
        filter: brightness(1.5);
    }
    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

.tutorial-ui-fade-in {
    animation: tutorial-ui-fade 0.4s ease-out;
}

@keyframes tutorial-ui-fade {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-flash {
    animation: tutorial-flash 0.6s ease-out;
}

@keyframes tutorial-flash {
    0%, 100% {
        background-color: transparent;
        box-shadow: none;
    }
    50% {
        background-color: rgba(0, 255, 136, 0.2);
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    }
}

.wave-flash-overlay {
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: 10;
    height: 100%;
}

.wave-flash-left {
    left: 0;
    width: 50%;
}

.wave-flash-right {
    right: 0;
    width: 50%;
}

/* Tutorial Color Slider */
.tutorial-color-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, rgba(100, 100, 100, 0.3), rgba(150, 150, 150, 0.5));
    outline: none;
    cursor: pointer;
}

.tutorial-color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid rgba(0, 0, 0, 0.5);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tutorial-color-slider::-webkit-slider-thumb:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 12px rgba(0, 255, 136, 0.6);
}

.tutorial-color-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid rgba(0, 0, 0, 0.5);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tutorial-color-slider::-moz-range-thumb:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 12px rgba(0, 255, 136, 0.6);
}

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tutorial-nav [data-tutorial="progress"] {
    font-size: 12px;
    color: rgba(0, 255, 255, 0.8);
    min-width: 50px;
    text-align: center;
}

.tutorial-nav button {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 3px solid rgba(102, 126, 234, 0.4);
    color: white;
    cursor: pointer;
    transition: none;
    white-space: nowrap;
}

.tutorial-nav button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tutorial-nav button:active:not(:disabled) {
    transform: translateY(0);
}

.tutorial-nav button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Tutorial State Classes */
.tutorial-hidden {
    display: none !important;
}

.tutorial-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.tutorial-highlight {
    outline: 3px solid rgba(0, 255, 136, 0.8) !important;
    outline-offset: 4px !important;
    animation: tutorial-pulse 1.5s ease-in-out infinite;
}

@keyframes tutorial-pulse {
    0%, 100% {
        outline-color: rgba(0, 255, 136, 0.8);
    }
    50% {
        outline-color: rgba(0, 255, 136, 0.4);
    }
}

/* Simplified Controls */
.simplified-controls {
    margin-bottom: 20px;
    padding: 20px;
}

.simple-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-group-left {
    justify-content: flex-start;
    flex: 0 0 auto;
}

.control-group-right {
    justify-content: flex-start;
    flex: 1 1 auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

.controls-divider {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg,
        rgba(0, 255, 255, 0) 0%,
        rgba(0, 255, 255, 0.3) 20%,
        rgba(0, 255, 255, 0.5) 50%,
        rgba(0, 255, 255, 0.3) 80%,
        rgba(0, 255, 255, 0) 100%
    );
    flex-shrink: 0;
    flex-grow: 1;
    margin: 0 auto;
}

.control-group .control-label {
    margin: 0;
    white-space: nowrap;
}

.freq-display {
    font-size: 16px;
    font-family: 'Courier New', monospace;
    color: rgba(0, 255, 255, 0.95);
    font-weight: bold;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.freq-display-clickable {
    cursor: pointer;
    transition: none;
}

.freq-display-clickable:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.2);
}

.freq-display-clickable:active {
    transform: translateY(0);
}

.freq-display-clickable.playing {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.2) 100%);
    border-color: rgba(240, 147, 251, 0.5);
    opacity: 1 !important;
}

.interval-freq-value {
    min-width: 40px;
    text-align: right;
}

.hz-label {
    font-size: 14px;
    color: rgba(0, 255, 255, 0.7);
}

.hz-arrows-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-increment-small {
    min-width: 28px;
    height: 18px;
    padding: 0;
    font-size: 12px;
    border-radius: 3px;
    background: rgba(102, 126, 234, 0.2);
    border: 3px solid rgba(102, 126, 234, 0.4);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-increment-small:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.6);
}

.btn-increment-small:active:not(:disabled) {
    transform: scale(0.95);
}

.btn-increment,
.btn-chromatic {
    min-width: 36px;
    height: 36px;
    padding: 0;
    font-size: 16px;
    border-radius: 4px;
    background: rgba(102, 126, 234, 0.2);
    border: 3px solid rgba(102, 126, 234, 0.4);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: none;
}

.btn-increment:hover:not(:disabled),
.btn-chromatic:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.6);
    transform: translateY(-1px);
}

.btn-increment:active:not(:disabled),
.btn-chromatic:active:not(:disabled) {
    transform: translateY(0);
}

.btn-chromatic {
    font-size: 18px;
    font-weight: bold;
}

.btn-play {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 3px solid rgba(102, 126, 234, 0.4);
    color: white;
    cursor: pointer;
    transition: none;
    white-space: nowrap;
}

.btn-play-icon {
    padding: 0;
    min-width: 36px;
    height: 36px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-play:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-play:active:not(:disabled) {
    transform: translateY(0);
}

.btn-play.playing {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.simple-play-both {
    text-align: center;
    margin-bottom: 20px;
}

.btn-play-both {
    font-size: 18px !important;
    padding: 12px 32px !important;
}

.simple-settings {
    padding-top: 16px;
    border-top: 1px solid rgba(0, 255, 255, 0.1);
}

/* Advanced Controls */
.advanced-controls {
    margin-top: 20px;
    padding: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .simple-controls-row {
        gap: 16px;
    }

    .control-group {
        gap: 8px;
    }

    .tutorial-nav button {
        padding: 4px 8px;
        font-size: 14px;
    }

    .tutorial-nav [data-tutorial="progress"] {
        font-size: 11px;
        min-width: 40px;
    }

    .tutorial-nav {
        gap: 6px;
    }

    .freq-display {
        font-size: 14px;
        padding: 6px 12px;
    }

    .interval-freq-value {
        min-width: 35px;
    }

    .btn-increment-small {
        min-width: 24px;
        height: 16px;
        font-size: 11px;
    }

    .btn-increment,
    .btn-chromatic {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .btn-play {
        padding: 6px 12px;
        font-size: 13px;
    }

    .btn-play-icon {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .control-label {
        font-size: 14px;
    }
}

/* Tutorial Navigation Button Styles */
.tutorial-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    background: linear-gradient(135deg, rgba(40,40,50,0.3), rgba(30,30,40,0.3)) !important;
    border-color: rgba(100,100,100,0.4) !important;
    box-shadow: none !important;
    color: rgba(150,150,150,0.6) !important;
}

.tutorial-nav-btn:disabled:hover {
    transform: none;
}

.tutorial-nav-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.tutorial-nav-btn:not(:disabled):active {
    transform: translateY(0);
}

.tutorial-prev-btn:not(:disabled):hover {
    background: linear-gradient(135deg, rgba(120,120,140,0.4), rgba(100,100,120,0.4));
    border-color: rgba(255,255,255,0.6);
}

.tutorial-next-btn:not(:disabled):hover {
    background: linear-gradient(135deg, rgba(0,255,136,0.5), rgba(0,220,120,0.5));
    border-color: rgba(0,255,136,0.8);
    box-shadow: 0 6px 16px rgba(0,255,136,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ===========================
   Glissando Slider Controls
   =========================== */

/* BRUTALIST DIAGONAL SLIDER */
.glissando-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 30px 20px;
}

/* BUTTONS CONTAINER - Positioned below slider, spread along track */
.glissando-buttons-container {
    position: relative;
    width: 450px;
    height: 60px;
    transform: rotate(-15deg);
}

/* BRUTALIST SQUARE BUTTONS */
.glissando-jump-btn {
    position: absolute;
    background: var(--brutalist-charcoal);
    border: 3px solid var(--brutalist-gray);
    padding: 0;
    cursor: pointer;
    color: var(--gym-steel-blue);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.glissando-btn-small {
    width: 35px;
    height: 35px;
}

.glissando-btn-medium {
    width: 40px;
    height: 40px;
}

.glissando-btn-big {
    width: 50px;
    height: 50px;
}

/* Button Positioning - Spread along slider track */
.glissando-btn-down.glissando-btn-big {
    left: 20px;
    top: 48%;  /* Adjusted from 50% to move up slightly */
    transform: translateY(-50%);
}

.glissando-btn-down.glissando-btn-medium {
    left: 85px;
    top: 48%;  /* Adjusted from 50% to move up slightly */
    transform: translateY(-50%);
}

.glissando-btn-down.glissando-btn-small {
    left: 140px;
    top: 48%;  /* Adjusted from 50% to move up slightly */
    transform: translateY(-50%);
}

.glissando-btn-up.glissando-btn-small {
    right: 100px;
    top: 48%;  /* Match down buttons alignment */
    transform: translateY(-50%);
}

.glissando-btn-up.glissando-btn-medium {
    right: 45px;
    top: 48%;  /* Match down buttons alignment */
    transform: translateY(-50%);
}

.glissando-btn-up.glissando-btn-big {
    right: -20px;
    top: 48%;  /* Match down buttons alignment */
    transform: translateY(-50%);
}

.glissando-jump-btn:hover:not(:disabled) {
    border-color: var(--gym-coral);
    color: var(--gym-coral);
    box-shadow: var(--shadow-coral);
}

.glissando-jump-btn:active:not(:disabled) {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* No transform change - inherit the normal translateY(-50%) centering */
}

/* DISABLED STATE - Greyed out when interval not playing */
.glissando-jump-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--brutalist-gray);
    color: var(--brutalist-gray);
}

.glissando-jump-btn:disabled:hover {
    border-color: var(--brutalist-gray);
    color: var(--brutalist-gray);
    box-shadow: var(--shadow-sm);
}

/* DIAGONAL SLIDER WRAPPER */
.glissando-slider-wrapper {
    transform: rotate(-15deg);
    width: 400px;
}

/* BRUTALIST SLIDER TRACK */
.glissando-slider-diagonal {
    -webkit-appearance: none;
    appearance: none;
    width: 400px;
    height: 40px;
    background: var(--brutalist-concrete);
    border: 3px solid var(--brutalist-gray);
    box-shadow: var(--shadow-md);
    outline: none;
    pointer-events: none;
    cursor: default;
}

.glissando-slider-diagonal::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
}

.glissando-slider-diagonal::-moz-range-track {
    height: 100%;
    background: transparent;
    border: none;
}

/* BRUTALIST SQUARE THUMB - Read-only indicator */
.glissando-slider-diagonal::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background: rgba(128, 128, 128, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
}

.glissando-slider-diagonal::-webkit-slider-thumb:hover {
    /* No hover effect - not interactive */
    background: rgba(128, 128, 128, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.glissando-slider-diagonal::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: rgba(128, 128, 128, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: default;
    border-radius: 0;
    opacity: 0.7;
    pointer-events: none;
}

.glissando-slider-diagonal::-moz-range-thumb:hover {
    /* No hover effect - not interactive */
    background: rgba(128, 128, 128, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hash marks for slider (tutorial mode) */
.glissando-hash-marks {
    position: absolute;
    width: 400px;
    height: 40px;
    pointer-events: none;
    top: 0;
    left: 0;
}

.glissando-hash-mark {
    position: absolute;
    width: 3px;
    height: 40px;
    background: rgba(0, 255, 136, 0.6);
    transform: translateX(-1.5px);
    top: 0;
}

/* Target frequency label */
.glissando-target-label {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 15px;
    display: none;
    letter-spacing: 0.5px;
}

/* HASH MARKS FOR TUTORIAL SLIDER */
.slider-hash-marks-container {
    position: absolute;
    width: 450px;
    height: 60px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-15deg);
    z-index: 1;
}

.slider-hash-mark {
    position: absolute;
    width: 2px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transform: rotate(90deg); /* Perpendicular to slider (-15deg slider + 105deg rotation = 90deg from horizontal) */
    transform-origin: center;
}

/* Tutorial slider container adjustments */
.tutorial-glissando-slider-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 30px 0;
}

/* Tutorial tone indicator (reuses system exercise indicator styles) */
.tutorial-tone-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.tutorial-tone-indicator:hover {
    transform: scale(1.05);
}

.tutorial-tone-indicator:active {
    transform: scale(0.98);
}

.tutorial-tone-indicator .indicator-animation {
    color: rgba(255, 255, 255, 0.8);
}

.tutorial-tone-indicator:hover .indicator-animation {
    border-color: var(--gym-coral);
}

.tutorial-tone-indicator.playing .indicator-animation {
    border-color: rgba(0, 255, 136, 0.6);
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    color: rgba(0, 255, 136, 0.9);
}

.tutorial-tone-indicator.playing .indicator-wave {
    animation: pulse-indicator 2s ease-out infinite;
}

.tutorial-tone-indicator.playing .indicator-wave:nth-child(1) {
    animation-delay: 0s;
}

.tutorial-tone-indicator.playing .indicator-wave:nth-child(2) {
    animation-delay: 0.7s;
}

.tutorial-tone-indicator.playing .indicator-wave:nth-child(3) {
    animation-delay: 1.4s;
}

/* PLAY/PAUSE BUTTON FOR INTERVAL INDICATOR */
.interval-play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    color: var(--gym-steel-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
}

.interval-play-pause-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Change icon color when interval is playing */
.tone-indicator.playing .interval-play-pause-btn {
    color: rgba(0, 255, 136, 0.9);
}

/* Slider Glissando Instruction Arrow */
.slider-glissando-instruction {
    position: absolute;
    top: 50%;
    left: 110px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.slider-glissando-instruction .instruction-arrow {
    font-size: 32px;
    color: var(--gym-coral);
    font-weight: bold;
}

.slider-glissando-instruction .instruction-text {
    font-size: 18px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* BORDER PULSE ANIMATION */
@keyframes border-pulse-slider {
    0% {
        border-color: var(--gym-steel-blue);
    }
    50% {
        border-color: var(--gym-coral);
    }
    100% {
        border-color: var(--gym-steel-blue);
    }
}

.tone-indicator.border-pulsing .indicator-animation {
    animation: border-pulse-slider 300ms ease-in-out;
}

/* Glissando Slider Layout (Tutorial Step-specific) */
.glissando-slider-layout {
    display: flex;
    gap: 15px;
}

.glissando-slider-layout .content-area {
    flex: 1;
    min-width: 0;
}

.glissando-slider-layout .controls-area {
    flex: 0 0 auto;
    width: 100px;
}

/* RESPONSIVE: MOBILE */
@media (max-width: 768px) {
    .glissando-slider-diagonal {
        width: 300px;
        height: 35px;
    }

    .glissando-slider-diagonal::-webkit-slider-thumb {
        width: 35px;
        height: 35px;
        background: rgba(128, 128, 128, 0.5);
        border: 3px solid rgba(255, 255, 255, 0.3);
        opacity: 0.7;
        pointer-events: none;
    }

    .glissando-slider-diagonal::-moz-range-thumb {
        width: 35px;
        height: 35px;
        background: rgba(128, 128, 128, 0.5);
        border: 3px solid rgba(255, 255, 255, 0.3);
        opacity: 0.7;
        pointer-events: none;
    }

    /* Mobile hash marks adjustments */
    .slider-hash-marks-container {
        width: 340px;
        height: 50px;
    }

    .slider-hash-mark {
        width: 1.5px;
        height: 6px;
    }

    /* Mobile tutorial tone indicator */
    .tutorial-tone-indicator .indicator-animation {
        width: 70px;
        height: 70px;
    }

    .tutorial-tone-indicator .indicator-label {
        font-size: 0.8rem;
    }

    .glissando-btn-small {
        width: 28px;
        height: 28px;
    }

    .glissando-btn-medium {
        width: 32px;
        height: 32px;
    }

    .glissando-btn-big {
        width: 40px;
        height: 40px;
    }

    .glissando-buttons-container {
        width: 340px;
        height: 50px;
    }

    .glissando-btn-down.glissando-btn-big {
        left: 15px;
    }

    .glissando-btn-down.glissando-btn-medium {
        left: 65px;
    }

    .glissando-btn-down.glissando-btn-small {
        left: 110px;
    }

    .glissando-btn-up.glissando-btn-small {
        right: 80px;
    }

    .glissando-btn-up.glissando-btn-medium {
        right: 35px;
    }

    .glissando-btn-up.glissando-btn-big {
        right: -15px;
    }

    .interval-play-pause-btn {
        width: 40px;
        height: 40px;
    }

    .slider-glissando-instruction .instruction-arrow {
        font-size: 24px;
    }

    .slider-glissando-instruction .instruction-text {
        font-size: 16px;
    }

    .glissando-slider-layout {
        gap: 10px;
    }

    .glissando-slider-layout .controls-area {
        width: 80px;
    }
}

/* ===========================
   Interval System Exercises
   =========================== */

.system-exercise-progress {
    text-align: center;
    margin-bottom: 10px;
}

.system-exercise-progress .progress-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.7;
}

.system-exercise-note-display {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.note-display-main {
    text-align: center;
}

.note-display-main .note-name {
    font-size: 2rem;
    font-weight: 600;
    color: var(--lift-gold);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

/* Tone Indicators */
.system-exercise-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
}

.tone-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: none ease;
}

.tone-indicator:hover {
    transform: scale(1.05);
}

.tone-indicator:active {
    transform: scale(0.98);
}

.indicator-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.indicator-animation {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    transition: none ease;
}

.solfege-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--brutalist-white);
    text-shadow: none;
    z-index: 10;
    pointer-events: none;
}

.middle-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.middle-icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 80px;
    height: 80px;
}

.middle-icon-content .icon-face {
    max-height: 80px;
    max-width: 80px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: invert(1);
}

.middle-icon-content .icon-ear {
    max-height: 40px;
    max-width: 40px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: invert(1);
}

.middle-icon-content .icon-face.flipped {
    transform: scaleX(-1);
}

.tone-indicator:hover .indicator-animation {
    border-color: var(--gym-coral);
    box-shadow: none;
}

.indicator-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid var(--gym-coral);
    border-radius: 50%;
    opacity: 0;
}

.tone-indicator.playing .indicator-animation {
    border-color: rgba(0, 255, 136, 0.6);
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.tone-indicator.playing .indicator-wave {
    animation: pulse-indicator 2s ease-out infinite;
}

.tone-indicator.playing .indicator-wave:nth-child(1) {
    animation-delay: 0s;
}

.tone-indicator.playing .indicator-wave:nth-child(2) {
    animation-delay: 0.7s;
}

.tone-indicator.playing .indicator-wave:nth-child(3) {
    animation-delay: 1.4s;
}

@keyframes pulse-indicator {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Glissando Indicator */
.glissando-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.glissando-head {
    height: 112px;
    width: 112px;
    display: inline-block;
    position: relative;
    background-image: url('images/headtalking.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.glissando-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg,
            rgba(135, 206, 250, 0) 0%,
            rgba(135, 206, 250, 0) 35%,
            rgba(135, 206, 250, 0.7) 42%,
            rgba(135, 206, 250, 0.9) 46%,
            rgba(100, 180, 255, 1) 50%,
            rgba(135, 206, 250, 0.9) 54%,
            rgba(135, 206, 250, 0.7) 58%,
            rgba(135, 206, 250, 0) 65%,
            rgba(135, 206, 250, 0) 100%
        );
    background-size: 400% 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
    animation: flow-gradient-head 4.5s linear infinite;
    mix-blend-mode: lighten;
    -webkit-mask-image: url('images/headtalking.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('images/headtalking.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    clip-path: polygon(75% 50%, 100% 50%, 100% 100%, 75% 100%);
    pointer-events: none;
}

@keyframes flow-gradient-head {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: -300% center;
    }
}

.glissando-notes {
    height: 112px;
    width: 200px;
    display: inline-block;
    position: relative;
    background-image:
        linear-gradient(90deg,
            rgba(135, 206, 250, 0) 0%,
            rgba(135, 206, 250, 0) 35%,
            rgba(135, 206, 250, 0.7) 42%,
            rgba(135, 206, 250, 0.9) 46%,
            rgba(100, 180, 255, 1) 50%,
            rgba(135, 206, 250, 0.9) 54%,
            rgba(135, 206, 250, 0.7) 58%,
            rgba(135, 206, 250, 0) 65%,
            rgba(135, 206, 250, 0) 100%
        ),
        url('images/glissandonotes.png');
    background-size: 400% 100%, contain;
    background-position: 100% center, center center;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: lighten;
    background-color: transparent;
    isolation: isolate;
    animation: flow-gradient-notes 4.5s linear infinite;
    animation-delay: 0.285s;
    -webkit-mask-image: url('images/glissandonotes.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('images/glissandonotes.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

@keyframes flow-gradient-notes {
    0% {
        background-position: 100% center, center center;
    }
    100% {
        background-position: -300% center, center center;
    }
}

.glissando-notes.flipped {
    transform: scaleX(-1);
    animation-direction: reverse;
}

/* Step Indicator */
.system-exercise-step-indicator {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Step Display Container */
.system-exercise-step-display {
    margin: 10px 0 20px 0;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Carousel Step Cards */
.carousel-step {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    transition: none ease;
}

/* Previous/Next Step Cards - Dimmed */
.carousel-step-prev,
.carousel-step-next {
    opacity: 0.5;
    transform: scale(0.85);
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 220px;
}

.carousel-step-prev:hover,
.carousel-step-next:hover {
    opacity: 0.7;
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.08);
}

.carousel-step-text {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
}

/* Current Step Card - Highlighted */
.carousel-step-current {
    opacity: 1;
    transform: scale(1);
    flex: 0 1 auto;
    width: 70%;
    max-width: 700px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Flow container inside current step */
.carousel-step-flow {
    display: block;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in, visibility 0s;
}

/* Command button - overlaps from left */
.flow-command {
    padding: 4px 6px 4px 12px;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.3;
    color: var(--brutalist-white);
    background: var(--gym-steel-blue);
    border-radius: 0px;
    text-align: center;
    position: absolute;
    z-index: 3;
    left: 0; /* Will be set by JavaScript */
    top: 0; /* Will be set by JavaScript */
    transition: none;
    border: 3px solid var(--brutalist-black);
    box-shadow: 3px 3px 0px #000000;
}

/* Hover effect when command button is clickable */
.flow-command.clickable:hover {
    background: var(--brutalist-white);
    color: var(--gym-steel-blue);
    transform: none;
}

.flow-command.clickable:hover::after {
    border-left-color: var(--brutalist-white);
}

/* Triangle from command pointing into instruction */
.flow-command::after {
    content: '';
    position: absolute;
    right: -11.5px;
    top: 0;
    width: 0;
    height: 0;
    border-top: var(--command-triangle-size, 22px) solid transparent;
    border-bottom: var(--command-triangle-size, 22px) solid transparent;
    border-left: 12px solid var(--gym-steel-blue);
    transition: none;
}

/* Instruction card - center */
.flow-instruction-card {
    padding: 20px 10px 8px 10px; /* Reduced bottom padding for tight button fit */
    background: var(--brutalist-concrete);
    border-radius: 0px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    overflow: visible;
    max-width: 500px; /* Default width, JavaScript adjusts per step */
    border: 3px solid var(--brutalist-gray);
}

.flow-instruction {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brutalist-white);
    text-align: left;
    line-height: 1.6;
    display: block;
}

/* Action button - positioned below text at lower-right corner */
.flow-action-button {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--brutalist-black);
    background: var(--gym-coral);
    border: 3px solid var(--brutalist-black);
    border-radius: 0px;
    cursor: pointer;
    transition: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 4px 4px 0px #000000;
    text-shadow: none;
    /* Position button extending past instruction box on right */
    display: block;
    margin-left: auto;
    margin-top: 6px;
    margin-right: -20px; /* Extend past right edge */
    margin-bottom: 0;
    width: fit-content;
    position: relative;
    z-index: 3;
}

/* Triangle pointing INTO button from left (entry triangle) */
.flow-action-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: var(--action-triangle-size, 20px) solid transparent;
    border-bottom: var(--action-triangle-size, 20px) solid transparent;
    border-left: 12px solid var(--brutalist-concrete);
    z-index: 1;
}

/* Triangle pointing OUT from button to right (exit triangle) */
.flow-action-button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: var(--action-triangle-size, 20px) solid transparent;
    border-bottom: var(--action-triangle-size, 20px) solid transparent;
    border-left: 15px solid var(--gym-coral);
    transform: translateX(100%); /* Push it outside the button */
    filter: none;
    z-index: 1;
}

.flow-action-button:hover {
    background: var(--gym-peach);
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
}

.flow-action-button:hover::after {
    border-left-color: var(--gym-peach);
    filter: none;
}

.flow-action-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
}

/* Progressive pulse animations */
@keyframes pulse-instruction {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse-button {
    0%, 100% {
        box-shadow: 15px 6px 20px rgba(0, 255, 255, 0.3);
        transform: translateY(0);
    }
    50% {
        box-shadow: 15px 8px 30px rgba(0, 255, 255, 0.6);
        transform: translateY(-2px);
    }
}

.flow-instruction-card.step-animating {
    animation: pulse-instruction 0.8s ease-out;
}

.flow-action-button.step-animating {
    animation: pulse-button 0.8s ease-out 0.9s;
}

/* Sequential flash animations for step transitions */
@keyframes flash-action {
    0% {
        transform: scale(1);
        box-shadow: 15px 4px 15px rgba(0, 255, 255, 0.25);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.9), 15px 8px 30px rgba(0, 255, 255, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 15px 4px 15px rgba(0, 255, 255, 0.25);
    }
}

@keyframes flash-command {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(120, 30, 180, 0);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 35px rgba(160, 60, 220, 0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(120, 30, 180, 0.3);
    }
}

.flow-action-button.flash-action-animation {
    animation: flash-action 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.flow-command.flash-command-animation {
    animation: flash-command 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Staged Icon + Button Dance animations */
@keyframes button-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.1);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes icon-exit {
    to {
        transform: scale(0.7) rotate(10deg);
        opacity: 0;
    }
}

@keyframes icon-enter {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes text-fade-out {
    to {
        opacity: 0;
        filter: blur(2px);
    }
}

@keyframes text-fade-in {
    from {
        opacity: 0;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes button-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes command-spotlight {
    0% {
        background-color: rgb(31, 168, 251);
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
    }
    100% {
        background-color: rgb(120, 30, 180);
        box-shadow: 0 0 10px rgba(120, 30, 180, 0.3);
    }
}

@keyframes command-triangle-spotlight {
    0% {
        border-left-color: rgb(31, 168, 251);
    }
    100% {
        border-left-color: rgb(120, 30, 180);
    }
}

.flow-action-button.bounce-animation {
    animation: button-bounce 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.flow-action-button.button-fade-in {
    animation: button-fade-in 400ms ease-in-out forwards;
}

.middle-icon-content.icon-exit {
    animation: icon-exit 150ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.middle-icon-content.icon-enter {
    animation: icon-enter 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.flow-instruction.text-fade-out {
    animation: text-fade-out 200ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.flow-instruction.text-fade-in {
    animation: text-fade-in 400ms ease-in-out forwards;
}

.flow-command.spotlight-animation {
    animation: command-spotlight 1600ms ease-in-out;
    transition: none !important; /* Disable transition to allow animation to work */
}

.flow-command.spotlight-animation::after {
    animation: command-triangle-spotlight 1600ms ease-in-out;
    transition: none !important; /* Disable transition to allow animation to work */
}

/* Exercise Tip Display */
.exercise-tip-container {
    margin: 15px auto;
    padding: 0 20px;
    max-width: 600px;
    text-align: center;
}

.exercise-tip {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    opacity: 0;
    animation: tipFadeInOut 10s ease-in-out infinite;
}

@keyframes tipFadeInOut {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    5% {
        opacity: 0.7;
        transform: translateY(0);
    }
    95% {
        opacity: 0.7;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(5px);
    }
}

/* Secondary Navigation */
.system-exercise-secondary-nav {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.btn-skip {
    min-width: 150px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: none;
}

.btn-skip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .system-exercise-indicators {
        gap: 20px;
    }

    .indicator-animation {
        width: 60px;
        height: 60px;
    }

    .glissando-head,
    .glissando-head::before {
        height: 90px;
        width: 90px;
    }

    .glissando-notes {
        height: 90px;
        width: 150px;
    }

    .system-exercise-step-display {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }

    .carousel-step {
        max-width: 100%;
        width: 100%;
    }

    .carousel-step-prev,
    .carousel-step-next {
        transform: scale(0.9);
        min-width: unset;
        max-width: 100%;
    }

    .carousel-step-prev:hover,
    .carousel-step-next:hover {
        transform: scale(0.93);
    }

    .carousel-step-current {
        width: 100%;
        max-width: 100%;
    }

    .carousel-step-flow {
        grid-template-columns: auto 1fr;
    }

    .flow-command {
        padding: 3px 5px 3px 10px;
    }

    .flow-command::after {
        border-top: var(--command-triangle-size, 16px) solid transparent;
        border-bottom: var(--command-triangle-size, 16px) solid transparent;
    }

    .flow-instruction-card {
        padding: 15px 10px; /* Minimal padding, JS sets text-indent for first line */
        margin-right: 10px;
    }

    .flow-instruction {
        /* Keep desktop font size, let text wrap */
    }

    .middle-icon-content {
        width: 60px;
        height: 60px;
    }

    .middle-icon-content .icon-face {
        max-height: 60px;
        max-width: 60px;
    }

    .middle-icon-content .icon-ear {
        max-height: 30px;
        max-width: 30px;
    }

    .solfege-label {
        font-size: 1.5rem;
    }

    .flow-action-button {
        padding: 10px 16px;
    }

    .flow-action-button::before {
        border-top: var(--action-triangle-size, 17px) solid transparent;
        border-bottom: var(--action-triangle-size, 17px) solid transparent;
    }

    .carousel-step-text {
        font-size: 0.85rem;
    }
}

/* Very small screens - reduce font sizes as last resort */
@media (max-width: 400px) {
    .flow-command {
        font-size: 1.3rem;
    }

    .flow-instruction {
        font-size: 1.3rem;
    }

    .flow-action-button {
        font-size: 0.85rem;
    }
}

/* ===== TRAINING MODE STYLES ===== */

/* Training Mode Category - Make it stand out */
.training-category {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.08), rgba(45, 112, 21, 0.08));
    border: 3px solid var(--lift-gold);
    border-radius: 0px;
    padding: 15px;
    margin-bottom: 30px;
}

.training-category .category-header {
    background: transparent;
}

.training-category .category-title {
    color: var(--lift-gold);
    font-size: 1.5rem;
}

.training-category .category-description {
    color: var(--lift-gold);
    font-weight: 500;
}

/* Training Mode Card - Enhanced styling */
.training-card {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.15), rgba(45, 112, 21, 0.15));
    border: 3px solid var(--lift-gold);
    box-shadow: 0 4px 20px rgba(58, 180, 37, 0.3);
}

.training-card:hover {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.25), rgba(45, 112, 21, 0.25));
    border-color: var(--lift-gold);
    box-shadow: 0 6px 30px rgba(58, 180, 37, 0.5);
    transform: translateY(-4px);
}

.training-card .exercise-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 8px rgba(58, 180, 37, 0.6));
}

.training-card h3 {
    color: var(--lift-gold);
    font-size: 1.3rem;
}

.training-card p {
    color: rgba(255, 255, 255, 0.9);
}

/* Training Mode - New Layout */
.training-main-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.training-main-btn {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.15), rgba(45, 112, 21, 0.15));
    border: 3px solid var(--lift-gold);
    box-shadow: 0 4px 20px rgba(58, 180, 37, 0.3);
    border-radius: 12px;
    padding: 30px;
    cursor: pointer;
    transition: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 250px;
    font-family: 'Space Grotesk', sans-serif;
}

.training-main-btn:hover {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.25), rgba(45, 112, 21, 0.25));
    border-color: var(--lift-gold);
    box-shadow: 0 6px 30px rgba(58, 180, 37, 0.5);
    transform: translateY(-4px);
}

.training-main-btn .exercise-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 8px rgba(58, 180, 37, 0.6));
}

.training-main-btn .training-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(58, 180, 37, 0.6));
}

.training-main-btn h3 {
    color: var(--lift-gold);
    font-size: 1.8rem;
    margin: 0;
    font-weight: 700;
}

.training-secondary-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.training-secondary-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: none;
    box-shadow: none;
    font-family: 'Space Grotesk', sans-serif;
}

.training-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--brutalist-white);
    transform: none;
    box-shadow: none;
}

/* Ala Carte Warning */
.ala-carte-warning {
    background: rgba(255, 165, 0, 0.1);
    border: 2px solid rgba(255, 165, 0, 0.4);
    border-left: 4px solid rgba(255, 165, 0, 0.8);
    padding: 15px 20px;
    margin: 0 0 20px 0;
    border-radius: 4px;
    width: 100%;
    grid-column: 1 / -1;
}

.ala-carte-warning p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ala-carte-warning p:first-child {
    color: rgba(255, 165, 0, 1);
    margin-bottom: 8px;
    font-size: 1rem;
}

.ala-carte-warning strong {
    font-weight: 600;
}

/* Sub-category styles for nested exercises */
.sub-category {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.sub-category:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.sub-category-title {
    color: var(--brutalist-white);
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

.sub-category .category-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 15px 0;
}

.sub-category .exercise-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Training Stats Card */
.training-stats-card {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.1), rgba(45, 112, 21, 0.1));
    border-color: var(--lift-gold);
}

.training-stats {
    padding: 10px;
}

.stat-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.stat-number {
    font-size: 1.1rem;
    color: var(--lift-gold);
    font-weight: bold;
}

/* Training Menu Options */
.training-menu-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.training-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgba(58, 180, 37, 0.05);
    border: 3px solid rgba(58, 180, 37, 0.3);
    border-radius: 0px;
    cursor: pointer;
    transition: none ease;
}

.training-menu-btn:hover {
    background: rgba(58, 180, 37, 0.1);
    border-color: var(--lift-gold);
    transform: translateY(-2px);
}

.training-menu-btn.primary {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.15), rgba(45, 112, 21, 0.15));
    border-color: var(--lift-gold);
}

.training-menu-btn.primary:hover {
    background: linear-gradient(135deg, rgba(58, 180, 37, 0.25), rgba(45, 112, 21, 0.25));
    box-shadow: 0 4px 15px rgba(58, 180, 37, 0.2);
}

.training-btn-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.training-menu-btn h3 {
    margin: 10px 0 5px 0;
    color: var(--lift-gold);
}

.training-menu-btn p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-align: center;
}

/* Settings Styles */
.setting-item {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(58, 180, 37, 0.2);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item label {
    display: block;
    color: var(--lift-gold);
    font-weight: bold;
    margin-bottom: 10px;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.setting-control input[type="range"] {
    flex: 1;
    height: 6px;
    background: rgba(58, 180, 37, 0.2);
    border-radius: 3px;
    outline: none;
}

.setting-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--lift-gold);
    border-radius: 50%;
    cursor: pointer;
}

.setting-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--lift-gold);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.setting-control span {
    min-width: 60px;
    text-align: right;
    color: var(--lift-gold);
    font-weight: bold;
}

.setting-description {
    margin-top: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Force Unlock List */
.force-unlock-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.force-unlock-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(58, 180, 37, 0.05);
    border: 3px solid rgba(58, 180, 37, 0.2);
    border-radius: 8px;
    cursor: pointer;
}

.force-unlock-item:hover {
    background: rgba(58, 180, 37, 0.1);
}

.force-unlock-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--lift-gold);
}

.force-unlock-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c82333, #8b1a25);
    transform: translateY(-2px);
}

/* Progress Display */
.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.progress-card {
    padding: 20px;
    background: rgba(58, 180, 37, 0.05);
    border: 3px solid rgba(58, 180, 37, 0.3);
    border-radius: 0px;
}

.progress-card h3 {
    margin: 0 0 15px 0;
    color: var(--lift-gold);
    font-size: 1.2rem;
}

.progress-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.stat-value {
    color: var(--lift-gold);
    font-weight: bold;
}

.weakness-indicators {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 165, 0, 0.1);
    border: 3px solid rgba(255, 165, 0, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.weakness-indicators strong {
    color: #ffa500;
}

/* Rating Overlay */
.training-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.training-rating-card {
    background: var(--bg-dark);
    border: 3px solid var(--lift-gold);
    border-radius: 0px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.training-rating-card h2 {
    margin: 0 0 10px 0;
    color: var(--lift-gold);
}

.rating-interval-name {
    margin: 10px 0 30px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

.rating-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgba(58, 180, 37, 0.1);
    border: 3px solid rgba(58, 180, 37, 0.3);
    border-radius: 0px;
    cursor: pointer;
    transition: none ease;
}

.rating-btn:hover {
    background: rgba(58, 180, 37, 0.2);
    border-color: var(--lift-gold);
    transform: scale(1.05);
}

.rating-emoji {
    font-size: 3rem;
    margin-bottom: 10px;
}

.rating-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
}

.rating-easy:hover {
    border-color: #28a745;
}

.rating-medium:hover {
    border-color: #ffc107;
}

.rating-hard:hover {
    border-color: #fd7e14;
}

.rating-failed:hover {
    border-color: #dc3545;
}

/* Unlock Notification */
.training-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.notification-card {
    background: linear-gradient(135deg, var(--lift-purple-dark), var(--lift-purple-main));
    border: 3px solid var(--lift-gold);
    border-radius: 0px;
    padding: 25px 35px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), var(--glow-purple);
    min-width: 300px;
}

.notification-card h2 {
    margin: 0 0 15px 0;
    color: var(--lift-gold);
    text-align: center;
}

.unlock-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unlock-list li {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    text-align: center;
    border-bottom: 1px solid rgba(58, 180, 37, 0.3);
}

.unlock-list li:last-child {
    border-bottom: none;
}

/* Achievement Badges */
.achievement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lift-gold), #FFA500);
    box-shadow: var(--glow-gold), var(--shadow-sm);
    font-size: 1rem;
    margin-left: 8px;
    animation: badgePop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-badge.silver {
    background: linear-gradient(135deg, var(--lift-silver), #999);
}

.achievement-badge.bronze {
    background: linear-gradient(135deg, var(--lift-bronze), #A0522D);
}

@keyframes badgePop {
    0% { transform: scale(0) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* Progress Bars */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--lift-purple-dark), var(--lift-purple-main), var(--lift-purple-light));
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: var(--glow-purple);
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}

/* Rep Counter */
.rep-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(156, 38, 235, 0.2);
    border: 3px solid var(--lift-purple-light);
    border-radius: 0px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lift-purple-light);
}

.rep-counter::before {
    content: '💪';
    font-size: 1rem;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .training-rating-card {
        padding: 25px;
    }

    .rating-buttons {
        grid-template-columns: 1fr;
    }

    .rating-btn {
        padding: 15px;
    }

    .rating-emoji {
        font-size: 2.5rem;
    }

    .progress-grid {
        grid-template-columns: 1fr;
    }

    .force-unlock-list {
        grid-template-columns: 1fr;
    }

    .training-btn-icon {
        font-size: 2.5rem;
    }
}

/* ===== UNISON FULLSCREEN MODE ===== */

/* Full-screen container for unison exercises */
.unison-fullscreen {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.unison-fullscreen header {
    flex-shrink: 0;
}

.unison-fullscreen main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px;
}

.unison-fullscreen .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 12px;
    min-height: 0;
}

/* Indicators section - flexible sizing */
.unison-fullscreen .system-exercise-indicators {
    flex-shrink: 0;
    margin: 15px 0 10px 0;
    gap: 20px;
}

.unison-fullscreen .tone-indicator {
    transform: scale(0.9);
}

.unison-fullscreen .solfege-label {
    font-size: 1.8rem;
}

/* Step display section - takes remaining space */
.unison-fullscreen .system-exercise-step-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

/* Navigation section - minimal space */
.unison-fullscreen .system-exercise-secondary-nav {
    flex-shrink: 0;
    margin-top: 8px;
}

/* Small skip button for unison */
.unison-fullscreen .btn-skip {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}

/* ===== UNISON SIMPLIFIED RATING UI ===== */

/* Container for unison rating UI (replaces carousel) */
.unison-rating-container {
    display: none; /* Hidden by default, shown for unison exercises */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
    gap: 0;
    height: 100%;
}

/* Button grid */
.unison-rating-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

/* Individual rating buttons - Brutalist style */
.unison-rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: var(--brutalist-concrete);
    border: 3px solid var(--brutalist-white);
    border-radius: 0;
    cursor: pointer;
    transition: none;
    min-height: 75px;
    position: relative;
    box-shadow: var(--shadow-md);
}

/* Hover state - Coral highlight */
.unison-rating-btn:hover {
    background: var(--gym-coral);
    border-color: var(--brutalist-black);
    box-shadow: var(--shadow-coral);
    transform: translate(-2px, -2px);
}

/* Active/pressed state */
.unison-rating-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

/* Remove focus outline */
.unison-rating-btn:focus {
    outline: none;
}

.unison-rating-btn:focus-visible {
    outline: 2px solid var(--gym-coral);
    outline-offset: 2px;
}

/* Label text (main) */
.unison-rating-btn .rating-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brutalist-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hover state text */
.unison-rating-btn:hover .rating-label {
    color: var(--brutalist-black);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .unison-fullscreen main {
        padding: 6px;
    }

    .unison-fullscreen .card {
        padding: 8px;
    }

    .unison-fullscreen .system-exercise-indicators {
        margin: 10px 0 8px 0;
        gap: 15px;
    }

    .unison-fullscreen .tone-indicator {
        transform: scale(0.8);
    }

    .unison-fullscreen .solfege-label {
        font-size: 1.5rem;
    }

    .unison-rating-container {
        padding: 0;
    }

    .unison-rating-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .unison-rating-btn {
        padding: 12px 10px;
        min-height: 60px;
    }

    .unison-rating-btn .rating-label {
        font-size: 0.9rem;
    }

    .unison-fullscreen .btn-skip {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}

/* ===== PROFILE MANAGEMENT STYLES ===== */

/* Profile list container */
.profile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Individual profile item */
.profile-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--brutalist-concrete);
    border: 3px solid var(--brutalist-gray);
    border-radius: 0;
    transition: none;
}

/* Active profile highlighting */
.profile-list-item.active-profile {
    border-color: var(--gym-coral);
    background: rgba(255, 107, 107, 0.1);
}

/* Profile info section */
.profile-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Profile name */
.profile-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brutalist-white);
}

/* Profile actions container */
.profile-actions {
    display: flex;
    gap: 8px;
}

/* Small button style */
.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid var(--brutalist-black);
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    transition: none;
}

.btn-secondary.btn-small {
    background: var(--brutalist-concrete);
    color: var(--brutalist-white);
}

.btn-secondary.btn-small:hover {
    background: var(--gym-steel-blue);
    border-color: var(--brutalist-black);
}

.btn-danger.btn-small {
    background: var(--error-red);
    color: var(--brutalist-white);
}

.btn-danger.btn-small:hover {
    background: #c82333;
    transform: scale(1.05);
}

/* Profile name display in header */
#currentProfileDisplay {
    color: var(--gym-coral);
    font-weight: 600;
}

/* Profile name clickable */
#currentProfileName {
    cursor: pointer;
    transition: none;
}

#currentProfileName:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* ===== PROFILE SWITCHER DIALOG ===== */

/* Full-screen overlay */
.profile-switcher-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Dialog box */
.profile-switcher-dialog {
    background: var(--brutalist-charcoal);
    border: 4px solid var(--brutalist-white);
    border-radius: 0;
    padding: 0;
    min-width: 320px;
    max-width: 450px;
    width: 90%;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.9);
    animation: slideUp 0.3s ease;
}

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

/* Dialog header */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 3px solid var(--brutalist-gray);
    background: var(--brutalist-concrete);
}

.dialog-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--brutalist-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Close button */
.dialog-close-btn {
    background: none;
    border: none;
    color: var(--brutalist-light-gray);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-close-btn:hover {
    color: var(--gym-coral);
    transform: scale(1.1);
}

/* Profile list */
.profile-switcher-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Individual profile item */
.profile-switcher-item {
    padding: 16px 20px;
    background: var(--brutalist-concrete);
    border: 3px solid var(--brutalist-gray);
    border-radius: 0;
    cursor: pointer;
    transition: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brutalist-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-switcher-item:hover {
    background: var(--gym-coral);
    border-color: var(--brutalist-black);
    color: var(--brutalist-black);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9);
}

.profile-switcher-item:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

/* Active profile indicator */
.profile-switcher-item.active {
    border-color: var(--gym-coral);
    background: rgba(255, 107, 107, 0.15);
}

.profile-switcher-item.active::after {
    content: '✓';
    margin-left: auto;
    color: var(--gym-coral);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .profile-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .profile-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-small {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
}

/* ========================================
   FTUE (First Time User Experience) Styles
   ======================================== */

/* Tutorial Progress Bar */
.ftue-progress-container {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid rgba(0, 255, 136, 0.3);
}

.ftue-progress-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.ftue-progress-bar {
    position: relative;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ftue-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--brutalist-green));
    transition: width 0.5s ease;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

.ftue-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

/* Tutorial Card Lock Overlay */
.tutorial-card-locked {
    position: relative;
    opacity: 0.5;
    filter: grayscale(70%) blur(0.5px);
    pointer-events: none;
}

.tutorial-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
    z-index: 10;
}

.tutorial-lock-overlay .lock-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.tutorial-lock-overlay .lock-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 0 15px;
}

/* Lock Breaking Animation */
@keyframes lock-break {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: scale(1.2) rotate(10deg);
    }
    60% {
        transform: scale(0.8) rotate(-15deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
}

.lock-breaking {
    animation: lock-break 0.5s ease-out forwards;
}

.lock-breaking .lock-icon {
    animation: lock-shake 0.3s ease-in-out;
}

@keyframes lock-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    75% { transform: translateX(10px) rotate(5deg); }
}

/* Card Glow Unlock Animation */
@keyframes card-glow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 255, 136, 0);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.8), 0 0 80px rgba(0, 255, 136, 0.4);
    }
}

.card-glow-unlock {
    animation: card-glow 0.8s ease-in-out;
}

/* Training Mode Lock Overlay */
.training-mode-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 12px;
}

.training-mode-lock-overlay .lock-content {
    text-align: center;
    padding: 30px;
}

.training-mode-lock-overlay .lock-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.training-mode-lock-overlay h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.training-mode-lock-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

/* Make training category position relative for absolute overlay */
.training-category {
    position: relative;
}

/* Unlock All Button */
.ftue-unlock-all-container {
    margin-top: 20px;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.ftue-unlock-all-btn {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(200, 80, 80, 0.3));
    border: 2px solid rgba(255, 107, 107, 0.6);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ftue-unlock-all-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.5), rgba(200, 80, 80, 0.5));
    border-color: rgba(255, 107, 107, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.ftue-unlock-all-btn:active {
    transform: translateY(0);
}

.unlock-all-hint {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
}

/* Celebration Modal */
.ftue-celebration-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.celebration-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.celebration-content {
    position: relative;
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.98), rgba(44, 44, 46, 0.98));
    border: 3px solid var(--neon-green);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.5), 0 0 80px rgba(0, 255, 136, 0.3);
    animation: celebration-appear 0.5s ease-out;
}

@keyframes celebration-appear {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.celebration-title {
    font-size: 2.5rem;
    color: var(--neon-green);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    animation: celebration-pulse 1s ease-in-out infinite;
}

@keyframes celebration-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.celebration-message {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.celebration-close-btn {
    font-size: 1.1rem;
    padding: 15px 40px;
    background: var(--neon-green);
    color: var(--brutalist-black);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.celebration-close-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.5);
}

.celebration-close-btn:active {
    transform: translateY(0);
}

/* Confetti Particles (basic styling, animation handled in JS) */
.confetti-particle {
    will-change: transform, opacity;
}

/* Mobile Responsive for FTUE */
@media (max-width: 600px) {
    .ftue-progress-container {
        padding: 10px;
    }

    .ftue-progress-bar {
        height: 30px;
    }

    .ftue-progress-text {
        font-size: 0.85rem;
    }

    .tutorial-lock-overlay .lock-icon {
        font-size: 2rem;
    }

    .tutorial-lock-overlay .lock-text {
        font-size: 0.85rem;
    }

    .training-mode-lock-overlay .lock-icon {
        font-size: 3rem;
    }

    .training-mode-lock-overlay h3 {
        font-size: 1.2rem;
    }

    .celebration-content {
        padding: 30px;
        max-width: 90%;
    }

    .celebration-title {
        font-size: 2rem;
    }

    .celebration-message {
        font-size: 1rem;
    }
}

/* ====================================
   Helper Definitions System
   ==================================== */

/* Helper term styling - appears inline in text */
.helper-term {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    font-weight: 600;
}

.helper-term:hover {
    color: #93c5fd;
    text-decoration-style: solid;
}

.helper-term sup {
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.8;
}

/* Helper Definition Modal */
.helper-definition-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.helper-definition-modal.helper-modal-visible {
    opacity: 1;
}

.helper-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.helper-modal-content {
    position: relative;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.helper-modal-visible .helper-modal-content {
    transform: scale(1);
}

.helper-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.helper-modal-close:hover {
    background: #2a2a2a;
    color: #fff;
}

.helper-modal-title {
    color: #60a5fa;
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.helper-modal-level {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.helper-modal-text {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.helper-modal-text strong {
    color: #93c5fd;
    font-weight: 600;
}

.helper-modal-text em {
    color: #fbbf24;
    font-style: italic;
}

.helper-modal-visual {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #252525;
    border-radius: 12px;
    border: 1px solid #333;
}

.helper-visual-placeholder {
    color: #888;
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

/* Scrollbar for modal content */
.helper-modal-content::-webkit-scrollbar {
    width: 8px;
}

.helper-modal-content::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

.helper-modal-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.helper-modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .helper-modal-content {
        padding: 2rem;
        width: 95%;
        max-height: 85vh;
    }

    .helper-modal-title {
        font-size: 1.5rem;
        padding-right: 30px;
    }

    .helper-modal-text {
        font-size: 1rem;
    }

    .helper-modal-close {
        width: 35px;
        height: 35px;
        font-size: 1.75rem;
    }
}

/* Slider Glissando Help Modal */
.slider-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-help-modal.slider-help-visible {
    opacity: 1;
}

.slider-help-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.slider-help-content {
    position: relative;
    background: #1a1a1a;
    border: 3px solid var(--brutalist-gray);
    border-radius: 8px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 8px 8px 0px #000000;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.slider-help-modal.slider-help-visible .slider-help-content {
    transform: scale(1);
}

.slider-help-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.slider-help-close:hover {
    color: #fff;
}

.slider-help-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gym-coral);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slider-help-section {
    margin-bottom: 1.5rem;
}

.slider-help-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gym-steel-blue);
    margin: 0 0 0.5rem 0;
}

.slider-help-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;
    margin: 0;
}

.slider-help-section ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.slider-help-section li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 0.5rem;
}

.slider-help-section strong {
    color: var(--gym-coral);
    font-weight: 700;
}

.slider-help-got-it {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--brutalist-black);
    background: var(--gym-coral);
    border: 3px solid var(--brutalist-black);
    border-radius: 0px;
    box-shadow: 4px 4px 0px #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 1rem;
}

.slider-help-got-it:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

.slider-help-got-it:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
}

/* Match the Tone Help Modal */
.match-tone-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.match-tone-help-modal.match-tone-help-visible {
    opacity: 1;
}

.match-tone-help-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.match-tone-help-content {
    position: relative;
    background: #1a1a1a;
    border: 3px solid var(--brutalist-gray);
    border-radius: 8px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 8px 8px 0px #000000;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.match-tone-help-modal.match-tone-help-visible .match-tone-help-content {
    transform: scale(1);
}

.match-tone-help-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.match-tone-help-close:hover {
    color: #fff;
}

.match-tone-help-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gym-coral);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-tone-help-image {
    margin-bottom: 1.5rem;
    text-align: center;
}

.match-tone-help-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid var(--brutalist-gray);
}

.match-tone-help-section {
    margin-bottom: 1.5rem;
}

.match-tone-help-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gym-steel-blue);
    margin: 0 0 0.5rem 0;
}

.match-tone-help-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;
    margin: 0 0 0.75rem 0;
}

.match-tone-help-section p:last-child {
    margin-bottom: 0;
}

.match-tone-help-section strong {
    color: var(--gym-coral);
    font-weight: 700;
}

.match-tone-help-got-it {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--brutalist-black);
    background: var(--gym-coral);
    border: 3px solid var(--brutalist-black);
    border-radius: 0px;
    box-shadow: 4px 4px 0px #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 1rem;
}

.match-tone-help-got-it:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

.match-tone-help-got-it:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #000000;
}

/* Help Button for Match the Tone Exercise */
.help-btn {
    position: absolute;
    top: 1rem;
    right: 4rem;
    background: var(--brutalist-concrete);
    color: var(--gym-coral);
    border: 3px solid var(--gym-coral);
    border-radius: 0;
    font-size: 1.5rem;
    font-weight: 900;
    cursor: pointer;
    padding: 8px 14px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8);
    transition: all 0.15s ease;
    display: none;
}

.help-btn.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-btn:hover {
    background: var(--gym-coral);
    color: var(--brutalist-black);
    border-color: var(--gym-coral);
    box-shadow: 5px 5px 0px rgba(231, 111, 81, 0.5);
    transform: translate(-2px, -2px);
}

.help-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

/* Tutorial-specific slider adjustments */
/* Make slider more compact when embedded in tutorial instruction area */
[data-tutorial-target="sliderGlissandoControls"].glissando-slider-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

[data-tutorial-target="sliderGlissandoControls"] .glissando-slider-container {
    padding: 20px 10px;
}

/* Ensure hash marks are visible in tutorial mode */
[data-tutorial-target="sliderGlissandoControls"] .glissando-hash-marks {
    z-index: 1;
}

/* Make target label prominent in tutorial mode */
[data-tutorial-target="sliderGlissandoControls"] .glissando-target-label {
    margin-top: 10px;
    font-size: 0.95rem;
}

/* Hide big buttons in tutorial mode - only allow medium and small buttons */
[data-tutorial-target="sliderGlissandoControls"] .glissando-btn-big {
    display: none !important;
}

/* Responsive adjustments for tutorial slider */
@media (max-width: 768px) {
    [data-tutorial-target="sliderGlissandoControls"] .glissando-slider-container {
        padding: 15px 5px;
    }

    [data-tutorial-target="sliderGlissandoControls"] .glissando-target-label {
        font-size: 0.85rem;
        margin-top: 8px;
    }
}

/* ============================================
   GLISSANDO OVERVIEW PROMPT MODAL
   ============================================ */

/* Modal button hover effect */
#glissandoPromptOk:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(165, 104, 217, 0.4);
}

#glissandoPromptOk:active {
    transform: scale(0.98);
}