*{margin:0;padding:0;box-sizing:border-box}:root{--alpha-light: .08;--alpha-border: .2;--alpha-hover: .12;--alpha-active: .16;--primary-color: #18181b;--secondary-color: #6366f1;--accent-color: #f43f5e;--success-color: #22c55e;--warning-color: #f59e0b;--background-color: #fafafa;--surface-color: #ffffff;--surface-elevated: #ffffff;--text-primary: #18181b;--text-secondary: #52525b;--text-muted: #a1a1aa;--border-color: #e4e4e7;--border-subtle: #f4f4f5;--shadow-color: rgba(0, 0, 0, .04);--shadow-md: rgba(0, 0, 0, .08);--overlay-color: rgba(255, 255, 255, .95);--ring-color: rgba(99, 102, 241, .4);--major-color: #6366f1;--minor-color: #a855f7;--dominant-color: #f43f5e;--subdominant-color: #f59e0b;--relative-color: #22c55e;--dominant-bg: rgba(244, 63, 94, var(--alpha-light));--dominant-border: rgba(244, 63, 94, var(--alpha-border));--subdominant-bg: rgba(245, 158, 11, var(--alpha-light));--subdominant-border: rgba(245, 158, 11, var(--alpha-border));--relative-bg: rgba(34, 197, 94, var(--alpha-light));--relative-border: rgba(34, 197, 94, var(--alpha-border))}[data-theme=dark]{--primary-color: #fafafa;--secondary-color: #818cf8;--accent-color: #fb7185;--success-color: #4ade80;--warning-color: #fbbf24;--background-color: #0a0a0b;--surface-color: #18181b;--surface-elevated: #27272a;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--border-color: #27272a;--border-subtle: #3f3f46;--shadow-color: rgba(0, 0, 0, .2);--shadow-md: rgba(0, 0, 0, .4);--overlay-color: rgba(10, 10, 11, .95);--ring-color: rgba(129, 140, 248, .4);--major-color: #818cf8;--minor-color: #c084fc;--dominant-color: #fb7185;--subdominant-color: #fbbf24;--relative-color: #4ade80;--dominant-bg: rgba(251, 113, 133, var(--alpha-light));--dominant-border: rgba(251, 113, 133, var(--alpha-border));--subdominant-bg: rgba(251, 191, 36, var(--alpha-light));--subdominant-border: rgba(251, 191, 36, var(--alpha-border));--relative-bg: rgba(74, 222, 128, var(--alpha-light));--relative-border: rgba(74, 222, 128, var(--alpha-border))}[data-theme=system]{--primary-color: #18181b;--secondary-color: #6366f1;--accent-color: #f43f5e;--success-color: #22c55e;--warning-color: #f59e0b;--background-color: #fafafa;--surface-color: #ffffff;--surface-elevated: #ffffff;--text-primary: #18181b;--text-secondary: #52525b;--text-muted: #a1a1aa;--border-color: #e4e4e7;--border-subtle: #f4f4f5;--shadow-color: rgba(0, 0, 0, .04);--shadow-md: rgba(0, 0, 0, .08);--overlay-color: rgba(255, 255, 255, .95);--ring-color: rgba(99, 102, 241, .4);--major-color: #6366f1;--minor-color: #a855f7;--dominant-color: #f43f5e;--subdominant-color: #f59e0b;--relative-color: #22c55e;--dominant-bg: rgba(244, 63, 94, var(--alpha-light));--dominant-border: rgba(244, 63, 94, var(--alpha-border));--subdominant-bg: rgba(245, 158, 11, var(--alpha-light));--subdominant-border: rgba(245, 158, 11, var(--alpha-border));--relative-bg: rgba(34, 197, 94, var(--alpha-light));--relative-border: rgba(34, 197, 94, var(--alpha-border))}@media (prefers-color-scheme: dark){[data-theme=system]{--primary-color: #fafafa;--secondary-color: #818cf8;--accent-color: #fb7185;--success-color: #4ade80;--warning-color: #fbbf24;--background-color: #0a0a0b;--surface-color: #18181b;--surface-elevated: #27272a;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--border-color: #27272a;--border-subtle: #3f3f46;--shadow-color: rgba(0, 0, 0, .2);--shadow-md: rgba(0, 0, 0, .4);--overlay-color: rgba(10, 10, 11, .95);--ring-color: rgba(129, 140, 248, .4);--major-color: #818cf8;--minor-color: #c084fc;--dominant-color: #fb7185;--subdominant-color: #fbbf24;--relative-color: #4ade80;--dominant-bg: rgba(251, 113, 133, var(--alpha-light));--dominant-border: rgba(251, 113, 133, var(--alpha-border));--subdominant-bg: rgba(251, 191, 36, var(--alpha-light));--subdominant-border: rgba(251, 191, 36, var(--alpha-border));--relative-bg: rgba(74, 222, 128, var(--alpha-light));--relative-border: rgba(74, 222, 128, 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-xl: 16px;--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-md);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color)}.header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-lg)}.title{display:flex;flex-direction:row;align-items:baseline;gap:var(--spacing-sm)}.title-main{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.title-sub{font-size:var(--font-size-sm);color:var(--text-muted);font-weight:400}.mode-toggle,.difficulty-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 var(--border-color);background:var(--surface-color);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);position:relative}.mode-btn:hover,.difficulty-btn:hover{background:var(--background-color);border-color:var(--secondary-color)}.mode-btn.active,.difficulty-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.mode-btn:focus,.difficulty-btn:focus{outline:2px solid var(--secondary-color);outline-offset:2px}.theme-switcher{display:flex;align-items:center}.theme-switcher-track{display:flex;align-items:center;gap:2px;padding:4px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;position:relative;box-shadow:inset 0 1px 2px var(--shadow-color)}.theme-switcher-indicator{position:absolute;width:calc(33.333% - 4px);height:calc(100% - 8px);background:var(--secondary-color);border-radius:8px;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014;pointer-events:none;z-index:0;left:4px;top:4px}.theme-switcher-track:has(.theme-segment[data-theme=light].active) .theme-switcher-indicator{transform:translate(0)}.theme-switcher-track:has(.theme-segment[data-theme=system].active) .theme-switcher-indicator{transform:translate(calc(100% + 2px))}.theme-switcher-track:has(.theme-segment[data-theme=dark].active) .theme-switcher-indicator{transform:translate(calc(200% + 4px))}.theme-segment{display:flex;align-items:center;justify-content:center;width:40px;height:32px;padding:0;border:none;background:transparent;color:var(--text-secondary);border-radius:8px;cursor:pointer;transition:color .15s ease;position:relative;z-index:1}.theme-segment:hover{color:var(--text-primary)}.theme-segment.active{color:#fff}.theme-segment:focus-visible{outline:2px solid var(--ring-color);outline-offset:2px}.theme-segment .theme-icon{width:18px;height:18px;stroke-width:2;transition:transform .15s ease}.theme-segment:hover .theme-icon{transform:scale(1.1)}.theme-segment:active .theme-icon{transform:scale(.95)}.help-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid var(--border-color);background:var(--surface-color);color:var(--text-primary);font-size:var(--font-size-lg);font-weight:700;border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.help-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:scale(1.1)}.help-btn:focus{outline:2px solid var(--secondary-color);outline-offset:2px}.help-icon{line-height:1}.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)}.modal[aria-hidden=false]{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--surface-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:600px;width:90%;max-height:90vh;overflow:auto;transform:scale(.9) translateY(20px);transition:transform var(--transition-normal)}.modal[aria-hidden=false] .modal-content{transform:scale(1) translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-title{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);margin:0}.modal-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--text-secondary);font-size:24px;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.modal-close:hover{background:var(--error-color);color:#fff}.modal-body{padding:var(--spacing-lg)}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.shortcut-group{background:var(--background-color);border-radius:var(--radius-md);padding:var(--spacing-md)}.shortcut-group-title{font-size:var(--font-size-sm);font-weight:700;color:var(--primary-color);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--spacing-sm) 0;padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--primary-color)}.shortcut-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) 0}.shortcut-item kbd{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);box-shadow:0 2px 0 var(--border-color)}.shortcut-item span{color:var(--text-secondary);font-size:var(--font-size-sm)}.main{flex:1;padding:var(--spacing-xl) 0;background:var(--background-color)}.main .container{display:grid;grid-template-columns:1fr 340px;gap:var(--spacing-xl);align-items:start}.circle-container{position:relative;background:var(--surface-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);border:1px solid var(--border-color)}.circle-skeleton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:600px;opacity:1;transition:opacity .3s ease-out;pointer-events:none;z-index:1}.circle-skeleton.hidden{opacity:0}.skeleton-ring{animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%,to{opacity:.1}50%{opacity:.2}}.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:1;opacity:.5}.center-circle{fill:var(--surface-color);stroke:var(--primary-color);stroke-width:4;filter:drop-shadow(0 4px 12px var(--shadow-color))}.center-key{font-size:48px;font-weight:700;fill:var(--primary-color);dominant-baseline:middle}.center-mode{font-size:20px;font-weight:600;fill:var(--text-secondary);dominant-baseline:middle}.center-signature{font-size:14px;fill:var(--text-secondary);dominant-baseline:middle}.center-relative{font-size:13px;fill:var(--secondary-color);dominant-baseline:middle;font-style:italic}.piano-keyboard{margin:var(--spacing-lg) auto;max-width:500px;padding:var(--spacing-sm);background:linear-gradient(180deg,var(--surface-color) 0%,var(--background-color) 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.piano-keys{display:flex;position:relative;height:100px;justify-content:center}.piano-key{position:relative;border-radius:0 0 var(--radius-sm) var(--radius-sm);transition:all var(--transition-fast);cursor:pointer}.piano-key.white-key{width:40px;height:100px;background:linear-gradient(180deg,#fff,#f0f0f0);border:1px solid #ccc;margin:0 1px;z-index:1}.piano-key.black-key{width:24px;height:60px;background:linear-gradient(180deg,#333,#111);border:1px solid #000;margin-left:-12px;margin-right:-12px;z-index:2}.piano-key.white-key:hover{background:linear-gradient(180deg,#f8f8f8,#e8e8e8)}.piano-key.black-key:hover{background:linear-gradient(180deg,#444,#222)}.piano-key.in-scale{box-shadow:inset 0 0 0 3px var(--secondary-color)}.piano-key.white-key.in-scale{background:linear-gradient(180deg,#e3f2fd,#bbdefb)}.piano-key.black-key.in-scale{background:linear-gradient(180deg,#1565c0,#0d47a1)}.piano-key.root-note{box-shadow:inset 0 0 0 3px var(--primary-color)}.piano-key.white-key.root-note{background:linear-gradient(180deg,#fff3e0,#ffe0b2)}.piano-key.black-key.root-note{background:linear-gradient(180deg,#e65100,#bf360c)}.piano-key.playing{transform:translateY(2px);box-shadow:0 0 15px var(--accent-color),inset 0 0 0 3px var(--accent-color)}.piano-key.white-key.playing{background:linear-gradient(180deg,#c8e6c9,#a5d6a7)}.piano-key.black-key.playing{background:linear-gradient(180deg,#2e7d32,#1b5e20)}@media (max-width: 600px){.piano-keyboard{max-width:100%;padding:var(--spacing-xs)}.piano-keys{height:70px}.piano-key.white-key{width:28px;height:70px}.piano-key.black-key{width:18px;height:42px;margin-left:-9px;margin-right:-9px}}.key-segment{cursor:pointer;transition:all var(--transition-normal)}.key-segment:hover .segment-path,.key-segment.hover .segment-path{filter:brightness(1.15);transform:scale(1.02);transform-origin:center}.key-segment.active .segment-path{filter:brightness(1.2) drop-shadow(0 0 15px var(--secondary-color));transform:scale(1.03);transform-origin:center}.key-segment.highlighted .segment-path{filter:brightness(1.08)}.key-segment.note-playing{z-index:10}.key-segment.note-playing .segment-path{filter:brightness(1.4) drop-shadow(0 0 20px var(--accent-color)) drop-shadow(0 0 40px var(--accent-color));animation:noteGlow .4s ease-out;transform-origin:center}.key-segment.note-playing .key-label{font-weight:800;fill:var(--accent-color);filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}@keyframes noteGlow{0%{filter:brightness(1.6) drop-shadow(0 0 30px var(--accent-color)) drop-shadow(0 0 60px var(--accent-color))}to{filter:brightness(1.4) drop-shadow(0 0 20px var(--accent-color)) drop-shadow(0 0 40px var(--accent-color))}}.key-segment.chord-playing{z-index:10}.key-segment.chord-playing .segment-path{filter:brightness(1.3) drop-shadow(0 0 15px var(--secondary-color)) drop-shadow(0 0 30px var(--secondary-color));animation:chordPulse 1.5s ease-in-out infinite}.key-segment.chord-playing .key-label{font-weight:700;filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}.key-segment.progression-playing{z-index:10}.key-segment.progression-playing .segment-path{filter:brightness(1.35) drop-shadow(0 0 12px var(--primary-color)) drop-shadow(0 0 25px var(--primary-color));animation:progressionGlow 1s ease-in-out infinite}.key-segment.progression-playing .key-label{font-weight:700;filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}@keyframes chordPulse{0%,to{filter:brightness(1.3) drop-shadow(0 0 15px var(--secondary-color)) drop-shadow(0 0 30px var(--secondary-color))}50%{filter:brightness(1.5) drop-shadow(0 0 25px var(--secondary-color)) drop-shadow(0 0 50px var(--secondary-color))}}@keyframes progressionGlow{0%,to{filter:brightness(1.35) drop-shadow(0 0 12px var(--primary-color)) drop-shadow(0 0 25px var(--primary-color))}50%{filter:brightness(1.5) drop-shadow(0 0 20px var(--primary-color)) drop-shadow(0 0 40px var(--primary-color))}}.segment-path{stroke:var(--surface-color);stroke-width:3;transition:all var(--transition-normal);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.segment-path.major{fill:var(--major-color)}.segment-path.minor{fill:var(--minor-color)}.segment-path.selected{fill:var(--primary-color);stroke-width:4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.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:20px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none;transition:fill var(--transition-fast);text-shadow:0 1px 2px rgba(0,0,0,.3)}.audio-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center;align-items:center}.primary-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.secondary-controls-wrapper{width:100%;margin-top:var(--spacing-sm)}.secondary-controls-toggle{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);transition:all var(--transition-fast);list-style:none;user-select:none}.secondary-controls-toggle::-webkit-details-marker{display:none}.secondary-controls-toggle:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--secondary-color)}.toggle-arrow{font-size:10px;transition:transform var(--transition-fast)}.secondary-controls-wrapper[open] .toggle-arrow{transform:rotate(180deg)}.secondary-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center;margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.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;position:relative}.audio-btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color);font-weight:700;padding:var(--spacing-md) var(--spacing-lg);min-width:140px;box-shadow:var(--shadow-sm)}.audio-btn-primary:hover{background:var(--secondary-color);border-color:var(--secondary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.audio-btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.audio-btn-secondary{background:transparent;border:2px solid var(--border-color);color:var(--text-primary)}.audio-btn-secondary:hover{background:var(--surface-hover);border-color:var(--secondary-color);transform:translateY(-1px)}.audio-btn-secondary:active{transform:translateY(0)}.audio-btn-stop{background:transparent;border:2px solid var(--error-color);color:var(--error-color);font-weight:700;min-width:100px}.audio-btn-stop:hover:not(:disabled){background:var(--error-color);color:#fff;border-color:var(--error-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.audio-btn-stop:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.audio-btn-stop.active{background:var(--error-color);color:#fff;border-color:var(--error-color);animation:pulse-stop 1s ease-in-out infinite}@keyframes pulse-stop{0%,to{box-shadow:0 0 #dc354566}50%{box-shadow:0 0 0 8px #dc354500}}.keyboard-hint{position:absolute;top:-8px;right:-8px;background:var(--accent-color);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;line-height:1;box-shadow:0 2px 4px #0003}.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-primary.playing{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color);animation:pulse-playing 1.5s ease-in-out infinite}.audio-btn-primary.playing .btn-icon{animation:bounce-icon .6s ease-in-out infinite}@keyframes pulse-playing{0%,to{box-shadow:0 0 #3498db80}50%{box-shadow:0 0 0 10px #3498db00}}@keyframes bounce-icon{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.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-toggle{position:relative}#audio-settings-toggle:after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--secondary-color);border-radius:50%;animation:settings-pulse 2s ease-in-out infinite}#audio-settings-toggle[aria-expanded=true]:after{display:none}@keyframes settings-pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.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-group-full{grid-column:1 / -1}.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-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);position:sticky;top:calc(70px + var(--spacing-md));max-height:calc(100vh - 100px);overflow-y:auto;border:1px solid var(--border-color)}.info-title{font-size:var(--font-size-xxl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-lg);text-align:center;padding-bottom:var(--spacing-md);border-bottom:2px solid var(--secondary-color)}.info-section{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--background-color);border-radius:var(--radius-md)}.info-subtitle{font-size:var(--font-size-base);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.info-text{color:var(--text-primary);line-height:1.6;font-weight:500}.related-keys{display:flex;flex-direction:column;gap:var(--spacing-xs)}.related-key{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);border:none;background:var(--surface-color)}.related-key[data-relationship=dominant]{background:var(--dominant-color);color:#fff;border-left:4px solid color-mix(in srgb,var(--dominant-color) 70%,black)}.related-key[data-relationship=subdominant]{background:var(--subdominant-color);color:#fff;border-left:4px solid color-mix(in srgb,var(--subdominant-color) 70%,black)}.related-key[data-relationship=relative]{background:var(--relative-color);color:#fff;border-left:4px solid color-mix(in srgb,var(--relative-color) 70%,black)}.related-key:hover{transform:translate(4px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.chord-progressions{display:flex;flex-direction:column;gap:var(--spacing-xs)}.progression-btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);border:2px solid var(--secondary-color);background:var(--surface-color);color:var(--text-primary);font-size:var(--font-size-base);font-weight:600;font-family:SF Mono,Monaco,Inconsolata,monospace;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:center;width:100%}.progression-btn:hover{background:var(--secondary-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.progression-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:var(--shadow-md)}.progression-btn.playing{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-lg);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.footer{background:var(--primary-color);color:#fff;padding:var(--spacing-lg) 0;text-align:center}.footer-text{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);color:#fff}.footer-credits{font-size:var(--font-size-sm);color:#ffffffe6}.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-segment{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-switcher{order:-1}.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{width:100%;justify-content:center}.theme-switcher{justify-content:center}.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}.center-relative{font-size:9px}}@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-segment:hover{color:var(--text-secondary)}.theme-segment:active{transform:scale(.95)}.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-segment,.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-segment:focus-visible{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-segment:focus-visible{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:var(--surface-color);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] .mode-btn.active,[data-theme=dark] .difficulty-btn.active{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}@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}