:root{--color-primary: #6366F1;--color-primary-hover: #4F46E5;--color-neutral: #9C9C9C;--color-bg: #FAFAFA;--color-surface: #FFFFFF;--color-text-primary: #0A0A0A;--color-text-secondary: #6B6B6B;--color-border: #E8E8EC;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-hand-left: #06B6D4;--color-hand-right: #F97316;--font-heading: "General Sans", sans-serif;--font-body: "DM Sans", sans-serif;--font-mono: "JetBrains Mono", monospace;--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .08);--shadow-btn-hover: 0 4px 12px rgba(99, 102, 241, .35);--transition-speed: .2s;--radius-btn: 6px;--radius-card: 12px;--radius-input: 6px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased}body{display:flex;flex-direction:column;overflow:hidden}#control-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--color-surface);border-bottom:1px solid var(--color-border);gap:16px;flex-shrink:0}.control-bar__left{display:flex;align-items:center;gap:16px}.control-bar__center{display:flex;align-items:center;gap:24px}.control-bar__right{display:flex;align-items:center;gap:16px}.app-title{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;color:var(--color-text-primary)}.current-chord{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--color-primary);min-width:48px;text-align:center}.slider-group{display:flex;align-items:center;gap:8px;cursor:pointer}.slider-label{font-size:.8rem;color:var(--color-text-secondary);white-space:nowrap}.slider-group input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;background:var(--color-border);border-radius:2px;outline:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:background var(--transition-speed)}.slider-group input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover)}.checkbox-group{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-group input[type=checkbox]{accent-color:var(--color-primary);width:16px;height:16px}#app{display:flex;flex:1;overflow:hidden}#camera-section{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:#111;overflow:hidden}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#overlay-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#status-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:var(--color-surface);border-top:1px solid var(--color-border);font-size:.8rem;color:var(--color-text-secondary);flex-shrink:0;gap:16px}.status-item{display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-neutral);flex-shrink:0}.status-dot.active{background:var(--color-success)}.status-dot.warning{background:var(--color-warning)}.status-dot.error{background:var(--color-error)}#camera-section.strum-flash:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#6366f126;pointer-events:none;animation:flash-fade .3s ease-out forwards;z-index:10}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}.lesson-panel{position:relative;width:320px;min-width:320px;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;transition:width var(--transition-speed),min-width var(--transition-speed);flex-shrink:0}.lesson-panel--collapsed{width:48px;min-width:48px}.lesson-panel--collapsed .lesson-panel__body{display:none}.lesson-panel__toggle{position:absolute;top:8px;right:8px;z-index:5;width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-btn);background:var(--color-surface);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background var(--transition-speed)}.lesson-panel__toggle:hover{background:var(--color-bg)}.lesson-panel__body{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:48px 12px 12px}.lesson-panel__header{margin-bottom:16px}.lesson-panel__header h2{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;margin-bottom:4px}.lesson-panel__header p{font-size:.8rem;color:var(--color-text-secondary)}.lesson-panel__list{display:flex;flex-direction:column;gap:8px}.lesson-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg);cursor:pointer;transition:border-color var(--transition-speed),box-shadow var(--transition-speed);text-align:left;width:100%;font-family:var(--font-body)}.lesson-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-btn-hover)}.lesson-item--active{border-color:var(--color-primary);background:#6366f114}.lesson-item__title{font-weight:700;font-size:.95rem;color:var(--color-text-primary)}.lesson-item__sub{font-size:.75rem;color:var(--color-text-secondary)}.lesson-item__chords{font-family:var(--font-mono);font-size:.75rem;color:var(--color-primary);margin-top:2px}.lesson-panel__sheet{display:flex;flex-direction:column;gap:12px}.lesson-sheet__back{align-self:flex-start;padding:4px 10px;border:1px solid var(--color-border);border-radius:var(--radius-btn);background:var(--color-surface);cursor:pointer;font-size:.8rem;color:var(--color-text-secondary);transition:background var(--transition-speed)}.lesson-sheet__back:hover{background:var(--color-bg)}.lesson-sheet__title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700}.lesson-sheet__desc{font-size:.8rem;color:var(--color-text-secondary);line-height:1.4}.lesson-sheet__badges{display:flex;gap:6px;flex-wrap:wrap}.chord-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:20px;background:#6366f11f;color:var(--color-primary);font-family:var(--font-mono);font-size:.85rem;font-weight:700;cursor:pointer;transition:background var(--transition-speed)}.chord-badge:hover{background:#6366f140}.lesson-sheet__notes{display:flex;flex-wrap:wrap;gap:2px}.note-col{display:flex;flex-direction:column;align-items:center;min-width:36px;padding:4px 2px;border-radius:4px;cursor:pointer;transition:background var(--transition-speed)}.note-col:hover{background:#6366f114}.note-col__chord{font-family:var(--font-mono);font-size:.65rem;color:var(--color-primary);min-height:14px;font-weight:700}.note-col__chord--change{color:var(--color-primary)}.note-col__note{font-size:.9rem;font-weight:700;color:var(--color-text-primary)}.note-col__lyric{font-size:.75rem;color:var(--color-text-secondary);min-height:16px}@media (max-width: 768px){#control-bar{flex-wrap:wrap;padding:8px 12px}}