: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){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}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)}@media(prefers-color-scheme:light){.fret-number,.fret-number-top,.fret-number-spacer,.fret-number-spacer-top{--fret-number-bg: rgba(0, 0, 0, .06);--fret-number-line: #999}.fret-column-open{--line-leftmost: #4a3d35;--nut: rgba(107, 83, 68, .55)}.fret-cell.in-scale .note-name{background:#388e3c59;color:#1b5e20}.fret-cell.in-scale.is-root .note-name{background:#f57c0080;color:#e65100}.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 p{margin:.25rem 0}.app-footer a{color:var(--muted, #888);text-decoration:underline}.app-footer a:hover{color:var(--accent, #646cff)}