:root{--toolbar-width:320px;--primary-color:#4f46e5;--primary-hover:#4338ca;--tooltip-color:#117865;--border-color:#e5e7eb;--background-color:#f3f4f6;--label-text-color:#111827;--toolbar-heading-color:#111827;--card-background:#fff;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--border-radius:12px;--transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:#111827;background-color:var(--background-color);line-height:1.5}.app-container{display:grid;grid-template-columns:var(--toolbar-width) 1fr;min-height:100vh}.app-container,.toolbar{background:var(--background-color)}.toolbar{padding:10px;overflow-y:auto;gap:20px}.canvas-container{padding:20px;display:flex;justify-content:center;align-items:flex-start;background:#fff;overflow:auto}.toolbar-section{background:var(--card-background);border-radius:var(--border-radius);padding:12px;margin-bottom:8px;box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.toolbar-section:last-child{margin-bottom:0}.toolbar-section h2{font-size:1.1rem;font-weight:700;margin:0 0 18px;color:var(--toolbar-heading-color)}.form-group{margin-bottom:8px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-weight:600;margin-bottom:8px}.form-group label,input[type=number],select{font-size:.9rem;color:var(--label-text-color)}input[type=number],select{width:100%;padding:9px 12px;border:1px solid var(--border-color);border-radius:8px;background:#fff;transition:var(--transition)}input[type=number]:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(79,70,229,.1)}#fretCount,#startFret{text-align:center;font-weight:600;font-size:1.1rem}.custom-size{display:flex;gap:12px}.custom-size input{flex:1}.frets{display:flex;justify-content:space-between;gap:12px}.canvas-wrapper{transition:transform .3s cubic-bezier(.4,0,.2,1)}.canvas-wrapper.resizing{transform:scale(.98)}#fretboardCanvas{border:1px solid var(--border-color);border-radius:2px}.toggle-switch{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.toggle-switch:last-child{margin-bottom:0}.toggle-switch label{position:relative;display:inline-block;width:52px;height:32px;margin:0}.toggle-switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d1d5db;border-radius:32px}.slider,.slider:before{position:absolute;transition:.3s cubic-bezier(.4,0,.2,1)}.slider:before{content:"";height:28px;width:28px;left:2px;bottom:2px;background:#fff;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}input:checked+.slider{background:var(--primary-color)}input:checked+.slider:before{transform:translateX(20px)}.toggle-label{font-size:.95rem;font-weight:600;color:var(--label-text-color)}.tooltip{display:none;color:var(--tooltip-color)}.tooltip.active{display:block}#colorSelector{margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.color-btn{width:30px;height:30px;border:3px solid transparent;border-radius:4px;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);position:relative}.color-btn.active,.color-btn:hover{transform:scale(1.05)}.color-btn.active{outline:2px solid var(--primary-color)}#shapeSelector{margin-bottom:20px;gap:12px}#shapeSelector,.shape-btn{display:flex;align-items:center}.shape-btn{width:40px;height:40px;border:2px solid var(--border-color);border-radius:6px;cursor:pointer;background:#fff;justify-content:center;position:relative;transition:transform .2s,border-color .2s,background .2s}.shape-btn:hover{border-color:var(--primary-color);transform:scale(1.05)}.shape-btn:before{content:"";display:block}[data-shape=circle]:before{border-radius:50%}[data-shape=circle]:before,[data-shape=square]:before{width:24px;height:24px;background:#000}[data-shape=triangle]:before{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid #000}[data-shape=rhombus]:before{width:24px;height:24px;background:#000;transform:rotate(45deg)}[data-shape=cross]{font-size:24px;font-weight:900;line-height:1}.shape-btn.active{border-color:var(--primary-color);transform:scale(1.05)}[data-shape=circle].active:before,[data-shape=rhombus].active:before,[data-shape=square].active:before{background:var(--primary-color)}[data-shape=triangle].active:before{border-bottom-color:var(--primary-color)}[data-shape=cross].active{color:var(--primary-color)}#noteStyleRadio,#noteStyleRadio>label{display:flex;align-items:center;gap:4px}#noteStyleRadio{gap:12px;margin-bottom:20px}.solid{border-radius:2px;border:2px solid transparent;color:#f5f5f5;background-color:var(--primary-color)}.hollow,.solid{padding:2px 4px}.hollow{border-radius:2px;border:2px solid var(--primary-color);color:var(--primary-color)}#clearButton,#resetButton{width:max-content;padding:10px;background:#ef4444;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:600;transition:var(--transition);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;gap:4px}#clearButton:before,#resetButton:before{content:"↻";font-size:1.1em}#clearButton:hover,#resetButton:hover{background:#dc2626;transform:translateY(-1px);box-shadow:var(--shadow-md)}.toolbar-section.clear{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.export>.form-group{display:flex;align-items:center;gap:12px}#exportFormat{flex:1;margin:0}#exportButton{padding:10px 16px;background:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600;transition:var(--transition);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:6px;margin:0}#exportButton:before{content:"↓";font-size:1.1em}#exportButton:hover{background:#d97706;transform:translateY(-1px);box-shadow:var(--shadow-md)}.toolbar::-webkit-scrollbar{width:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.toolbar::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media (max-height:800px){.toolbar{padding:16px}.toolbar-section{padding:20px}.form-group,.toolbar-section{margin-bottom:16px}}