*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden}#root{width:100%;height:100%}.string-test-container{padding:20px;font-family:Arial,sans-serif}.main-layout{display:flex;gap:40px;margin-top:20px}.notation-section,.tablature-section{flex:1}.staff-container{width:300px;position:relative;height:300px;border:1px solid #ccc;background:#fff;margin-top:10px}.staff{position:relative;width:100%;height:100%}.staff-line{position:absolute;left:20px;width:200px;height:3px;background-color:#000;cursor:pointer;transition:background-color .2s ease;z-index:2}.staff-line:hover{background-color:#007bff;height:4px}.staff-space{position:absolute;left:20px;width:200px;height:20px;cursor:pointer;transition:background-color .2s ease;z-index:1;border:1px dashed transparent}.staff-space:hover{background-color:#007bff33;border:1px dashed #007bff}.ledger-line{position:absolute;left:100px;width:100px;height:1px;background-color:#666;opacity:.7}.ledger-hover-area{transition:background-color .2s ease}.ledger-hover-area:hover{background-color:#ff00001a}.tab-display{margin-top:10px}.tuning-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.tuning-input{display:flex;flex-direction:column;gap:5px}.tuning-input label{font-size:12px;font-weight:700}.tuning-input input{padding:5px;border:1px solid #ccc;border-radius:3px;text-align:center;font-family:monospace}.tab-lines{font-family:monospace;font-size:14px;line-height:1.5}.tab-line{display:flex;align-items:center;margin-bottom:5px}.tab-string-label{width:30px;font-weight:700;text-align:center}.tab-content{flex:1;letter-spacing:1px}h2{text-align:center;color:#333;margin-bottom:20px}h3{color:#555;margin-bottom:10px}.key-signature-section{margin-bottom:30px;text-align:center}.key-signature-dropdown{padding:8px 12px;font-size:16px;border:2px solid #007bff;border-radius:6px;background-color:#fff;color:#333;cursor:pointer;min-width:200px;margin-bottom:10px}.key-signature-dropdown:focus{outline:none;border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.key-signature-info{font-size:14px;color:#666;font-style:italic}.key-signature-accidental{-webkit-user-select:none;user-select:none;pointer-events:none}.key-signature-accidental.flat{color:#007bff}.key-signature-accidental.sharp{color:#dc3545}