*{margin:0;padding:0;box-sizing:border-box}:root{--alpha-light: .1;--alpha-border: .3;--alpha-hover: .15;--alpha-active: .2;--primary-color: #2c3e50;--secondary-color: #3498db;--accent-color: #e74c3c;--success-color: #27ae60;--warning-color: #f39c12;--background-color: #ecf0f1;--surface-color: #ffffff;--text-primary: #2c3e50;--text-secondary: #5a6c7d;--text-muted: rgba(44, 62, 80, .8);--border-color: #bdc3c7;--shadow-color: rgba(0, 0, 0, .1);--overlay-color: rgba(255, 255, 255, .9);--major-color: #3498db;--minor-color: #9b59b6;--dominant-color: #e74c3c;--subdominant-color: #f39c12;--relative-color: #27ae60;--dominant-bg: rgba(231, 76, 60, var(--alpha-light));--dominant-border: rgba(231, 76, 60, var(--alpha-border));--subdominant-bg: rgba(243, 156, 18, var(--alpha-light));--subdominant-border: rgba(243, 156, 18, var(--alpha-border));--relative-bg: rgba(39, 174, 96, var(--alpha-light));--relative-border: rgba(39, 174, 96, var(--alpha-border))}[data-theme=dark]{--primary-color: #ecf0f1;--secondary-color: #5dade2;--accent-color: #ec7063;--success-color: #58d68d;--warning-color: #f7dc6f;--background-color: #1a1a1a;--surface-color: #2c2c2c;--text-primary: #ecf0f1;--text-secondary: #d5dbdb;--text-muted: rgba(236, 240, 241, .8);--border-color: #4a4a4a;--shadow-color: rgba(0, 0, 0, .3);--overlay-color: rgba(44, 44, 44, .95);--major-color: #5dade2;--minor-color: #bb8fce;--dominant-color: #ec7063;--subdominant-color: #f7dc6f;--relative-color: #58d68d;--dominant-bg: rgba(236, 112, 99, var(--alpha-light));--dominant-border: rgba(236, 112, 99, var(--alpha-border));--subdominant-bg: rgba(247, 220, 111, var(--alpha-light));--subdominant-border: rgba(247, 220, 111, var(--alpha-border));--relative-bg: rgba(88, 214, 141, var(--alpha-light));--relative-border: rgba(88, 214, 141, var(--alpha-border))}[data-theme=system]{--primary-color: #2c3e50;--secondary-color: #3498db;--accent-color: #e74c3c;--success-color: #27ae60;--warning-color: #f39c12;--background-color: #ecf0f1;--surface-color: #ffffff;--text-primary: #2c3e50;--text-secondary: #5a6c7d;--text-muted: rgba(44, 62, 80, .8);--border-color: #bdc3c7;--shadow-color: rgba(0, 0, 0, .1);--overlay-color: rgba(255, 255, 255, .9);--major-color: #3498db;--minor-color: #9b59b6;--dominant-color: #e74c3c;--subdominant-color: #f39c12;--relative-color: #27ae60;--dominant-bg: rgba(231, 76, 60, var(--alpha-light));--dominant-border: rgba(231, 76, 60, var(--alpha-border));--subdominant-bg: rgba(243, 156, 18, var(--alpha-light));--subdominant-border: rgba(243, 156, 18, var(--alpha-border));--relative-bg: rgba(39, 174, 96, var(--alpha-light));--relative-border: rgba(39, 174, 96, var(--alpha-border))}@media (prefers-color-scheme: dark){[data-theme=system]{--primary-color: #ecf0f1;--secondary-color: #5dade2;--accent-color: #ec7063;--success-color: #58d68d;--warning-color: #f7dc6f;--background-color: #1a1a1a;--surface-color: #2c2c2c;--text-primary: #ecf0f1;--text-secondary: #d5dbdb;--text-muted: rgba(236, 240, 241, .8);--border-color: #4a4a4a;--shadow-color: rgba(0, 0, 0, .3);--overlay-color: rgba(44, 44, 44, .95);--major-color: #5dade2;--minor-color: #bb8fce;--dominant-color: #ec7063;--subdominant-color: #f7dc6f;--relative-color: #58d68d;--dominant-bg: rgba(236, 112, 99, var(--alpha-light));--dominant-border: rgba(236, 112, 99, var(--alpha-border));--subdominant-bg: rgba(247, 220, 111, var(--alpha-light));--subdominant-border: rgba(247, 220, 111, var(--alpha-border));--relative-bg: rgba(88, 214, 141, var(--alpha-light));--relative-border: rgba(88, 214, 141, var(--alpha-border))}}[data-theme=high-contrast]{--primary-color: #000000;--secondary-color: #0066cc;--accent-color: #ff0000;--success-color: #008000;--warning-color: #ff8000;--background-color: #ffffff;--surface-color: #f0f0f0;--text-primary: #000000;--text-secondary: #333333;--text-muted: #666666;--border-color: #000000;--shadow-color: rgba(0, 0, 0, .5);--overlay-color: rgba(255, 255, 255, .95);--major-color: #0066cc;--minor-color: #800080;--dominant-color: #ff0000;--subdominant-color: #ff8000;--relative-color: #008000;--dominant-bg: rgba(255, 0, 0, var(--alpha-light));--dominant-border: rgba(255, 0, 0, var(--alpha-border));--subdominant-bg: rgba(255, 128, 0, var(--alpha-light));--subdominant-border: rgba(255, 128, 0, var(--alpha-border));--relative-bg: rgba(0, 128, 0, var(--alpha-light));--relative-border: rgba(0, 128, 0, var(--alpha-border))}[data-theme=sepia]{--primary-color: #5d4037;--secondary-color: #8d6e63;--accent-color: #d84315;--success-color: #689f38;--warning-color: #f57c00;--background-color: #fdf6e3;--surface-color: #f4e8d0;--text-primary: #5d4037;--text-secondary: #795548;--text-muted: #8d6e63;--border-color: #d7ccc8;--shadow-color: rgba(93, 64, 55, .2);--overlay-color: rgba(253, 246, 227, .95);--major-color: #8d6e63;--minor-color: #a1887f;--dominant-color: #d84315;--subdominant-color: #f57c00;--relative-color: #689f38;--dominant-bg: rgba(216, 67, 21, var(--alpha-light));--dominant-border: rgba(216, 67, 21, var(--alpha-border));--subdominant-bg: rgba(245, 124, 0, var(--alpha-light));--subdominant-border: rgba(245, 124, 0, var(--alpha-border));--relative-bg: rgba(104, 159, 56, var(--alpha-light));--relative-border: rgba(104, 159, 56, var(--alpha-border))}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-xxl: 1.5rem;--font-size-title: 2rem;--shadow-sm: 0 1px 3px var(--shadow-color);--shadow-md: 0 4px 6px var(--shadow-color);--shadow-lg: 0 10px 15px var(--shadow-color);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 50%;--alpha-light: .1;--alpha-border: .3}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);background-color:var(--background-color);min-height:100vh;display:flex;flex-direction:column}.skip-link{position:absolute;top:-100px;left:6px;background:#000;color:#fff!important;padding:8px;text-decoration:none;border-radius:var(--radius-sm);z-index:1000;transition:top var(--transition-fast);font-weight:600;opacity:0;visibility:hidden}.skip-link:focus{top:6px;background:#000;color:#fff!important;opacity:1;visibility:visible}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.header{background:var(--surface-color);box-shadow:var(--shadow-sm);padding:var(--spacing-lg) 0;position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.title{display:flex;flex-direction:column;gap:var(--spacing-xs)}.title-main{font-size:var(--font-size-title);font-weight:700;color:var(--primary-color)}.title-sub{font-size:var(--font-size-base);color:var(--text-secondary);font-weight:400}.mode-toggle,.difficulty-toggle,.theme-toggle{display:flex;background:var(--background-color);border-radius:var(--radius-md);padding:var(--spacing-xs);gap:var(--spacing-xs);position:relative}.mode-btn,.difficulty-btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid #666666!important;background:#fff!important;color:#000!important;font-size:var(--font-size-sm);font-weight:600!important;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);position:relative}.mode-btn:hover,.difficulty-btn:hover{background:var(--surface-color);color:var(--text-primary)}.mode-btn.active,.difficulty-btn.active{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm)}.mode-btn:focus,.difficulty-btn:focus,.theme-btn:focus{outline:2px solid var(--secondary-color);outline-offset:2px}.theme-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);background:var(--surface-color);color:var(--primary-color);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);position:relative;min-width:100px}.theme-btn:hover{background:var(--surface-color);color:var(--text-primary)}.theme-icon{font-size:var(--font-size-base)}.theme-text{flex:1;text-align:left}.theme-arrow{font-size:10px;transition:transform var(--transition-fast)}.theme-btn[aria-expanded=true] .theme-arrow{transform:rotate(180deg)}.theme-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);margin-top:var(--spacing-xs)}.theme-dropdown[aria-hidden=false]{opacity:1;visibility:visible;transform:translateY(0)}.theme-option{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-align:left}.theme-option:hover{background:var(--background-color)}.theme-option.active{background:var(--secondary-color);color:#fff}.theme-option-icon{font-size:var(--font-size-base);width:16px;text-align:center}.theme-option-text{flex:1}.main{flex:1;padding:var(--spacing-xxl) 0}.main .container{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-xxl);align-items:start}.circle-container{position:relative;background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.circle-svg{width:100%;max-width:600px;height:auto;cursor:pointer;transition:opacity var(--transition-normal)}.circle-svg.transitioning{opacity:.7}.background-circle{fill:var(--background-color);stroke:var(--border-color);stroke-width:2}.center-circle{fill:var(--surface-color);stroke:var(--primary-color);stroke-width:3;filter:drop-shadow(0 2px 4px var(--shadow-color))}.center-key{font-size:32px;font-weight:700;fill:var(--primary-color);dominant-baseline:middle}.center-mode{font-size:16px;font-weight:500;fill:var(--text-secondary);dominant-baseline:middle}.center-signature{font-size:12px;fill:var(--text-secondary);dominant-baseline:middle}.key-segment{cursor:pointer;transition:all var(--transition-normal)}.key-segment:hover .segment-path,.key-segment.hover .segment-path{filter:brightness(1.1)}.key-segment.active .segment-path{filter:brightness(1.2) drop-shadow(0 0 10px var(--secondary-color))}.key-segment.highlighted .segment-path{filter:brightness(1.05)}.key-segment.note-playing .segment-path{filter:brightness(1.3) drop-shadow(0 0 15px var(--accent-color));animation:noteGlow .5s ease-in-out}@keyframes noteGlow{0%{filter:brightness(1.3) drop-shadow(0 0 15px var(--accent-color))}50%{filter:brightness(1.5) drop-shadow(0 0 20px var(--accent-color))}to{filter:brightness(1.3) drop-shadow(0 0 15px var(--accent-color))}}.key-segment.chord-playing .segment-path{filter:brightness(1.2) drop-shadow(0 0 12px var(--secondary-color));animation:chordPulse 2s ease-in-out}.key-segment.progression-playing .segment-path{filter:brightness(1.25) drop-shadow(0 0 10px var(--primary-color));animation:progressionGlow 1.5s ease-in-out}@keyframes chordPulse{0%,to{filter:brightness(1.2) drop-shadow(0 0 12px var(--secondary-color))}50%{filter:brightness(1.4) drop-shadow(0 0 18px var(--secondary-color))}}@keyframes progressionGlow{0%,to{filter:brightness(1.25) drop-shadow(0 0 10px var(--primary-color))}50%{filter:brightness(1.35) drop-shadow(0 0 15px var(--primary-color))}}.segment-path{stroke:var(--surface-color);stroke-width:2;transition:all var(--transition-normal)}.segment-path.major{fill:var(--major-color)}.segment-path.minor{fill:var(--minor-color)}.segment-path.selected{fill:var(--primary-color)}.segment-path.dominant{fill:var(--dominant-color)}.segment-path.subdominant{fill:var(--subdominant-color)}.segment-path.relative{fill:var(--relative-color)}.key-text{font-size:18px;font-weight:600;fill:var(--surface-color);text-anchor:middle;dominant-baseline:middle;pointer-events:none;transition:fill var(--transition-fast)}.audio-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center;align-items:center}.audio-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--secondary-color);background:var(--surface-color);color:var(--primary-color);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-width:110px;text-align:center}.audio-btn:hover{background:var(--secondary-color);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}.audio-btn:active{transform:translateY(0)}.audio-btn.active{background:var(--secondary-color);color:#fff;box-shadow:var(--shadow-md)}.audio-btn.toggle-btn{min-width:130px}.audio-btn.toggle-btn[aria-pressed=true]{background:var(--success-color);color:#fff;border-color:var(--success-color);box-shadow:var(--shadow-md)}.audio-btn.toggle-btn[aria-pressed=true]:hover{background:var(--success-color);opacity:.9}.audio-settings-panel{margin-top:var(--spacing-md);padding:var(--spacing-lg);background:var(--surface-color);border:2px solid var(--secondary-color);border-radius:var(--radius-lg);max-height:0;overflow:hidden;opacity:0;transition:all var(--transition-normal)}.audio-settings-panel[aria-hidden=false]{max-height:600px;opacity:1;margin-bottom:var(--spacing-md)}.settings-title{font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md);text-align:center}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.setting-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.setting-label{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-sm);font-weight:600;color:var(--primary-color);margin:0}.setting-value{font-weight:700;color:var(--secondary-color);min-width:50px;text-align:right}.setting-select{padding:var(--spacing-sm);border:2px solid var(--border-color);background:var(--background-color);color:var(--text-color);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.setting-select:hover{border-color:var(--secondary-color)}.setting-select:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 3px #3498db1a}.setting-slider{width:100%;height:6px;background:var(--background-color);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--secondary-color);border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.setting-slider::-moz-range-thumb{width:18px;height:18px;background:var(--secondary-color);border-radius:50%;cursor:pointer;border:none;transition:all var(--transition-fast)}.setting-slider:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 0 4px #3498db33}.setting-slider:hover::-moz-range-thumb{transform:scale(1.2);box-shadow:0 0 0 4px #3498db33}.setting-checkbox{width:20px;height:20px;margin-right:var(--spacing-xs);cursor:pointer;accent-color:var(--secondary-color)}.settings-info{padding:var(--spacing-md);background:var(--background-color);border-radius:var(--radius-md);border-left:4px solid var(--secondary-color)}.settings-info p{margin:0;font-size:var(--font-size-sm);color:var(--text-color);line-height:1.6}.settings-info strong{color:var(--primary-color)}.volume-control{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);border:2px solid var(--secondary-color);background:var(--surface-color);border-radius:var(--radius-md);min-width:200px}.volume-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:600;color:var(--primary-color);cursor:pointer;margin:0}.volume-icon{font-size:16px}.volume-slider{flex:1;height:6px;background:var(--background-color);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--secondary-color);border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{background:var(--primary-color);transform:scale(1.1)}.volume-slider::-moz-range-thumb{width:18px;height:18px;background:var(--secondary-color);border-radius:50%;cursor:pointer;border:none;transition:all var(--transition-fast)}.volume-slider::-moz-range-thumb:hover{background:var(--primary-color);transform:scale(1.1)}.volume-slider::-moz-range-track{height:6px;background:var(--background-color);border-radius:3px;border:none}.volume-display{font-size:var(--font-size-sm);font-weight:600;color:var(--primary-color);min-width:35px;text-align:right}.audio-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-icon{font-size:var(--font-size-lg)}.info-panel{background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-xl);position:sticky;top:calc(80px + var(--spacing-lg));max-height:calc(100vh - 120px);overflow-y:auto}.info-title{font-size:var(--font-size-xxl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-lg);text-align:center}.info-section{margin-bottom:var(--spacing-lg)}.info-subtitle{font-size:var(--font-size-lg);font-weight:600;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.info-text{color:var(--text-secondary);line-height:1.5}.related-keys{display:flex;flex-direction:column;gap:var(--spacing-sm)}.related-key{padding:var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.related-key[data-relationship=dominant]{background:var(--dominant-bg);color:var(--primary-color);border:1px solid var(--dominant-border);font-weight:600}.related-key[data-relationship=subdominant]{background:var(--subdominant-bg);color:var(--primary-color);border:1px solid var(--subdominant-border);font-weight:600}.related-key[data-relationship=relative]{background:var(--relative-bg);color:var(--primary-color);border:1px solid var(--relative-border);font-weight:600}.related-key:hover{transform:translate(4px);box-shadow:var(--shadow-sm)}.chord-progressions{display:flex;flex-direction:column;gap:var(--spacing-sm)}.progression-btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);background:var(--background-color);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);text-align:left;min-width:120px;width:100%}.progression-btn:hover{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}.progression-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.progression-btn.playing{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-md);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.footer{background:#2c3e50!important;color:#fff!important;padding:var(--spacing-lg) 0;text-align:center}.footer-text{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);color:#fff!important}.footer-credits{font-size:var(--font-size-sm);color:#fff!important;opacity:1}.heart-beat{display:inline-block;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}56%{transform:scale(1)}to{transform:scale(1)}}.loading-skeleton{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--background-color);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity var(--transition-normal)}.loading-skeleton.hidden{opacity:0;pointer-events:none}.skeleton-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);max-width:1200px;width:90%}.skeleton-circle{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}.skeleton-circle-ring{position:absolute;width:100%;height:100%;border:20px solid var(--border-color);border-radius:var(--radius-full);opacity:.3;animation:pulse 1.5s ease-in-out infinite}.skeleton-circle-center{width:120px;height:120px;background:var(--border-color);border-radius:var(--radius-full);opacity:.2;animation:pulse 1.5s ease-in-out infinite .3s}.skeleton-info-panel{width:100%;max-width:400px;padding:var(--spacing-lg);background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.skeleton-line{height:16px;background:var(--border-color);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);opacity:.3;animation:pulse 1.5s ease-in-out infinite}.skeleton-line.skeleton-title{height:24px;width:60%;margin-bottom:var(--spacing-md)}.skeleton-line.skeleton-subtitle{height:18px;width:40%;margin-bottom:var(--spacing-lg)}.skeleton-line.skeleton-short{width:70%}.skeleton-controls{display:flex;gap:var(--spacing-md);justify-content:center}.skeleton-button{width:100px;height:40px;background:var(--border-color);border-radius:var(--radius-md);opacity:.3;animation:pulse 1.5s ease-in-out infinite}.skeleton-button:nth-child(2){animation-delay:.2s}.skeleton-button:nth-child(3){animation-delay:.4s}.loading-text{color:var(--text-secondary);font-size:var(--font-size-base);margin-top:var(--spacing-lg);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay-color);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity var(--transition-normal)}.loading.hidden{opacity:0;pointer-events:none}.loading-spinner{width:40px;height:40px;border:4px solid var(--background-color);border-top:4px solid var(--secondary-color);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}.key-segment{will-change:transform,filter}.key-segment.note-playing,.key-segment.chord-playing,.key-segment.progression-playing{will-change:filter}.audio-btn,.mode-btn,.progression-btn,.theme-btn{will-change:transform,background-color}.loading-spinner{will-change:transform}.key-segment:hover,.key-segment:active,.audio-btn:hover,.audio-btn:active,.mode-btn:hover,.mode-btn:active{transform:translateZ(0)}.circle-container{contain:layout style paint}.info-panel{contain:layout style}.audio-controls{contain:layout}@media (max-width: 1024px){.main .container{grid-template-columns:1fr;gap:var(--spacing-lg)}.info-panel{position:static;max-height:none;order:2}.circle-container{order:1}}@media (max-width: 768px){.header .container{flex-direction:column;text-align:center;gap:var(--spacing-lg)}.theme-toggle{order:-1}.theme-btn{min-width:120px;justify-content:center}.theme-dropdown{left:50%;right:auto;transform:translate(-50%) translateY(-10px);min-width:120px}.theme-dropdown[aria-hidden=false]{transform:translate(-50%) translateY(0)}.circle-container{padding:var(--spacing-md)}.audio-controls{flex-wrap:wrap;justify-content:center}.audio-btn{min-width:120px;justify-content:center}.volume-control{min-width:180px;order:1}.info-panel{padding:var(--spacing-lg)}.related-keys,.chord-progressions{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm)}}@media (max-width: 480px){.container{padding:0 var(--spacing-sm)}.title-main{font-size:var(--font-size-xl)}.circle-svg{max-width:100%;height:auto}.mode-toggle,.difficulty-toggle,.theme-toggle{width:100%;justify-content:center}.theme-dropdown{left:0;right:0;transform:translateY(-10px)}.theme-dropdown[aria-hidden=false]{transform:translateY(0)}.audio-controls{grid-template-columns:1fr 1fr;gap:var(--spacing-sm);width:100%}.audio-btn{font-size:var(--font-size-sm);padding:var(--spacing-sm)}.volume-control{min-width:160px;grid-column:1 / -1}.info-panel{padding:var(--spacing-md)}.info-title{font-size:var(--font-size-xl)}.center-key{font-size:24px}.center-mode{font-size:14px}.center-signature{font-size:10px}}@media (hover: none) and (pointer: coarse){.key-segment:hover{filter:none}.key-segment:active{filter:brightness(1.2)}.audio-btn:hover{transform:none}.audio-btn:active{transform:scale(.95)}.related-key:hover{transform:none}.related-key:active{transform:scale(.98)}.progression-btn:hover{background:var(--background-color);color:var(--text-primary)}.progression-btn:active{background:var(--secondary-color);color:#fff}.theme-btn:hover{background:transparent;color:var(--text-secondary)}.theme-btn:active{background:var(--surface-color);color:var(--text-primary);transform:scale(.95)}.theme-option:hover{background:transparent}.theme-option:active{background:var(--background-color);transform:scale(.98)}.key-segment{stroke-width:3;cursor:pointer}.volume-slider{height:8px;-webkit-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{width:24px;height:24px;-webkit-appearance:none;appearance:none;background:var(--primary-color);border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:24px;height:24px;border:none;background:var(--primary-color);border-radius:50%;cursor:pointer}.key-segment,.audio-btn,.mode-btn,.progression-btn,.theme-btn,.related-key{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.audio-controls .audio-btn{margin:var(--spacing-xs);min-height:44px;min-width:44px}.mode-controls .mode-btn{min-height:44px;min-width:80px}.progression-controls .progression-btn{min-height:44px;min-width:60px}}span[data-relationship=dominant],span[data-relationship=subdominant],span[data-relationship=relative]{color:var(--primary-color);font-weight:600}a{color:var(--secondary-color);text-decoration:underline}a:hover{color:var(--primary-color)}.footer a{color:#fff;text-decoration:underline}.footer a:hover{color:#fffc}.key-segment:focus{outline:3px solid var(--primary-color);outline-offset:2px}.audio-btn:focus,.mode-btn:focus,.progression-btn:focus,.theme-btn:focus,.theme-option:focus{outline:2px solid var(--primary-color);outline-offset:2px}.volume-slider:focus{outline:2px solid var(--primary-color);outline-offset:1px}@media (prefers-contrast: high){.key-segment:focus{outline:4px solid #000000;outline-offset:2px}.audio-btn:focus,.mode-btn:focus,.progression-btn:focus,.theme-btn:focus,.theme-option:focus{outline:3px solid #000000;outline-offset:2px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.loading-spinner{animation:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:6px;background:var(--primary-color);color:#fff;padding:8px;text-decoration:none;border-radius:4px;z-index:1000;transition:top .3s}.skip-link:focus{top:6px}.key-segment:focus{outline:3px solid var(--secondary-color);outline-offset:2px}.audio-btn:focus{outline:3px solid var(--secondary-color);outline-offset:2px}.related-key:focus{outline:3px solid var(--secondary-color);outline-offset:2px}a:focus{outline:3px solid var(--secondary-color);outline-offset:2px}[data-theme=dark] .mode-btn,[data-theme=dark] .difficulty-btn{background:#2c2c2c!important;color:#fff!important;border-color:#666!important}[data-theme=dark] .footer-text,[data-theme=dark] .footer-credits{color:#fff!important}#major-mode,#beginner-level{background:#fff!important;color:#000!important;border:1px solid #666666!important}[data-theme=dark] #major-mode,[data-theme=dark] #beginner-level{background:#2c2c2c!important;color:#fff!important}@media (prefers-contrast: high){:root{--background-color: #ffffff;--surface-color: #ffffff;--text-primary: #000000;--text-secondary: #333333;--border-color: #000000;--primary-color: #000000;--secondary-color: #0066cc}}.error-notification{position:fixed;top:20px;right:20px;max-width:400px;background-color:var(--surface-color);border:2px solid var(--accent-color);border-radius:8px;box-shadow:0 4px 12px var(--shadow-color);z-index:10000;animation:slideInRight .3s ease-out}.error-content{padding:20px}.error-title{color:var(--accent-color);font-size:1.1rem;font-weight:600;margin:0 0 10px}.error-message{color:var(--text-primary);font-size:.95rem;margin:0 0 15px;line-height:1.5}.error-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;padding:5px 10px;line-height:1;transition:color .2s ease}.error-close:hover,.error-close:focus{color:var(--accent-color);outline:2px solid var(--accent-color);outline-offset:2px}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loading-spinner{animation:none;border:4px solid var(--secondary-color)}.error-notification{animation:none}}@media print{.header,.footer,.audio-controls,.loading{display:none}.main{padding:0}.circle-container{box-shadow:none;border:1px solid var(--text-primary)}}.key-tooltip{position:fixed;background:var(--surface-color);border:2px solid var(--secondary-color);border-radius:8px;padding:12px 16px;box-shadow:0 4px 12px var(--shadow-color);pointer-events:none;z-index:10000;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;font-size:14px;line-height:1.5;max-width:200px}.key-tooltip[aria-hidden=false]{opacity:1;transform:translateY(0)}.key-tooltip .tooltip-key{font-weight:700;font-size:16px;color:var(--text-primary);margin-bottom:4px}.key-tooltip .tooltip-mode{color:var(--text-secondary);font-size:13px;margin-bottom:4px}.key-tooltip .tooltip-signature{color:var(--text-muted);font-size:12px;font-style:italic}