.header{padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a}.header-title{margin:0 0 20px;font-size:24px;font-weight:600;text-align:center}.header-controls{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:10px}.control-group label{font-size:14px;font-weight:500;white-space:nowrap}.control-select{padding:8px 12px;border:none;border-radius:6px;background:#fff;color:#333;font-size:14px;cursor:pointer;min-width:120px;transition:all .2s}.control-select:hover{background:#f5f5f5}.control-select:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.note-cell{position:absolute;top:50%;left:50%;transform:translate(-62%,-50%);display:flex;align-items:center;justify-content:center;width:35px;height:35px;border:none;border-radius:50%;background:transparent;transition:all .2s;z-index:4}.note-cell:hover{transform:translate(-62%,-50%) scale(1.05);z-index:1}.fret-row .fret-slot:first-child .note-cell,.fret-row .fret-slot:first-child .note-cell:hover{transform:translate(-50%,-50%)}.fret-row .fret-slot:first-child .note-cell:hover{transform:translate(-50%,-50%) scale(1.05)}.notes-overlay .fretboard-string:nth-child(6) .note-cell{transform:translate(-62%,-52%)}.notes-overlay .fretboard-string:nth-child(6) .note-cell:hover{transform:translate(-62%,-52%) scale(1.05)}.notes-overlay .fretboard-string:nth-child(6) .fret-row .fret-slot:first-child .note-cell{transform:translate(-50%,-52%)}.notes-overlay .fretboard-string:nth-child(6) .fret-row .fret-slot:first-child .note-cell:hover{transform:translate(-50%,-52%) scale(1.05)}.note-label{font-size:12px;font-weight:600;color:#333;-webkit-user-select:none;user-select:none}.note-cell.interval-root{background:#ff6b6b;border-color:#ff5252}.note-cell.interval-root .note-label{color:#fff}.note-cell.interval-3rd{background:#4ecdc4;border-color:#26a69a}.note-cell.interval-3rd .note-label{color:#fff}.note-cell.interval-5th{background:#ffa726;border-color:#ff9800}.note-cell.interval-5th .note-label{color:#fff}.note-cell.note-normal{background:#f5f5f5;border:1px solid #e0e0e0}.note-cell.note-normal .note-label{color:#333;font-weight:500}.fretboard-container{padding:20px;overflow-x:auto;background:linear-gradient(to bottom,#2c3e50,#34495e)}.fretboard-container.fretboard-12-container{display:flex;justify-content:center}.fretboard{position:relative;min-width:fit-content;display:flex;flex-direction:column;gap:0}.fretboard-content{display:flex;align-items:stretch;gap:0;min-width:fit-content}.fretboard-12,.fretboard-24{width:fit-content;margin:0 auto}.fret-numbers-bottom{display:flex;gap:12px;margin-top:10px;align-items:center;padding-left:0;margin-left:3px}.fret-number-spacer{width:50px;flex-shrink:0;margin-left:0;margin-right:1px}.fret-markers{position:absolute;top:50%;left:3px;transform:translateY(-50%);pointer-events:none;z-index:0;height:0;width:auto}.fret-marker{position:absolute;width:8px;height:8px;background:#ffffffbf;border-radius:50%;box-shadow:0 0 2px #0000004d,inset 0 1px 1px #fff6;transform:translate(-50%,-50%)}.fret-marker.double{width:8px;height:auto;background:none;transform:translate(-50%,-50%)}.fret-marker.double:before,.fret-marker.double:after{content:"";position:absolute;width:8px;height:8px;background:#ffffffbf;border-radius:50%;box-shadow:0 0 2px #0000004d,inset 0 1px 1px #fff6;left:50%;transform:translate(-50%)}.fret-marker.double:before{top:-12px}.fret-marker.double:after{top:12px}.open-strings-area{display:grid;grid-template-rows:repeat(6,1fr);align-items:center;padding:20px 14px;min-width:58px;height:100%;background:transparent}.open-string-label{min-height:34px;display:flex;align-items:center;justify-content:center;transform:translateY(0);font-weight:600;font-size:16px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.open-string-label[data-note=E]:first-of-type{transform:translateY(-15px)}.open-string-label[data-note=B]{transform:translateY(-9px)}.open-string-label[data-note=G]{transform:translateY(-3px)}.open-string-label[data-note=D]{transform:translateY(4px)}.open-string-label[data-note=A]{transform:translateY(10px)}.open-string-label[data-note=E]:last-of-type{transform:translateY(17px)}.fretboard-background{position:relative;background:linear-gradient(to bottom,#6b5233,#5a4228,#4a3a26);border-radius:4px;padding:20px 10px;box-shadow:0 2px 8px #0000004d;border:1px solid #3d2f1f;flex:1;overflow:visible;min-width:fit-content}.fretboard-12 .fretboard-background{min-width:610px}.fretboard-24 .fretboard-background{min-width:1184px}.fret-post-left{position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(to bottom,#dcdcdcb3,#c8c8c8cc 30%,#b4b4b4b3 70%,#a0a0a099);box-shadow:0 0 2px #0000004d,inset 0 0 2px #fff3;z-index:2}.fret-lines{position:absolute;top:0;left:3px;bottom:0;pointer-events:none;z-index:1;width:auto}.fret-line{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,#c8c8c899,#b4b4b4b3,#a0a0a080);box-shadow:0 0 1px #0003;z-index:1;transform:translate(-50%)}.guitar-strings{position:absolute;top:0;left:3px;right:10px;bottom:0;pointer-events:none;z-index:2}.guitar-string{position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,#ffffffb3,#f0f0f0cc,#ffffffb3);box-shadow:0 .5px 1px #0000004d;transform:translateY(-50%)}.notes-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;padding:0;margin:0;pointer-events:none}.fretboard-string{position:absolute;left:0;right:0;display:flex;align-items:center;transform:translateY(-50%);pointer-events:auto;min-width:fit-content}.fret-row{display:flex;gap:12px;position:relative;flex:1;align-items:center;justify-content:flex-start;padding:0 10px 0 0;margin-left:3px;min-width:fit-content;flex-shrink:0}.fret-slot{width:35px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}.fret-row .fret-slot:first-child{width:50px}.fretboard-12 .fret-row,.fretboard-24 .fret-row{flex:0 0 auto}.fret-number{width:35px;text-align:center;font-size:12px;color:#fff;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.5);flex-shrink:0;display:flex;align-items:center;justify-content:center}.fret-numbers-bottom .fret-number:first-of-type{width:50px}.footer{padding:20px;background:#fff;border-top:1px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.legend{display:flex;align-items:center;gap:15px}.legend-title{font-weight:600;color:#333;font-size:14px}.legend-items{display:flex;gap:20px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px}.legend-color{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.1)}.legend-color.interval-root{background:#ff6b6b;border-color:#ff5252}.legend-color.interval-3rd{background:#4ecdc4;border-color:#26a69a}.legend-color.interval-5th{background:#ffa726;border-color:#ff9800}.legend-item span{font-size:14px;color:#666}.scale-info{display:flex;flex-direction:column;gap:8px}.scale-info-item{display:flex;align-items:center;gap:10px}.scale-info-label{font-weight:600;color:#333;font-size:14px}.scale-info-value{color:#666;font-size:14px}@media (max-width: 768px){.footer-content{flex-direction:column;align-items:flex-start}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5}.app{min-height:100vh;display:flex;flex-direction:column}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#000000de;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;margin:0 auto}