:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){html:not([data-theme=dark]){color:#213547;background-color:#fff}html:not([data-theme=dark]) a:hover{color:#747bff}html:not([data-theme=dark]) button{background-color:#f9f9f9}}html[data-theme=light]{color:#213547;background-color:#fff}html[data-theme=light] a:hover{color:#747bff}html[data-theme=light] button{background-color:#f9f9f9}.app{min-height:100vh;padding:1rem 1.5rem;box-sizing:border-box}.app-header{margin-bottom:1.5rem}.app-header h1{margin:0;font-size:1.5rem;font-weight:600}.controls{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-bottom:1.5rem;padding:1rem;background:var(--ctrl-bg, rgba(0, 0, 0, .15));border-radius:10px}.control-group{display:flex;flex-direction:column;gap:.35rem}.control-group label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted, #888)}.control-group select{padding:.5rem .65rem;font-size:.95rem;border:1px solid var(--border, #444);border-radius:6px;background:var(--input-bg, #1e1e1e);color:inherit;min-width:140px}.control-zoom{display:flex;align-items:center;gap:.75rem;min-width:140px}.control-zoom input[type=range]{flex:1;min-width:80px}.control-zoom-value{font-variant-numeric:tabular-nums;font-weight:600;min-width:2.5em}.control-options-button{padding:.5rem .9rem;font-size:.9rem;font-weight:600;color:var(--accent-text, #a5b4fc);background:var(--ctrl-checkbox-bg, rgba(0, 0, 0, .2));border:1px solid var(--ctrl-checkbox-border, rgba(255, 255, 255, .1));border-radius:8px;cursor:pointer;transition:background .2s,color .2s}.control-options-button:hover{background:var(--ctrl-checkbox-hover, rgba(100, 108, 255, .15));color:var(--accent, #646cff)}.options-sidebar-overlay{position:fixed;inset:0;background:#0006;z-index:90;animation:options-overlay-in .2s ease}@keyframes options-overlay-in{0%{opacity:0}to{opacity:1}}.options-sidebar{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:90vw;background:var(--sidebar-bg, #1a1a1e);box-shadow:-4px 0 20px #0006;z-index:91;display:flex;flex-direction:column;transform:translate(100%);transition:transform .25s ease}.options-sidebar-open{transform:translate(0)}.options-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border, #333);flex-shrink:0}.options-sidebar-title{margin:0;font-size:1rem;font-weight:600;color:var(--text, #e0e0e0)}.options-sidebar-close{width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--muted, #888);background:transparent;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}.options-sidebar-close:hover{color:var(--text, #e0e0e0);background:#ffffff14}.options-sidebar-body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.control-switch-vertical{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.75rem}.control-switch{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer;color:var(--text, #e0e0e0);white-space:nowrap}.control-switch input[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.switch-track{display:inline-flex;align-items:center;flex-shrink:0;width:2.5rem;height:1.25rem;padding:0 2px;border-radius:999px;background:var(--switch-track-off, #444);transition:background .2s ease}.control-switch input:focus-visible+.switch-track{outline:2px solid var(--accent, #646cff);outline-offset:2px}.control-switch input:checked+.switch-track{background:var(--switch-track-on, #646cff)}.switch-thumb{width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .2s ease}.control-switch input:checked+.switch-track .switch-thumb{transform:translate(calc(1.45rem + 2px))}.switch-label{-webkit-user-select:none;user-select:none}.layout-note{font-size:.8rem;color:var(--muted, #888);margin-bottom:.75rem}.fretboard-section{display:flex;flex-direction:column;overflow-x:auto}.fretboard-align-wrapper{width:fit-content;max-width:100%}.fretboard-section.align-left .fretboard-align-wrapper{align-self:flex-start}.fretboard-section.align-center .fretboard-align-wrapper{align-self:center}.fretboard-section.align-right .fretboard-align-wrapper{align-self:flex-end}.fretboard-slot{margin-bottom:2rem}.fretboard-slot:last-child{margin-bottom:0}.fretboard-slot-title{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:var(--muted, #888)}.fretboard-slot-controls{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-bottom:.75rem}.fretboard-wrap{display:inline-block;width:fit-content;max-width:100%}.fretboard{display:flex;gap:0;font-variant-numeric:tabular-nums}.string-labels{display:flex;flex-direction:column;flex-shrink:0;width:28px;margin-right:4px}.string-label{display:flex;align-items:center;justify-content:center;height:var(--cell-height, 36px);min-height:var(--cell-height, 36px);flex-shrink:0;font-weight:700;font-size:.9rem;color:var(--muted, #888)}.fret-grid{display:flex;flex:1;min-width:0}.fret-column{display:flex;flex-direction:column;min-width:var(--cell-width, 44px);border-right:2px solid var(--fret-line, #555)}.fret-column-position-mark{background:var(--position-mark-column-bg, rgba(139, 115, 85, .08))}.fret-column-octave{border-right-color:var(--line-leftmost, #5c4a42);border-right-width:3px}.fret-column:first-child,.fret-column-open{border-left:4px solid var(--line-leftmost, #5c4a42);border-right:1px solid var(--nut, rgba(139, 115, 85, .5));background:linear-gradient(to right,rgba(139,115,85,.08),transparent 16px)}.fret-number{box-sizing:border-box;height:var(--cell-height, 36px);min-height:var(--cell-height, 36px);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--muted, #888);background:var(--fret-number-bg, rgba(80, 80, 80, .12));border-top:2px dashed var(--fret-number-line, #555);flex-shrink:0}.fret-number-top{border-top:none;border-bottom:2px dashed var(--fret-number-line, #555);background:var(--fret-number-bg, rgba(80, 80, 80, .12))}.fret-number-spacer,.fret-number-spacer-top{box-sizing:border-box;height:var(--cell-height, 36px);min-height:var(--cell-height, 36px);flex-shrink:0;background:var(--fret-number-bg, rgba(80, 80, 80, .12))}.fret-number-spacer{border-top:2px dashed var(--fret-number-line, #555)}.fret-number-spacer-top{border-top:none;border-bottom:2px dashed var(--fret-number-line, #555)}.fret-cell{box-sizing:border-box;height:var(--cell-height, 36px);min-height:var(--cell-height, 36px);flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-bottom:1px solid var(--string-line, #333);font-size:.75rem;font-weight:600}.fret-cell:last-child{border-bottom:none}.fret-cell .note-name{padding:2px 4px;border-radius:4px;line-height:1.1}.fret-cell .degree-label{font-size:.6rem;font-weight:700;opacity:.9;letter-spacing:.02em}.fret-cell.in-scale .note-name{background:var(--scale-highlight, rgba(76, 175, 80, .45));color:var(--scale-text, #e8f5e9)}.fret-cell.in-scale.is-root .note-name{background:var(--root-highlight, rgba(255, 167, 38, .65));color:var(--root-text, #fff8e1);font-weight:700}.fret-cell:not(.in-scale) .note-name{color:var(--muted, #666)}.options-sidebar-theme{display:flex;flex-direction:column;gap:.5rem}.options-sidebar-theme-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted, #888)}.options-sidebar-theme-buttons{display:flex;flex-wrap:wrap;gap:.35rem}.options-theme-btn{padding:.4rem .65rem;font-size:.8rem;font-weight:600;color:var(--muted, #888);background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:6px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.options-theme-btn:hover{background:#ffffff1f;color:#e0e0e0}.options-theme-btn-active{background:var(--accent, #646cff);color:#fff;border-color:var(--accent, #646cff)}html[data-theme=light] .options-theme-btn{background:#0000000f;border-color:#0000001f;color:#555}html[data-theme=light] .options-theme-btn:hover{background:#0000001a;color:#213547}html[data-theme=light] .options-theme-btn-active{background:#646cff;color:#fff;border-color:#646cff}html[data-theme=light] .options-sidebar-theme-label{color:#555}html[data-theme=light] .options-sidebar{background:#f5f5f5;border-color:#00000014}html[data-theme=light] .options-sidebar-title{color:#213547}html[data-theme=light] .options-sidebar-close{color:#555}html[data-theme=light] .options-sidebar-close:hover{color:#213547;background:#0000000f}html[data-theme=light] .control-switch,html[data-theme=light] .switch-label{color:#213547}@media(prefers-color-scheme:light){html:not([data-theme=dark]) .controls{background:#0000000f}html:not([data-theme=dark]) .control-group label{color:#555}html:not([data-theme=dark]) .control-group select{background:#fff;color:#213547;border-color:#aaa}html:not([data-theme=dark]) .control-group select:hover,html:not([data-theme=dark]) .control-group select:focus{border-color:#646cff}html:not([data-theme=dark]) .control-zoom-value{color:#213547}html:not([data-theme=dark]) .control-options-button{background:#00000014;color:#4338ca;border-color:#00000026}html:not([data-theme=dark]) .control-options-button:hover{background:#646cff1f;color:#4f46e5}html:not([data-theme=dark]) .layout-note{color:#555}html:not([data-theme=dark]) .fretboard-slot-title{color:#555}html:not([data-theme=dark]) .fret-number,html:not([data-theme=dark]) .fret-number-top,html:not([data-theme=dark]) .fret-number-spacer,html:not([data-theme=dark]) .fret-number-spacer-top{--fret-number-bg: rgba(0, 0, 0, .06);--fret-number-line: #999}html:not([data-theme=dark]) .fret-column-open{--line-leftmost: #4a3d35;--nut: rgba(107, 83, 68, .55)}html:not([data-theme=dark]) .fret-cell.in-scale .note-name{background:#388e3c59;color:#1b5e20}html:not([data-theme=dark]) .fret-cell.in-scale.is-root .note-name{background:#f57c0080;color:#e65100}html:not([data-theme=dark]) .fret-cell:not(.in-scale) .note-name{color:#999}}html[data-theme=light] .controls{background:#0000000f}html[data-theme=light] .control-group label{color:#555}html[data-theme=light] .control-group select{background:#fff;color:#213547;border-color:#aaa}html[data-theme=light] .control-group select:hover,html[data-theme=light] .control-group select:focus{border-color:#646cff}html[data-theme=light] .control-zoom-value{color:#213547}html[data-theme=light] .control-options-button{background:#00000014;color:#4338ca;border-color:#00000026}html[data-theme=light] .control-options-button:hover{background:#646cff1f;color:#4f46e5}html[data-theme=light] .layout-note,html[data-theme=light] .fretboard-slot-title{color:#555}html[data-theme=light] .fret-number,html[data-theme=light] .fret-number-top,html[data-theme=light] .fret-number-spacer,html[data-theme=light] .fret-number-spacer-top{--fret-number-bg: rgba(0, 0, 0, .06);--fret-number-line: #999}html[data-theme=light] .fret-column-open{--line-leftmost: #4a3d35;--nut: rgba(107, 83, 68, .55)}html[data-theme=light] .fret-cell.in-scale .note-name{background:#388e3c59;color:#1b5e20}html[data-theme=light] .fret-cell.in-scale.is-root .note-name{background:#f57c0080;color:#e65100}html[data-theme=light] .fret-cell:not(.in-scale) .note-name{color:#999}.app-footer{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--border, #333);font-size:.7rem;color:var(--muted, #888);text-align:center}.app-footer-ads{display:flex;flex-direction:column;gap:1rem;max-width:960px;margin:0 auto 1.25rem;padding:0 .5rem}.app-footer-ads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem 1rem}@media(max-width:640px){.app-footer-ads-grid{grid-template-columns:repeat(2,1fr)}}.app-footer-ad-slot{position:relative;aspect-ratio:1;background:#ffffff08;border:1px dashed var(--border, #444);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:.5rem;overflow:hidden}.app-footer-ad-slot>img{position:absolute;bottom:0;right:0;pointer-events:none}.app-footer-ad-slot .app-footer-ad-link{font-size:.75rem;line-height:1.35;color:var(--muted, #888);text-decoration:none;text-align:center;max-width:100%;min-width:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.app-footer-ad-slot .app-footer-ad-link img{min-width:0;min-height:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;display:block}.app-footer-ad-slot .app-footer-ad-link:hover{color:var(--accent, #646cff)}.app-footer-sessionsync{width:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.app-footer-sessionsync-link{display:block;line-height:0}.app-footer-sessionsync-link img{width:100%;height:auto;display:block;vertical-align:top}html[data-theme=light] .app-footer-sessionsync{border-color:#0000001a}html[data-theme=light] .app-footer-ad-slot{background:#0000000a;border-color:#0000001f}html[data-theme=light] .app-footer-ad-slot .app-footer-ad-link{color:#555}html[data-theme=light] .app-footer-ad-slot .app-footer-ad-link:hover{color:#4f46e5}@media(prefers-color-scheme:light){html:not([data-theme=dark]) .app-footer-ad-slot{background:#0000000a;border-color:#0000001f}}.app-footer-credit{padding-top:.5rem}.app-footer p{margin:.25rem 0}.app-footer a{color:var(--muted, #888);text-decoration:underline}.app-footer a:hover{color:var(--accent, #646cff)}