.header{position:sticky;top:0;z-index:100;background:#0d0d14d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color)}.header-content{display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:0 auto;padding:var(--spacing-md) var(--spacing-xl)}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{width:32px;height:32px;color:var(--accent-primary);animation:spin-slow 20s linear infinite}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-text{font-size:22px;font-weight:700;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.nav{display:flex;align-items:center;gap:var(--spacing-lg)}.nav-link{font-size:14px;font-weight:500;color:var(--text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link:hover{color:var(--text-primary);background:var(--hover-color)}.nav-link.active{color:var(--accent-primary);background:var(--active-color)}.github-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--text-secondary)}.github-link:hover{color:var(--text-primary)}@media (max-width: 768px){.header-content{padding:var(--spacing-sm) var(--spacing-md)}.logo-text{font-size:18px}.logo-icon{width:28px;height:28px}.nav-link:not(.github-link){display:none}}.controls{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-xl);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.controls-row{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);align-items:flex-start}.controls-main{justify-content:center}.controls-secondary{justify-content:center;padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.control-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.control-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.root-note-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.root-note-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.root-note-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent-primary)}.root-note-btn.active{background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 0 12px #ff6b3566}.toggle-group{display:flex;background:var(--bg-tertiary);border-radius:var(--radius-md);padding:3px;gap:3px}.toggle-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.toggle-btn:hover{color:var(--text-primary)}.toggle-btn.active{background:var(--accent-primary);color:var(--bg-primary);box-shadow:0 2px 8px #ff6b354d}.toggle-icon{font-size:14px}.control-select{min-width:180px;padding:var(--spacing-sm) var(--spacing-md);padding-right:var(--spacing-xl);font-size:13px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.control-select:hover{border-color:var(--accent-primary);background-color:var(--bg-elevated)}.control-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px #ff6b3533}.control-select option{background:var(--bg-secondary);color:var(--text-primary);padding:var(--spacing-sm)}.control-select optgroup{font-weight:600;color:var(--text-muted)}.scale-chord-group .control-select{min-width:220px}.formula-display{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,#ff6b351a,#f7931a0d);border-radius:var(--radius-md);border:1px solid rgba(255,107,53,.2)}.formula-title{font-size:20px;font-weight:600;color:var(--text-primary)}.formula-intervals{font-family:var(--font-mono);font-size:13px;color:var(--accent-primary);letter-spacing:.05em}.options-group{min-width:150px}.options-row{display:flex;gap:var(--spacing-md)}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);font-size:13px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.checkbox-label:hover{color:var(--text-primary)}.checkbox-label input{position:absolute;opacity:0;width:0;height:0}.checkbox-custom{width:18px;height:18px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-fast)}.checkbox-label input:checked+.checkbox-custom{background:var(--accent-primary);border-color:var(--accent-primary)}.checkbox-custom:after{content:"";position:absolute;display:none;left:6px;top:2px;width:4px;height:9px;border:solid var(--bg-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-label input:checked+.checkbox-custom:after{display:block}@media (max-width: 768px){.controls{padding:var(--spacing-md)}.controls-row{gap:var(--spacing-md)}.root-note-grid{grid-template-columns:repeat(4,1fr)}.root-note-btn{width:40px;height:40px}.control-select{min-width:140px}.scale-chord-group .control-select{min-width:180px}.formula-display{width:100%}}@media (max-width: 480px){.controls-main{flex-direction:column;align-items:stretch}.control-group{width:100%}.root-note-grid{grid-template-columns:repeat(6,1fr)}.root-note-btn,.toggle-group{width:100%}.toggle-btn{flex:1;justify-content:center}.control-select{width:100%}.scale-chord-group .control-select{min-width:100%}}.fretboard-container{display:flex;flex-direction:column;width:100%;overflow-x:auto;padding:var(--spacing-lg) 0;scrollbar-width:thin}.fret-numbers-row{display:grid;grid-template-columns:50px repeat(var(--num-frets, 16),minmax(40px,60px));gap:0;padding-left:40px;margin-bottom:var(--spacing-sm)}.fret-number{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);font-weight:500}.fretboard{position:relative;display:grid;grid-template-columns:50px repeat(var(--num-frets, 16),minmax(40px,60px));grid-template-rows:repeat(var(--num-strings, 6),32px);background:linear-gradient(180deg,var(--fretboard-wood) 0%,#252540 50%,var(--fretboard-wood) 100%);border-radius:var(--radius-md);padding:var(--spacing-md) 0;min-width:fit-content;box-shadow:inset 0 2px 20px #0006,0 4px 20px #0000004d}.nut{position:absolute;left:47px;top:0;bottom:0;width:6px;background:linear-gradient(90deg,var(--nut-color) 0%,#d4d4b8 50%,var(--nut-color) 100%);border-radius:2px;box-shadow:2px 0 8px #0000004d;z-index:2}.fret-wires{position:absolute;top:0;left:50px;right:0;bottom:0;display:grid;grid-template-columns:repeat(var(--num-frets, 16),minmax(40px,60px));pointer-events:none}.fret-wire{border-right:2px solid var(--fret-wire);height:100%;box-shadow:1px 0 3px #0003}.fret-markers{position:absolute;top:0;left:50px;right:0;bottom:0;display:grid;grid-template-columns:repeat(var(--num-frets, 16),minmax(40px,60px));pointer-events:none}.fret-marker-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20%}.fret-marker{width:10px;height:10px;background:var(--fret-marker);border-radius:50%;opacity:.6}.fret-marker.double-top,.fret-marker.double-bottom{width:8px;height:8px}.strings-container{position:relative;display:contents}.string-row{display:contents}.string-line{position:absolute;left:50px;right:0;background:linear-gradient(90deg,var(--string-color) 0%,#a0a0c0 50%,var(--string-color) 100%);pointer-events:none;z-index:1}.string-row:nth-child(1) .string-line{top:calc(var(--spacing-md) + 16px)}.string-row:nth-child(2) .string-line{top:calc(var(--spacing-md) + 16px + 32px)}.string-row:nth-child(3) .string-line{top:calc(var(--spacing-md) + 16px + 64px)}.string-row:nth-child(4) .string-line{top:calc(var(--spacing-md) + 16px + 96px)}.string-row:nth-child(5) .string-line{top:calc(var(--spacing-md) + 16px + 128px)}.string-row:nth-child(6) .string-line{top:calc(var(--spacing-md) + 16px + 160px)}.fret-position{display:flex;align-items:center;justify-content:center;position:relative;z-index:3;cursor:pointer;transition:transform var(--transition-fast)}.fret-position:hover{transform:scale(1.05)}.fret-position.nut{padding-left:4px}.note-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;transition:all var(--transition-fast);position:relative}.note-dot.highlighted{background:var(--note-color);color:#1a1a2e;box-shadow:0 0 0 2px var(--note-color),0 2px 8px #0000004d,0 0 15px color-mix(in srgb,var(--note-color) 40%,transparent)}.note-dot.muted{background:#6464784d;color:var(--text-muted);border:1px solid rgba(100,100,120,.4)}.note-dot.root{width:32px;height:32px;font-size:12px;box-shadow:0 0 0 3px var(--note-color),0 0 0 5px #fff3,0 4px 12px #0006,0 0 20px color-mix(in srgb,var(--note-color) 50%,transparent);animation:pulse-root 2s ease-in-out infinite}@keyframes pulse-root{0%,to{box-shadow:0 0 0 3px var(--note-color),0 0 0 5px #fff3,0 4px 12px #0006,0 0 20px color-mix(in srgb,var(--note-color) 50%,transparent)}50%{box-shadow:0 0 0 3px var(--note-color),0 0 0 7px #ffffff1a,0 4px 12px #0006,0 0 30px color-mix(in srgb,var(--note-color) 60%,transparent)}}.note-dot:hover{transform:scale(1.15);z-index:10}.note-label{-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.2)}.tuning-labels{display:flex;flex-direction:column;position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);gap:8px;padding:var(--spacing-md) 0}.tuning-label{width:30px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--bg-tertiary);border-radius:var(--radius-sm)}@media (max-width: 768px){.fretboard{grid-template-columns:40px repeat(var(--num-frets, 16),minmax(36px,50px));grid-template-rows:repeat(var(--num-strings, 6),28px)}.fret-numbers-row{grid-template-columns:40px repeat(var(--num-frets, 16),minmax(36px,50px));padding-left:32px}.nut{left:37px;width:5px}.fret-wires,.fret-markers{left:40px}.note-dot{width:24px;height:24px;font-size:10px}.note-dot.root{width:28px;height:28px}.tuning-label{width:26px;height:24px;font-size:10px}}@media (min-width: 1400px){.fretboard{grid-template-columns:60px repeat(var(--num-frets, 16),minmax(50px,70px));grid-template-rows:repeat(var(--num-strings, 6),36px)}.fret-numbers-row{grid-template-columns:60px repeat(var(--num-frets, 16),minmax(50px,70px));padding-left:50px}.nut{left:57px;width:7px}.fret-wires,.fret-markers{left:60px}.note-dot{width:32px;height:32px;font-size:12px}.note-dot.root{width:36px;height:36px;font-size:14px}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:var(--spacing-xl) var(--spacing-lg)}.content-wrapper{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-xl)}.fretboard-section{position:relative;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden}.fretboard-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-primary),transparent);opacity:.5}.legend-section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-lg)}.legend-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:13px;color:var(--text-secondary)}.legend-dot{width:20px;height:20px;border-radius:50%}.legend-dot.root{background:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary),0 0 0 4px #fff3,0 0 12px var(--accent-primary)}.legend-dot.scale-note{background:var(--note-g);box-shadow:0 0 0 2px var(--note-g)}.legend-dot.other-note{background:#6464784d;border:1px solid rgba(100,100,120,.4)}.legend-hint{font-size:12px;color:var(--text-muted);font-style:italic}.footer{padding:var(--spacing-lg);border-top:1px solid var(--border-color);background:var(--bg-secondary)}.footer-content{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);text-align:center}.footer p{font-size:13px;color:var(--text-muted)}.footer-note{font-size:12px;color:var(--text-muted);opacity:.7}@media (max-width: 768px){.main-content{padding:var(--spacing-md)}.content-wrapper{gap:var(--spacing-lg)}.fretboard-section{padding:var(--spacing-md);border-radius:var(--radius-md)}.legend{gap:var(--spacing-md)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fretboard-section{animation:fadeIn .4s ease-out}.controls{animation:fadeIn .3s ease-out}:root{--bg-primary: #0d0d14;--bg-secondary: #13131f;--bg-tertiary: #1a1a2e;--bg-elevated: #242438;--fretboard-wood: #1e1e2f;--fret-wire: #3d3d5c;--string-color: #8a8ab0;--nut-color: #f5f5dc;--fret-marker: #2a2a40;--accent-primary: #FF6B35;--accent-secondary: #F7931A;--accent-tertiary: #FFD93D;--note-c: #FF6B6B;--note-c-sharp: #FF8E72;--note-d: #FFB347;--note-d-sharp: #FFD93D;--note-e: #98D85B;--note-f: #4ECDC4;--note-f-sharp: #45B7D1;--note-g: #5B8DEE;--note-g-sharp: #7C6AEF;--note-a: #A56FFF;--note-a-sharp: #D66BA0;--note-b: #FF6B9D;--text-primary: #f0f0f5;--text-secondary: #a0a0b5;--text-muted: #6a6a80;--border-color: #2d2d44;--hover-color: rgba(255, 107, 53, .1);--active-color: rgba(255, 107, 53, .2);--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-full: 9999px;--font-display: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*,*: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-display);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 0%,rgba(255,107,53,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(90,80,220,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(247,147,26,.03) 0%,transparent 70%);pointer-events:none;z-index:-1}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-primary);color:var(--bg-primary)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}