*{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}.race-container{display:flex;flex-direction:column;align-items:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;font-family:Arial,sans-serif}.game-info{text-align:center;margin-bottom:20px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.game-info h2{margin:0 0 10px;font-size:2.5rem;font-weight:700}.game-info p{margin:0 0 20px;font-size:1.1rem;opacity:.9}.reset-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:12px 24px;border-radius:25px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.reset-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;background:linear-gradient(45deg,#ee5a24,#ff6b6b)}.reset-button:active{transform:translateY(0);box-shadow:0 2px 10px #0003}.game-canvas{border:3px solid #333;border-radius:10px;box-shadow:0 8px 32px #0000004d;background:#87ceeb;cursor:crosshair}.game-canvas:focus{outline:none;border-color:#ff6b6b;box-shadow:0 8px 32px #ff6b6b4d}@media (max-width: 900px){.game-canvas{width:100%;max-width:800px;height:auto}.game-info h2{font-size:2rem}.game-info p{font-size:1rem}}@media (max-width: 600px){.race-container{padding:10px}.game-info h2{font-size:1.5rem}.game-info p{font-size:.9rem}.reset-button{padding:10px 20px;font-size:.9rem}}