*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#f5f5f0;color:#1a1a1a;min-height:100vh;min-width:800px}.app{margin:0 40px 40px;min-height:calc(100vh - 120px);background:#fff;border-radius:6px;box-shadow:0 1px 6px #0000001f;padding:2rem 2.5rem 6rem}.app-footer{position:fixed;bottom:8px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:.75rem;color:#bbb;-webkit-user-select:none;user-select:none;pointer-events:none}.app-copyright{text-align:left}.app-support{text-align:right}.app-logo{padding:14px 40px;font-family:Impact,Arial Narrow,sans-serif;font-size:1.4rem;letter-spacing:.12em;color:#999;-webkit-user-select:none;user-select:none;pointer-events:none}.tab-staff{position:relative;width:100%;height:168px;cursor:default}.tab-staff:after{content:"";position:absolute;top:13px;left:0;right:0;height:142px;border-left:2px solid #888;border-right:2px solid #888;pointer-events:none}.tab-staff:before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:#888;box-shadow:0 28px #888,0 56px #888,0 84px #888,0 112px #888,0 140px #888;pointer-events:none}.tab-barline{position:absolute;top:13px;height:142px;width:2px;background:#bbb;transform:translate(-50%);cursor:pointer}.tab-barline:hover{background:#c00}.tab-note{position:absolute;transform:translate(-50%,-50%);background:#fff;padding:0 3px;font-family:Courier New,Courier,monospace;font-size:22px;font-weight:700;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;color:#1a1a1a}.fret-picker{position:fixed;bottom:2.5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;padding:8px 6px 6px}.fret-picker__buttons{display:flex;gap:2px}.fret-picker__hint{font-size:.7rem;color:#aaa;text-align:left;padding-bottom:8px}.fret-picker__btn{width:30px;height:34px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;color:#333;padding:0;flex-shrink:0}.fret-picker__btn:hover{background:#f5f5f5;border-color:#bbb}.fret-picker__btn--active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.fret-picker__separator{width:1px;background:#e0e0e0;margin:2px 4px;align-self:stretch}.fret-picker__btn--barline{font-size:18px;font-weight:300;width:36px}.tab-editor{margin-top:1.5rem}.tab-editor__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;gap:2rem}.tab-editor__meta{display:flex;flex-direction:column;gap:2rem;flex:1}.tab-editor__title{border:none;border-bottom:2px dashed transparent;outline:none;background:transparent;font-family:system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700;color:#1a1a1a;padding:4px 0;width:100%}.tab-editor__title::placeholder{color:#ccc;font-weight:400}.tab-editor__title{border-bottom-color:#ddd}.tab-editor__title:focus{border-bottom-color:#aaa}.tab-editor__notes{border:none;border-bottom:2px dashed transparent;outline:none;background:transparent;font-family:system-ui,-apple-system,sans-serif;font-size:1rem;color:#666;padding:4px 0;width:100%;resize:none;overflow:hidden;line-height:1.5}.tab-editor__notes::placeholder{color:#ccc}.tab-editor__notes{border-bottom-color:#ddd}.tab-editor__notes:focus{border-bottom-color:#aaa}.tab-editor__toolbar{display:flex;gap:.5rem;flex-shrink:0;padding-top:6px}.tab-editor__toolbar-btn{background:none;border:1px solid #ccc;border-radius:4px;padding:4px 14px;font-size:.8rem;color:#666;cursor:pointer}.tab-editor__toolbar-btn:hover{border-color:#999;color:#333}.tab-staff-block{margin-bottom:2rem}.tab-staff-block__label{display:block;border:none;border-bottom:2px dashed transparent;outline:none;background:transparent;font-family:system-ui,-apple-system,sans-serif;font-size:1.1rem;font-weight:600;color:#333;margin-bottom:.75rem;padding:8px 0;width:300px}.tab-staff-block__label::placeholder{color:transparent;font-weight:400}.tab-staff-block__label:hover::placeholder{color:#ccc}.tab-staff-block__label:focus::placeholder{color:#ccc}.tab-staff-block__label:hover{border-bottom-color:#ddd}.tab-staff-block__label:focus{border-bottom-color:#aaa}.tab-staff-block__footer{display:flex;justify-content:flex-end;margin-top:.25rem}.tab-staff-block__delete{background:none;border:none;padding:0;cursor:pointer;opacity:.5;line-height:0}.tab-staff-block__delete:hover{opacity:.7}.tab-staff-block__delete img{width:16px;height:16px}.tab-add-staff{margin-top:-1.5rem;background:none;border:1px solid #ccc;border-radius:4px;width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;color:#888;display:flex;align-items:center;justify-content:center}.tab-add-staff:hover{border-color:#999;color:#444}