:root{--bg: #0e1116;--panel: #171c24;--panel-2: #1f2630;--border: #2b333f;--text: #e6e9ef;--muted: #8a94a6;--accent: #f0a830;--in-scale: #3a86ff;--selected: #2dd4a7;--wood: #2a2017;--string: #5c6577;--label-col: 40px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app{max-width:1200px;margin:0 auto;padding:24px 20px 60px}.app-header h1{font-size:1.4rem;margin:0}.subtitle{margin:4px 0 0;color:var(--accent);font-weight:600}.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin:18px 0}.control{display:flex;flex-direction:column;gap:6px}.control label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:.9rem}.mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.mode-toggle button{background:var(--panel-2);color:var(--text);border:none;padding:8px 16px;cursor:pointer;font-size:.9rem}.mode-toggle.small button{padding:7px 12px;font-size:1rem}.mode-toggle button.active{background:var(--in-scale);color:#fff}.scale-filter{flex-basis:100%}.chip-toggles{display:flex;flex-wrap:wrap;gap:6px}.chip-toggle{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:.83rem;cursor:pointer}.chip-toggle:hover{border-color:var(--in-scale)}.chip-toggle.on{background:var(--in-scale);border-color:var(--in-scale);color:#fff;font-weight:600}.tuning-editor{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.tuning-select-row{display:flex;gap:6px;align-items:center}.ghost-btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:.85rem}.ghost-btn:hover{border-color:var(--in-scale)}.ghost-btn.danger:hover{border-color:#e5484d;color:#ff6b6f}.open-string-row{display:flex;gap:6px}.open-string-row select{padding:6px;min-width:52px}.fretboard-wrap{overflow-x:auto;padding-bottom:8px}.fretboard{display:grid;min-width:720px;background:linear-gradient(180deg,#342819,var(--wood));border:1px solid #000;border-radius:8px;padding:4px 4px 0}.string-row{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;position:relative;height:40px}.string-row:after{content:"";position:absolute;left:var(--label-col);right:0;top:50%;height:2px;background:var(--string);z-index:0}.string-label{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:.85rem}.fret-cell{position:relative;height:40px;border:none;border-left:2px solid #00000055;background:transparent;color:transparent;cursor:default;display:flex;align-items:center;justify-content:center;z-index:1;padding:0}.fret-cell.open{border-left:4px solid #d8cbb3}.fret-cell.interactive{cursor:pointer}.fret-cell.interactive:hover:before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;border:1px dashed var(--muted)}.fret-cell.interactive:active:after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#fff3;z-index:3}.fret-cell .note{position:relative;z-index:2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#0e1116}.fret-cell.in-scale .note{background:var(--in-scale);color:#fff}.fret-cell.root .note{background:var(--accent);color:#1a1205}.fret-cell.selected .note{background:var(--selected);color:#07241c}.fret-numbers{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;padding:6px 0 4px}.fret-number{display:flex;flex-direction:column;align-items:center;font-size:.7rem;color:var(--muted)}.fret-number .marker{color:#d8cbb3;line-height:.6}.key-finder{margin-top:22px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px}.kf-header{display:flex;align-items:center;justify-content:space-between}.kf-header h2{margin:0;font-size:1.05rem}.kf-actions{display:flex;gap:14px;align-items:center}.hint{color:var(--muted);font-size:.85rem;margin:6px 0 12px}.selected-notes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.chip{background:var(--selected);color:#07241c;font-weight:700;border-radius:999px;padding:3px 11px;font-size:.82rem}.muted{color:var(--muted)}.match-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.match{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;color:var(--text)}.match:hover{border-color:var(--in-scale)}.match-name{font-weight:700}.match-fit{font-size:.75rem;color:var(--muted)}.link{background:none;border:none;color:var(--in-scale);cursor:pointer;font-size:.85rem}.link:disabled{color:var(--muted);cursor:default}.about{margin-top:28px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px}.about h2{margin:0 0 8px;font-size:1.05rem}.feature-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}.feature-list li{color:var(--muted);font-size:.88rem;line-height:1.5}.about strong{color:var(--text)}.app-footer{margin-top:30px;color:var(--muted);font-size:.78rem}