#position,.topbar .transport #row-position{display:none!important}
#fretboard-dock{position:fixed;z-index:72;left:50%;bottom:calc(16px + env(safe-area-inset-bottom) + var(--keyboard-inset,0px));width:min(680px,calc(100vw - 32px));transform:translateX(-50%);display:flex;justify-content:center;pointer-events:none}
#fretboard-dock[hidden],#fretboard-dock [hidden]{display:none!important}
#fretboard-dock.subpanel{visibility:hidden;pointer-events:none}
#fretboard-toggle{display:flex;align-items:center;gap:12px;min-height:46px;max-width:100%;padding:8px 16px 8px 10px;border:1px solid #dedede;border-radius:28px;background:#fffffff2;color:#333;box-shadow:0 6px 26px #00000012;backdrop-filter:blur(18px);pointer-events:auto;font-size:12px}
#fretboard-toggle>svg{width:15px;height:15px;transform:rotate(180deg);color:#777}.fretboard-mini-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eee}.fretboard-mini-icon svg{width:17px;height:17px}
.fretboard-location{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em}
#fretboard-panel{width:100%;max-height:calc(var(--visible-height,100dvh) - 114px);overflow:auto;overscroll-behavior:contain;pointer-events:auto;border:1px solid #dedede;border-radius:24px;background:#fff;box-shadow:0 12px 60px #00000020,0 2px 10px #00000006;padding:12px 16px 14px;outline:none;animation:fretboard-rise .2s ease-out}
.fretboard-head{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:12px;margin-bottom:10px}
#fretboard-dock .icon-button{width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px;padding:9px;border-radius:50%}
#fretboard-next svg{transform:rotate(180deg)}
#fretboard-collapse{display:flex;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:36px;padding:5px 8px;border:0;background:transparent;color:#555;font-size:12px;box-shadow:none}
#fretboard-collapse svg{width:14px;height:14px;color:#888}
.fretboard-options{display:flex;align-items:center;gap:10px;margin:0 0 12px}
#fretboard-chord{display:flex;align-items:center;gap:8px;max-width:45%;min-width:0;height:36px;border:1px solid #e5e5e5;background:#fff;border-radius:12px;padding:7px 10px;color:#333}
#fretboard-chord span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}#fretboard-chord svg{width:17px;height:17px;flex:none}#fretboard-chord svg:last-child{width:12px;color:#888}
.fretboard-step{display:flex;align-items:center;gap:7px;margin-left:auto;min-width:0;color:#888;font-size:11px}
.fretboard-step .custom-select{width:105px}.fretboard-step .custom-select-trigger{height:36px;min-height:36px;padding:6px 9px;border-radius:12px}.fretboard-step .custom-select-value{font-size:12px}
.fretboard-instrument{display:flex;min-width:0;border:1px solid #e5e5e5;border-radius:15px;overflow:hidden;background:#fafafa}
.fretboard-defaults{flex:none;width:48px;background:#f5f5f5;border-right:1px solid #ddd;z-index:1}.fretboard-rail-title{height:26px;display:grid;place-items:center;font-size:10px;color:#888}
.fretboard-defaults button{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:34px;min-height:34px;border:0;border-radius:0;background:transparent;padding:0;color:#333;box-shadow:none}.fretboard-defaults small{position:absolute;left:5px;font:9px ui-monospace,monospace;color:#999}.fretboard-defaults button span{display:grid;place-items:center;width:24px;height:24px;border:1px dashed #bbb;border-radius:50%;font:12px ui-monospace,monospace}.fretboard-defaults button:hover span{border-color:#444;background:#fff}
.fretboard-scroll{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#bbb transparent;overscroll-behavior-x:contain;touch-action:pan-x}
.fretboard-neck{position:relative;width:1200px;--fret-cell:48px;padding-bottom:6px}
.fretboard-numbers{display:grid;grid-template-columns:repeat(25,var(--fret-cell));height:26px;background:#fafafa;color:#888;font:10px ui-monospace,monospace}.fretboard-numbers span{position:relative;display:grid;place-items:center}.fretboard-numbers .fretboard-inlay{color:#333;font-weight:600}.fretboard-inlay::after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:#bbb}
.fretboard-string{height:34px;display:flex;position:relative}.fretboard-string:before{content:'';position:absolute;left:0;right:0;top:50%;height:var(--string-weight);background:#bdbdbd;pointer-events:none}.fretboard-string.focused-string{background:#eeeeee}
.fretboard-cell{position:relative;flex:0 0 var(--fret-cell);display:grid;place-items:center;width:var(--fret-cell);height:34px;min-height:34px;padding:0;border:0;border-right:1px solid #dedede;border-radius:0;background:transparent;color:#111;box-shadow:none;touch-action:pan-x}
.fretboard-cell:first-child{border-right:3px solid #aaa;background:#eeeeee55}
.fretboard-cell span{position:relative;z-index:1;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font:12px ui-monospace,monospace;color:transparent}
.fretboard-cell.chord-fret span{border:1px dashed #999;background:#fafafa;color:#888}
.fretboard-cell.played-fret span{background:#222;border:1px solid #222;color:#fff;box-shadow:0 1px 4px #0002}
.fretboard-cell.pending-fret span{outline:2px solid #999;outline-offset:2px}
.fretboard-cell:not(:disabled):hover{background:#eaeaea;box-shadow:none;border-color:#ccc}.fretboard-cell:not(.played-fret):hover span{color:#777}.fretboard-cell:focus-visible{outline:2px solid #777;outline-offset:-3px;z-index:2}
.fretboard-footer{margin-top:12px;padding-top:10px;border-top:1px solid #eee}
#fretboard-actions #range-tools,body[data-operation-menu=detailed] #fretboard-actions #range-tools{position:static;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;max-width:none;max-height:none;gap:6px;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none;overflow:visible;transform:none}
#fretboard-actions #range-tools .range-icon,body[data-operation-menu=detailed] #fretboard-actions #range-tools .range-icon{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px;padding:8px;border:0;border-radius:50%;background:#f1f1f1;box-shadow:none;color:#444}
#fretboard-actions #range-tools .operation-label{display:none}#fretboard-actions #range-tools .range-icon svg{width:19px;height:19px}
#fretboard-actions #range-tools .range-icon.active{background:#222;color:#fff}
.fretboard-expanded .score-zoom-control{visibility:hidden}.fretboard-visible #score-scroll{padding-bottom:calc(var(--fretboard-clearance,78px) + 48px);scroll-padding-bottom:calc(var(--fretboard-clearance,78px) + 30px)}
.fretboard-visible #toast{bottom:calc(var(--fretboard-clearance,78px) + 18px)}
@keyframes fretboard-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 #fretboard-dock{width:100%;bottom:var(--keyboard-inset,0px)}
 #fretboard-toggle{margin-bottom:calc(14px + env(safe-area-inset-bottom));min-height:44px;font-size:12px}
 #fretboard-panel{border-radius:22px 22px 0 0;border-bottom:0;padding:10px 12px max(12px,env(safe-area-inset-bottom));max-height:calc(var(--visible-height,100dvh) - 90px)}
 .fretboard-head{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px;margin-bottom:8px}
 #fretboard-dock .icon-button{width:40px;height:40px;min-width:40px;min-height:40px;flex-basis:40px;padding:11px}
 #fretboard-collapse{padding:5px 0;font-size:11px;gap:4px}
 .fretboard-options{gap:6px;margin-bottom:10px}#fretboard-chord{height:38px;max-width:42%;padding:6px 8px;gap:5px}#fretboard-chord>svg:first-child{display:none}
 .fretboard-step{gap:5px}.fretboard-step>span:first-child{display:none}.fretboard-step .custom-select{width:102px}.fretboard-step .custom-select-trigger{height:38px;min-height:38px}.fretboard-step .custom-select-value{font-size:12px}
 .fretboard-string,.fretboard-cell,.fretboard-defaults button{height:36px;min-height:36px}.fretboard-neck{--fret-cell:44px;width:1100px}.fretboard-defaults{width:43px}.fretboard-cell span{width:26px;height:26px}
 .fretboard-footer{margin-top:10px;padding-top:9px}#fretboard-actions #range-tools{gap:7px}
 .fretboard-visible .score-zoom-control{visibility:hidden}
}
@media(max-height:580px){#fretboard-panel{max-height:calc(var(--visible-height,100dvh) - 24px)}}
@media(prefers-reduced-motion:reduce){#fretboard-panel{animation:none}}
@media print{#fretboard-dock{display:none!important}}

#fretboard-prev,#fretboard-next{touch-action:none;user-select:none;-webkit-user-select:none}
