.app-header[data-v-967cefe5]{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-bg-tertiary);position:sticky;top:0;z-index:var(--z-dropdown)}.header-content[data-v-967cefe5]{max-width:1400px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl)}.logo[data-v-967cefe5]{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;color:var(--color-text-primary);font-weight:600;font-size:var(--font-size-xl)}.logo-icon[data-v-967cefe5]{font-size:1.5em}.main-nav[data-v-967cefe5]{display:flex;gap:var(--spacing-lg)}.nav-link[data-v-967cefe5]{color:var(--color-text-secondary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link[data-v-967cefe5]:hover{color:var(--color-text-primary);background:var(--color-bg-tertiary)}.nav-link.router-link-active[data-v-967cefe5]{color:var(--color-accent);background:#e945601a}.header-actions[data-v-967cefe5]{display:flex;align-items:center;gap:var(--spacing-md)}.progress-indicator[data-v-967cefe5]{display:flex;align-items:center;gap:var(--spacing-sm)}.progress-text[data-v-967cefe5]{font-size:var(--font-size-sm);color:var(--color-success);font-weight:500}.progress-bar-mini[data-v-967cefe5]{width:60px;height:4px;background:var(--color-bg-tertiary);border-radius:2px;overflow:hidden}.progress-bar-mini__fill[data-v-967cefe5]{height:100%;background:var(--color-success);transition:width var(--transition-normal)}:is(.theme-toggle,.settings-link)[data-v-967cefe5]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:transparent;border:none;cursor:pointer;font-size:var(--font-size-lg);transition:background var(--transition-fast);text-decoration:none}:is(.theme-toggle,.settings-link)[data-v-967cefe5]:hover{background:var(--color-bg-tertiary)}@media(max-width:768px){.header-content[data-v-967cefe5]{flex-wrap:wrap}.main-nav[data-v-967cefe5]{order:3;width:100%;justify-content:center;padding-top:var(--spacing-md);border-top:1px solid var(--color-bg-tertiary);margin-top:var(--spacing-md)}.progress-indicator[data-v-967cefe5]{display:none}}.app-layout[data-v-0781ba59]{min-height:100vh;display:flex;flex-direction:column}.main-content[data-v-0781ba59]{flex:1;padding:var(--spacing-lg)}:root{--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-tertiary: #0f3460;--color-text-primary: #eaeaea;--color-text-secondary: #b8b8b8;--color-text-muted: #6c6c6c;--color-accent: #e94560;--color-accent-hover: #ff6b6b;--color-success: #4ecca3;--color-warning: #ffc107;--color-error: #e94560;--piano-white-key: #fafafa;--piano-white-key-active: #e0e0e0;--piano-white-key-highlight: #4ecca3;--piano-black-key: #1a1a1a;--piano-black-key-active: #333333;--piano-black-key-highlight: #2d9a75;--piano-key-border: #333;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .3);--z-dropdown: 100;--z-modal: 200;--z-tooltip: 300}.piano-keyboard{display:flex;position:relative;-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(to bottom,#2a2a2a,#1a1a1a);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.piano-keys{display:flex;position:relative;height:200px}.piano-key{position:relative;cursor:pointer;transition:background-color var(--transition-fast)}.piano-key:focus{outline:none}.piano-key--white{width:48px;height:100%;background:var(--piano-white-key);border:1px solid var(--piano-key-border);border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:1}.piano-key--white:hover{background:linear-gradient(to bottom,var(--piano-white-key) 0%,#f0f0f0 100%)}.piano-key--white.active,.piano-key--white:active{background:var(--piano-white-key-active);transform:translateY(2px)}.piano-key--white.highlighted{background:var(--piano-white-key-highlight)}.piano-key--black{width:30px;height:65%;background:var(--piano-black-key);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin-left:-15px;margin-right:-15px;z-index:2;box-shadow:0 3px 5px #00000080}.piano-key--black:hover{background:linear-gradient(to bottom,#2a2a2a 0%,var(--piano-black-key) 100%)}.piano-key--black.active,.piano-key--black:active{background:var(--piano-black-key-active);height:63%;box-shadow:0 2px 3px #00000080}.piano-key--black.highlighted{background:var(--piano-black-key-highlight)}.piano-key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);font-weight:500;pointer-events:none}.piano-key--white .piano-key-label{color:#666}.piano-key--black .piano-key-label{color:#aaa;bottom:4px;font-size:10px}.keyboard-controls{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-md)}.octave-selector{display:flex;align-items:center;gap:var(--spacing-sm)}.octave-selector button{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-text-muted);background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast)}.octave-selector button:hover{background:var(--color-bg-tertiary);border-color:var(--color-accent)}.octave-selector button:disabled{opacity:.5;cursor:not-allowed}.piano-keyboard--small .piano-keys{height:150px}.piano-keyboard--small .piano-keys .piano-key--white{width:36px}.piano-keyboard--small .piano-keys .piano-key--black{width:22px;margin-left:-11px;margin-right:-11px}.piano-keyboard--large .piano-keys{height:250px}.piano-keyboard--large .piano-keys .piano-key--white{width:56px}.piano-keyboard--large .piano-keys .piano-key--black{width:36px;margin-left:-18px;margin-right:-18px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-md)}p{margin-bottom:var(--spacing-md)}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:#fff}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn--secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-text-muted)}.btn--secondary:hover:not(:disabled){border-color:var(--color-accent)}.btn--ghost{background:transparent;color:var(--color-text-primary)}.btn--ghost:hover:not(:disabled){background:var(--color-bg-secondary)}.btn--sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm)}.btn--lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg)}.card{background:var(--color-bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.card--hover{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.progress-bar{height:8px;background:var(--color-bg-tertiary);border-radius:var(--radius-sm);overflow:hidden}.progress-bar__fill{height:100%;background:var(--color-success);border-radius:var(--radius-sm);transition:width var(--transition-normal)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.main-content{flex:1;padding:var(--spacing-xl) 0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.grid{display:grid;gap:var(--spacing-lg)}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}.lesson-content h1,.lesson-content h2,.lesson-content h3,.lesson-content h4{color:var(--color-text-primary)}.lesson-content h2{margin-top:var(--spacing-2xl);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-bg-tertiary)}.lesson-content ul,.lesson-content ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-xl)}.lesson-content li{margin-bottom:var(--spacing-xs)}.lesson-content code{font-family:var(--font-family-mono);background:var(--color-bg-tertiary);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.lesson-content pre{background:var(--color-bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--spacing-md)}.lesson-content pre code{background:none;padding:0}.lesson-content blockquote{border-left:4px solid var(--color-accent);padding-left:var(--spacing-md);margin:var(--spacing-md) 0;color:var(--color-text-secondary);font-style:italic}.lesson-content table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-md)}.lesson-content table th,.lesson-content table td{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-bg-tertiary);text-align:left}.lesson-content table th{background:var(--color-bg-tertiary);font-weight:600}