*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--header-bg: #16213e;--header-border: #0f3460;--control-bg: #0f3460;--control-border: #2c5282;--control-hover: #1a4a7a;--text: #e0e0e0;--text-muted: #aaaaaa;--accent: #e67e22;--neck-root: #e67e22;--neck-scale: #2980b9;--neck-dot-text: #ffffff;--neck-string: #8a8a8a;--neck-fret: #555555;--neck-nut: #cccccc;--neck-bg: #2a1f14;--neck-edge: #3d2b18;--neck-marker: #c0c0c0;--neck-fret-num: #aaaaaa;--neck-string-label: #cccccc}[data-theme=light]{--bg: #f0ebe0;--header-bg: #e2d9c8;--header-border: #c4b49a;--control-bg: #fff8f0;--control-border: #c4b49a;--control-hover: #ecdfc8;--text: #1a1a1a;--text-muted: #555555;--accent: #c0550a;--neck-root: #c0550a;--neck-scale: #1a6ea8;--neck-dot-text: #1a1a1a;--neck-string: #666666;--neck-fret: #9e8a76;--neck-nut: #3a2e24;--neck-bg: #c8a96e;--neck-edge: #a07840;--neck-marker: #1a1a1a;--neck-fret-num: #555555;--neck-string-label: #333333}html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:14px;transition:background .2s,color .2s}header{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--header-bg);border-bottom:1px solid var(--header-border);flex-wrap:wrap}header h1{font-size:1.1rem;font-weight:500;color:var(--accent);white-space:nowrap;letter-spacing:.04em}#settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}#settings label{color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}#settings select,#settings input.fret-input{background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);border-radius:4px;padding:4px 8px;font-size:.85rem;cursor:pointer;outline:none;transition:background .2s,color .2s}#settings select:focus,#settings input.fret-input:focus{border-color:var(--accent)}#settings input.fret-input{width:58px;text-align:center}#selectors{display:flex;flex-direction:column;gap:12px;padding:16px 20px}fieldset.selector-group{border:none;padding:0;margin:0}fieldset.selector-group>legend{padding:0 0 4px;color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.root-row{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}.root-row button{background:var(--control-bg);color:var(--text-muted);border:1px solid var(--control-border);border-radius:4px;padding:6px 4px;font-size:.85rem;font-weight:500;cursor:pointer;text-align:center;transition:background .15s,color .15s,border-color .15s}.root-row button:hover{background:var(--control-hover);color:var(--text)}.root-row button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.root-row button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scale-section{display:flex;flex-direction:column;gap:8px}legend.scale-legend{display:flex;align-items:center;gap:8px;width:100%}.scale-play-row{display:flex;gap:4px}.scale-play-btn{background:var(--control-bg);color:var(--text-muted);border:1px solid var(--control-border);border-radius:4px;padding:2px 8px;font-size:.75rem;cursor:pointer;text-transform:none;letter-spacing:normal;transition:background .15s,color .15s,border-color .15s}.scale-play-btn:hover{background:var(--control-hover);color:var(--text);border-color:var(--accent)}.scale-play-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.scale-bpm-label{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-left:4px}.scale-bpm-input{background:var(--control-bg);color:var(--text);border:1px solid var(--control-border);border-radius:4px;padding:2px 6px;font-size:.82rem;width:56px;text-align:center;outline:none}.scale-bpm-input:focus{border-color:var(--accent)}.scale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px}.scale-grid button{background:var(--control-bg);color:var(--text-muted);border:1px solid var(--control-border);border-radius:4px;padding:6px 8px;font-size:.82rem;cursor:pointer;text-align:center;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-grid button:hover{background:var(--control-hover);color:var(--text)}.scale-grid button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.scale-grid button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scale-group-heading{grid-column:1 / -1;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:6px 0 2px;border-bottom:1px solid var(--control-border)}.scale-group-heading:first-child{padding-top:0}.btn-group{display:flex;flex-wrap:wrap;gap:4px}.btn-group button{background:var(--control-bg);color:var(--text-muted);border:1px solid var(--control-border);border-radius:4px;padding:4px 10px;font-size:.82rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.btn-group button:hover{background:var(--control-hover);color:var(--text)}.btn-group button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-group button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.label-toggle{display:flex;border:1px solid var(--control-border);border-radius:4px;overflow:hidden}.label-toggle button{background:var(--control-bg);color:var(--text-muted);border:none;padding:4px 10px;font-size:.82rem;cursor:pointer;border-right:1px solid var(--control-border);transition:background .15s,color .15s}.label-toggle button:last-child{border-right:none}.label-toggle button:hover{background:var(--control-hover);color:var(--text)}.label-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.label-toggle button.active{background:var(--accent);color:#fff}#export-btns{display:flex;gap:4px;flex-shrink:0}#export-btns button{background:none;border:1px solid var(--control-border);border-radius:4px;color:var(--text-muted);font-size:.78rem;font-weight:500;letter-spacing:.04em;padding:4px 8px;cursor:pointer;transition:border-color .15s,color .15s}#export-btns button:hover{border-color:var(--accent);color:var(--accent)}#export-btns button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#theme-toggle{background:none;border:1px solid var(--control-border);border-radius:4px;color:var(--text-muted);font-size:1.1rem;line-height:1;padding:4px 8px;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}#theme-toggle:hover{border-color:var(--accent);color:var(--accent)}#theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}main{padding:24px 20px;overflow-x:auto}#neck svg{display:block}.note-active{filter:brightness(1.5) drop-shadow(0 0 5px rgba(255,255,255,.8));transition:filter .05s}