/* Passage wrapper and controls */
.typing-passage-wrapper { position: relative; }

.typing-font-controls {
    position: absolute; top: -1.2rem; right: 0; z-index: 20;
    background: rgba(255,255,255,0.95); padding: 0.25rem 0.5rem; border-radius: 0.25rem;
    border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;
}

.typing-finger-controls {
    position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); z-index: 20;
    background: rgba(255,255,255,0.95); border-radius: 0.25rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
}

.typing-font-label { color: #6b7280; }
.typing-font-size { color: #374151; font-weight: 500; }
.typing-font-slider { width: 5rem; height: 0.25rem; background: #e5e7eb; border-radius: 1rem; outline: none; cursor: pointer; transition: all 0.2s ease; -webkit-appearance: none; appearance: none; }
.typing-font-slider:hover { background: #d1d5db; }
.typing-font-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #3b82f6; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.2s ease; }
.typing-font-slider::-webkit-slider-thumb:hover { background: #2563eb; transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.typing-font-slider::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #3b82f6; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.2s ease; }
.typing-font-slider::-moz-range-thumb:hover { background: #2563eb; transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }

/* Passage container */
.typing-passage-container { overflow: hidden; position: relative; border: 2px solid var(--color-gray-200); border-radius: 0.5rem; padding: 1rem; background: var(--color-surface-secondary); }
.typing-passage-container::before,
.typing-passage-container::after { content: ''; position: absolute; left: 0; right: 0; height: 1rem; pointer-events: none; z-index: 10; }
.typing-passage-container::before { top: 0; background: linear-gradient(to bottom, var(--color-surface-secondary) 0%, var(--color-surface-secondary) 85%, color-mix(in srgb, var(--color-surface-secondary) 95%, transparent) 95%, color-mix(in srgb, var(--color-surface-secondary) 80%, transparent) 100%); }
.typing-passage-container::after { bottom: 0; background: linear-gradient(to top, var(--color-surface-secondary) 0%, var(--color-surface-secondary) 85%, color-mix(in srgb, var(--color-surface-secondary) 95%, transparent) 95%, color-mix(in srgb, var(--color-surface-secondary) 80%, transparent) 100%); }
.typing-passage-container.completed { border-color: var(--color-success-500); background: var(--color-success-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 10%, transparent); }
.typing-passage-container.completed::before { background: linear-gradient(to bottom, var(--color-success-50) 0%, var(--color-success-50) 85%, color-mix(in srgb, var(--color-success-50) 95%, transparent) 95%, color-mix(in srgb, var(--color-success-50) 80%, transparent) 100%); }
.typing-passage-container.completed::after { background: linear-gradient(to top, var(--color-success-50) 0%, var(--color-success-50) 85%, color-mix(in srgb, var(--color-success-50) 95%, transparent) 95%, color-mix(in srgb, var(--color-success-50) 80%, transparent) 100%); }

.typing-passage-text { font-family: 'JetBrains Mono', monospace; font-size: 1.125rem; line-height: 1.625; transition: transform 0.3s ease; white-space: pre-wrap; word-wrap: break-word; }
.typing-line { display: flex; flex-wrap: wrap; align-items: center; }

/* Characters */
.typing-char { display: inline-flex; align-items: center; justify-content: center; margin: 0.125rem; border-radius: 0.25rem; border: 1px solid var(--color-gray-300); font-family: 'JetBrains Mono', monospace; font-weight: 500; transition: all 0.2s ease; text-align: center; position: relative; background: var(--color-surface-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); flex-shrink: 0; }
.typing-char.space { background: var(--color-surface-secondary); border: 1px solid var(--color-gray-300); }
.typing-char.current { background: var(--color-primary-100); border: 2px solid var(--color-primary-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 20%, transparent); animation: typing-pulse 1.5s infinite; }
.typing-char.correct { background: var(--color-success-100); border: 1px solid var(--color-success-600); color: var(--color-success-700); }
.typing-char.incorrect { background: var(--color-error-200); border: 1px solid var(--color-error-600); color: var(--color-error-600); }
.typing-char.pending { background: var(--color-surface-tertiary); border: 1px solid var(--color-gray-200); color: var(--color-gray-500); }

@keyframes typing-pulse { 0%,100%{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 20%, transparent);} 50%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500) 40%, transparent);} }

/* Case and finger hints */
.case-hint { position: absolute; background: #1f2937; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; box-shadow: 0 2px 8px rgba(0,0,0,0.2); pointer-events: none; opacity: 1; transition: opacity 0.3s ease; white-space: nowrap; z-index: 1000; }
.case-hint::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1f2937; }
.case-hint.fade-out { opacity: 0; }
.finger-hint { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; z-index: 1000; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.finger-hint.fade-out { opacity: 0; }
.finger-hint.finger-left-pinky { background: #1d4ed8; }
.finger-hint.finger-left-ring { background: #000000; }
.finger-hint.finger-left-middle { background: #92400e; }
.finger-hint.finger-left-index { background: #eab308; }
.finger-hint.finger-thumb { background: #6b7280; }
.finger-hint.finger-right-index { background: #7c3aed; }
.finger-hint.finger-right-middle { background: #ea580c; }
.finger-hint.finger-right-ring { background: #ec4899; }
.finger-hint.finger-right-pinky { background: #d97706; }

@media (max-width: 768px) { .typing-font-controls{ top: -1rem; } }