*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#111}.app{min-height:100vh;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f5f5f5;border-bottom:1px solid #ddd;flex-wrap:wrap}header h1{font-size:1.4rem;font-weight:700;letter-spacing:-.5px;flex-shrink:0}.sheet-name{font-size:1rem;padding:6px 10px;border:1px solid #ccc;border-radius:6px;min-width:150px;flex-shrink:0}.sheet-name:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:transparent}.controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1}.control-group{display:flex;align-items:center;gap:6px;padding:0 10px 0 6px;border-right:1px solid #ccc}.control-group:last-child{border-right:none;padding-right:0}label{display:flex;align-items:center;gap:5px;font-size:.8rem;color:#555;white-space:nowrap}input[type=number]{width:58px;padding:6px;border:1px solid #ccc;border-radius:6px;font-size:.9rem;text-align:center}input[type=number]:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:transparent}select{padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#fff;cursor:pointer}select:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:transparent}button{min-height:36px;padding:6px 14px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:.875rem;cursor:pointer;white-space:nowrap;transition:background .1s,opacity .1s}button:hover:not(:disabled){background:#e8e8e8}button:disabled{opacity:.35;cursor:not-allowed}button[aria-label=Play],button[aria-label=Stop]{background:#2563eb;color:#fff;border-color:#1d4ed8;font-weight:600;min-width:80px}button[aria-label=Play]:hover,button[aria-label=Stop]:hover{background:#1d4ed8}button[aria-label="Metronome on"]{background:#2563eb;color:#fff;border-color:#1d4ed8;font-weight:600}button[aria-label="Metronome on"]:hover{background:#1d4ed8}.open-sheet-wrapper{position:relative}.sheet-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 16px #0000001f;z-index:50;padding:6px 0}.sheet-dropdown ul{list-style:none;margin:0;padding:0}.sheet-dropdown li button{width:100%;text-align:left;border:none;border-radius:0;background:transparent;padding:8px 14px;font-size:.875rem;min-height:unset}.sheet-dropdown li button:hover{background:#f0f4ff}.sheet-dropdown-close{position:absolute;top:6px;right:8px;border:none!important;background:transparent!important;font-size:.75rem;color:#888;min-height:unset!important;padding:2px 6px!important;cursor:pointer}.sheet-dropdown-close:hover{color:#333;background:transparent!important}.sheet-dropdown-empty{padding:8px 14px;font-size:.8rem;color:#999}.flash-msg{position:fixed;bottom:20px;right:20px;padding:8px 16px;background:#1d4ed8;color:#fff;border-radius:6px;font-size:.85rem;font-weight:500;pointer-events:none;z-index:100;animation:flash-in .15s ease}@keyframes flash-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.hint-bar{font-size:.75rem;color:#777;background:#fafafa;border-bottom:1px solid #eee;padding:5px 16px;white-space:nowrap;overflow-x:auto}.hint-bar kbd{display:inline-block;padding:1px 5px;font-size:.7rem;font-family:inherit;background:#eee;border:1px solid #ccc;border-radius:3px;line-height:1.4}main{flex:1;padding:20px 16px;overflow-x:auto}@media print{body{background:#fff;color:#000}header,.controls,.hint-bar,button{display:none!important}.app{padding:0;margin:0}main{margin:0;padding:0}svg{display:block;max-width:100%}.staff-line{stroke:#000!important}.notehead-filled{fill:#000!important}.notehead-x line{stroke:#000!important}.beat-line{stroke:#666!important}.clef-label,.bar-number{fill:#000!important}}