@fretfall/player 0.2.2 → 0.3.0

package/mount.js

@@ -0,0 +1,970 @@
+let l=null;const d=e=>l??=i(e);async function i(e){const a=Object.assign(document.createElement("style"),{textContent:'[data-fretfall]{--bg: #0e1014;--ink: #0e1014;--text: #e8eaef;--muted: #7b8190;--accent: #c8f04a;--chip: #171a20;--chip-border: #2a2f38;--done: #e8eaef;--todo: #23272f;--ui: system-ui, sans-serif;--num: system-ui, sans-serif;--lyric: system-ui, sans-serif;--lyric-style: normal}:where([data-fretfall]) *{box-sizing:border-box}:where([data-fretfall]) [hidden]{display:none!important}[data-fretfall]:not([data-fretfall-dock]){height:100%}[data-fretfall]:not([data-fretfall-dock]){margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.4 var(--ui);accent-color:var(--accent)}:where([data-fretfall]) canvas{position:fixed;inset:0;width:100%;height:100%;display:block}:where([data-fretfall]) button{font:inherit;color:inherit}:where([data-fretfall]) .bar{position:fixed;z-index:3;left:32px;right:32px;top:18px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:transform .25s ease,opacity .25s ease,visibility .25s}:where([data-fretfall]) .group{display:flex;align-items:center;gap:10px;min-width:0}:where([data-fretfall]) .group:last-child{flex:none}:where([data-fretfall]) .wordmark{display:flex;align-items:center;gap:7px;font:700 15px var(--num);letter-spacing:.22em}:where([data-fretfall]) :is(.wordmark,.welcome-mark) .fall{transform-box:fill-box;transform-origin:center;transform:rotate(14deg);animation:fall .75s .8s both}@keyframes fall{0%{transform:translate(-3.5px,-1.42px) rotate(0);animation-timing-function:cubic-bezier(.55,0,.85,.35)}40%{transform:translate(0) rotate(18deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}56%{transform:translateY(-.35px) rotate(11.5deg);animation-timing-function:ease-in-out}74%{transform:translateY(.08px) rotate(15.2deg);animation-timing-function:ease-in-out}88%{transform:translate(0) rotate(13.6deg);animation-timing-function:ease-in-out}to{transform:translate(0) rotate(14deg)}}@media(prefers-reduced-motion:reduce){:where([data-fretfall]) .wordmark .fall{animation:none}}:where([data-fretfall]) .seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--chip);border:1px solid var(--chip-border);overflow-x:auto;scrollbar-width:none}:where([data-fretfall]) .seg button{border:0;background:none;cursor:pointer;padding:5px 12px;border-radius:6px;font:500 13px var(--ui);color:var(--muted);white-space:nowrap}:where([data-fretfall]) .seg button[aria-pressed=true]{background:var(--text);color:var(--ink);font-weight:600}:where([data-fretfall]) .seg select{max-width:22cqw;border:0;padding:4px 6px;background:none;color:var(--text);font:600 13px var(--ui)}:where([data-fretfall]) .seg option{background:var(--ink);color:var(--text)}:where([data-fretfall]) .icon{flex:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);color:var(--text)}:where([data-fretfall]) .icon[aria-pressed=true],:where([data-fretfall]) .icon[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}:where([data-fretfall]) button:focus-visible,:where([data-fretfall]) input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:where([data-fretfall]) .speed{height:36px;display:flex;align-items:center;padding:0 2px;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);color:var(--muted)}:where([data-fretfall]) .speed button{cursor:pointer;width:28px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit}:where([data-fretfall]) .speed #speed{width:auto;min-width:46px;font:600 14px var(--num);color:var(--text)}:where([data-fretfall]) .time{margin-right:6px;font:14px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}:where([data-fretfall]) .divider{width:1px;height:24px;margin:0 4px;background:var(--chip-border)}:where([data-fretfall]) .menu{display:contents}:where([data-fretfall]) #menuButton{display:none}:where([data-fretfall]) #phrases{position:fixed;left:32px;right:32px;top:74px;height:54px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}:where([data-fretfall]) #phrases div{position:absolute;bottom:0;min-width:2px;border-radius:2px;background:var(--todo)}:where([data-fretfall]) #phrases div.done{background:var(--done)}:where([data-fretfall]) #phraseTime{position:absolute;top:calc(100% + 16px);transform:translate(-50%);padding:2px 7px;border-radius:6px;background:var(--ink);border:1px solid var(--chip-border);font:600 11px var(--num);font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none}:where([data-fretfall]) #loopBox{position:absolute;top:-6px;bottom:-17px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent)}:where([data-fretfall]) #loopBox:before,:where([data-fretfall]) #loopBox:after{content:"";position:absolute;top:-11px;bottom:-11px;width:4px;border:4px solid transparent;border-radius:6px;background:var(--accent) padding-box;cursor:ew-resize}:where([data-fretfall]) #loopBox:before{left:-6.75px}:where([data-fretfall]) #loopBox:after{right:-6.75px}:where([data-fretfall]) #progress{position:fixed;left:32px;right:32px;top:134px;height:5px;border-radius:3px;overflow:hidden;background:var(--todo)}:where([data-fretfall]) #progress div{width:0;height:100%;background:var(--accent);opacity:.9}[data-fretfall][data-docked] #phrases{top:18px}[data-fretfall][data-docked] #progress{top:78px}[data-fretfall][data-docked] #lyrics{top:108px}[data-fretfall][data-docked] .sheet{top:18px}:where([data-fretfall]) #lyrics{position:fixed;left:40px;top:164px;max-width:min(560px,46cqw);display:flex;flex-direction:column;gap:8px;pointer-events:none;font-family:var(--lyric);font-style:var(--lyric-style);text-shadow:0 2px 14px var(--ink),0 0 4px var(--ink)}:where([data-fretfall]) #section{min-height:16px;font:600 12px var(--num);letter-spacing:.18em;color:var(--accent)}:where([data-fretfall]) #lines{position:relative;height:2.45em;font-size:clamp(20px,2.3cqw,32px);line-height:1.15}:where([data-fretfall]) #lines div{position:absolute;top:0;left:0;white-space:nowrap;color:var(--muted);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}:where([data-fretfall]) #lines .low{transform:translateY(1.3em);opacity:.5}:where([data-fretfall]) #lines .gone{opacity:0;transition-duration:.45s,.25s}:where([data-fretfall]) #lines .gone.up{transform:translateY(-.8em)}:where([data-fretfall]) #lines span{transition:color .15s}:where([data-fretfall]) #lines .sung{color:var(--text)}@media(prefers-reduced-motion:reduce){:where([data-fretfall]) #lines div{transition-property:opacity}}:where([data-fretfall]) #info{position:fixed;left:40px;right:226px;bottom:14px;display:flex;align-items:center;font-size:13px;white-space:nowrap;color:var(--muted);pointer-events:none}:where([data-fretfall]) #info b{color:var(--text);font-weight:600}:where([data-fretfall]) #info>span+span:before{content:"";display:inline-block;width:1px;height:12px;margin:0 14px;vertical-align:-1px;background:var(--chip-border)}:where([data-fretfall]) #info .tuning{position:relative;pointer-events:auto;cursor:help}:where([data-fretfall]) #info .tuning>b{text-decoration:underline dotted var(--muted);text-underline-offset:3px}:where([data-fretfall]) #info .tip{left:0;right:auto;white-space:normal}:where([data-fretfall]) #info .tuning:is(:hover,:focus)>.tip{opacity:1;visibility:visible;transform:none}:where([data-fretfall]) .pegs{display:flex;align-items:flex-start;gap:4px;margin:10px 0 8px}:where([data-fretfall]) .peg{display:flex;flex-direction:column;align-items:center;min-width:26px;gap:2px;font:600 13px var(--num)}:where([data-fretfall]) .peg i{font-style:normal;font-size:11px;color:var(--muted)}:where([data-fretfall]) .peg .move:before{content:"";display:block;width:3px;height:calc(6px + var(--d) * 3px);margin:2px auto 3px;border-radius:2px;background:var(--c)}:where([data-fretfall]) .peg strong{color:var(--c)}:where([data-fretfall]) .peg.same{opacity:.45}:where([data-fretfall]) .tip small{display:block;font-size:11px}[data-fretfall]:fullscreen .bar{transform:translateY(calc(-100% - 18px));opacity:0;visibility:hidden;transition-delay:.4s}[data-fretfall]:fullscreen:has(#phrases:hover,#progress:hover,.bar:hover) .bar{transform:none;opacity:1;visibility:visible;transition-delay:0s}:where([data-fretfall]) #tools{position:fixed;z-index:3;right:32px;bottom:6px}:where([data-fretfall]) #tools .icon{position:relative}:where([data-fretfall]) .icon:disabled{cursor:default;color:var(--muted)}:where([data-fretfall]) .icon:disabled svg{opacity:.5}:where([data-fretfall]) #loopTools{position:fixed;z-index:4;display:flex;transform:translate(-50%,calc(-50% + 3px))}:where([data-fretfall]) #loopTools .icon{width:32px;height:26px;background:var(--ink);border-color:var(--accent)}:where([data-fretfall]) #loopTools svg{width:15px;height:15px}:where([data-fretfall]) #trainer{border-radius:13px 0 0 13px}:where([data-fretfall]) #clearLoop{border-left:0;border-radius:0 13px 13px 0;color:var(--muted)}:where([data-fretfall]) #clearLoop:hover{color:var(--text)}:where([data-fretfall]) #loopTools .icon[aria-pressed=true]{background:var(--accent);color:var(--ink)}:where([data-fretfall]) .tip{position:absolute;right:0;bottom:calc(100% + 10px);width:max-content;max-width:250px;padding:8px 10px;border-radius:8px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073;color:var(--muted);font:12px/1.45 var(--ui);text-align:left;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease,visibility .12s}:where([data-fretfall]) .tip b{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;color:var(--text);font-weight:600}:where([data-fretfall]) .tip kbd{padding:0 5px;border:1px solid var(--chip-border);border-radius:4px;color:var(--muted);font:inherit}:where([data-fretfall]) :is(.icon,.speed):hover>.tip,:where([data-fretfall]) .icon:focus-visible>.tip,:where([data-fretfall]) .speed:focus-within>.tip{opacity:1;visibility:visible;transform:none}[data-fretfall]:where([data-fretfall-dock]){display:flex;align-items:center;gap:10px}:where([data-fretfall]) .bar :is(.icon,.speed),[data-fretfall]:where([data-fretfall-dock]) :is(.icon,.speed){position:relative}:where([data-fretfall]) .bar .tip,[data-fretfall]:where([data-fretfall-dock]) .tip{top:calc(100% + 10px);bottom:auto;transform:translateY(-4px)}:where([data-fretfall]) .bar [aria-expanded=true]>.tip,[data-fretfall]:where([data-fretfall-dock]) [aria-expanded=true]>.tip{display:none}:where([data-fretfall]) #loopTools .tip{top:calc(100% + 10px);bottom:auto;left:var(--tip, 50%);right:auto;transform:translate(calc(-1 * var(--tip, 50%)),-4px)}:where([data-fretfall]) #loopTools .icon:hover>.tip,:where([data-fretfall]) #loopTools .icon:focus-visible>.tip{transform:translate(calc(-1 * var(--tip, 50%)))}[data-fretfall]:fullscreen :is(#info,#tools>:not(#minimal)){display:none}[data-fretfall].minimal :is(.bar,#phrases,#progress,#loopTools,#info,#tools>:not(#minimal)){display:none}[data-fretfall].tab2d .only-3d,[data-fretfall]:not(.tab2d) .only-2d{display:none}[data-fretfall].tab2d .only-3d+.only-3d+h3{padding-top:0;border-top:0}[data-fretfall].minimal #lyrics{top:24px}:where([data-fretfall]) #status{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,90cqw);padding:10px 16px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);backdrop-filter:blur(10px);text-align:center}[data-fretfall].banding :is(#highway,#phrases,#progress,#loopTools,#lyrics,#info,#intro,#time){display:none}:where([data-fretfall]) #bandNote{position:fixed;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;max-width:min(440px,90cqw);padding:14px 20px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);text-align:center}:where([data-fretfall]) #bandNote .text-button{justify-self:center}:where([data-fretfall]) #status:not(.loading) .bars{display:none}:where([data-fretfall]) .bars{flex:none;display:inline-flex;align-items:flex-end;gap:3px;height:16px}:where([data-fretfall]) .bars i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform:scaleY(.3);transform-origin:bottom}:where([data-fretfall]) .bars.moving i{animation:bars .8s ease-in-out infinite alternate}:where([data-fretfall]) .bars.moving i:nth-child(2){animation-duration:1.1s;animation-delay:-.5s}:where([data-fretfall]) .bars.moving i:nth-child(3){animation-duration:.7s;animation-delay:-.2s}:where([data-fretfall]) .bars.moving i:nth-child(4){animation-duration:1s;animation-delay:-.7s}@keyframes bars{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){:where([data-fretfall]) .bars.moving i{animation:none;transform:scaleY(.6)}}:where([data-fretfall]) #intro{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(640px,90cqw);padding:22px 30px;border-radius:16px;background:color-mix(in srgb,var(--ink) 72%,transparent);border:1px solid var(--chip-border);text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}:where([data-fretfall]) #intro.show{opacity:1;visibility:visible}:where([data-fretfall]) #introTitle{font:700 clamp(22px,3cqw,38px) / 1.15 var(--num);color:var(--text)}:where([data-fretfall]) #introFacts{font-size:14px;color:var(--muted)}:where([data-fretfall]) #introState{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 12px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}:where([data-fretfall]) .sheet{position:fixed;right:32px;top:66px;z-index:2;width:min(400px,calc(100cqw - 32px));max-height:calc(100cqh - 118px);display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(18px);border:1px solid var(--chip-border);box-shadow:0 24px 60px #0000008c}:where([data-fretfall]) .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px 18px}:where([data-fretfall]) .sheet-head h2{margin:0;font:600 15px var(--ui)}:where([data-fretfall]) .close{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}:where([data-fretfall]) .close:hover{background:var(--chip);color:var(--text)}:where([data-fretfall]) .tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:0 14px;padding:3px;border-radius:9px;background:var(--chip);border:1px solid var(--chip-border)}:where([data-fretfall]) .tabs button{padding:6px 0;border:0;border-radius:6px;background:none;font:500 13px var(--ui);color:var(--muted);cursor:pointer}:where([data-fretfall]) .tabs button:hover{color:var(--text)}:where([data-fretfall]) .tabs button[aria-selected=true]{background:var(--text);color:var(--ink);font-weight:600}:where([data-fretfall]) .pane{display:grid;align-content:start;gap:18px;padding:18px 18px 20px;overflow:hidden auto}:where([data-fretfall]) .pane h3{margin:0 0 -6px;font:600 11px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}:where([data-fretfall]) .pane h3~h3{padding-top:16px;border-top:1px solid var(--chip-border)}:where([data-fretfall]) .setting{display:grid;gap:8px}:where([data-fretfall]) .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 20px}:where([data-fretfall]) .setting-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:500}:where([data-fretfall]) .setting-head output{font:600 12px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}:where([data-fretfall]) .setting .seg{overflow:visible}:where([data-fretfall]) .setting .seg button{flex:1}:where([data-fretfall]) .scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:11px;color:var(--muted)}:where([data-fretfall]) .hint{margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}:where([data-fretfall]) .text-button{justify-self:start;padding:4px 0;border:0;background:none;font:500 12px var(--ui);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}:where([data-fretfall]) .text-button:hover{color:var(--text)}:where([data-fretfall]) :is(#settings,.volume) input[type=range]{-webkit-appearance:none;appearance:none;height:18px;margin:0;background:none;cursor:pointer}:where([data-fretfall]) #settings input[type=range]{width:100%}:where([data-fretfall]) :is(#settings,.volume) input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--fill, 50%),var(--chip-border) var(--fill, 50%))}:where([data-fretfall]) :is(#settings,.volume) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--text);border:3px solid var(--accent);box-shadow:0 1px 4px #0006}:where([data-fretfall]) :is(#settings,.volume) input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--chip-border)}:where([data-fretfall]) :is(#settings,.volume) input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}:where([data-fretfall]) :is(#settings,.volume) input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:3px solid var(--accent)}:where([data-fretfall]) .toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;font-weight:500;cursor:pointer}:where([data-fretfall]) .toggle small{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}:where([data-fretfall]) .toggle input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:36px;height:20px;margin:0;border-radius:10px;background:var(--chip-border);cursor:pointer;transition:background .15s}:where([data-fretfall]) .toggle input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s}:where([data-fretfall]) .toggle input:checked{background:var(--accent)}:where([data-fretfall]) .toggle input:checked:after{transform:translate(16px);background:var(--ink)}:where([data-fretfall]) .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}:where([data-fretfall]) .cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}:where([data-fretfall]) .cards button{display:grid;gap:8px;justify-items:start;padding:10px;border-radius:9px;border:1px solid var(--chip-border);background:var(--chip);font:500 12px var(--ui);color:var(--muted);text-align:left;cursor:pointer}:where([data-fretfall]) .cards button:hover{color:var(--text)}:where([data-fretfall]) .cards button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}:where([data-fretfall]) .dots{display:flex;gap:4px}:where([data-fretfall]) .dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff2e}:where([data-fretfall]) .headstock{width:100%;height:52px}:where([data-fretfall]) .order{font:600 12px var(--num);letter-spacing:.12em;color:var(--text)}:where([data-fretfall]) #legend{width:min(430px,calc(100cqw - 32px))}:where([data-fretfall]) .legend-find{padding:0 14px 6px}:where([data-fretfall]) .legend-find input{width:100%;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--chip-border);background:var(--chip);color:var(--text);font:13px var(--ui)}:where([data-fretfall]) .legend-find input::placeholder{color:var(--muted)}:where([data-fretfall]) .legend{gap:4px;padding-top:10px}:where([data-fretfall]) .legend h3{margin:14px 0 4px}:where([data-fretfall]) .legend h3:first-child{margin-top:0}:where([data-fretfall]) .legend-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:4px 0}:where([data-fretfall]) .legend-item b{display:block;font-size:13px;font-weight:500}:where([data-fretfall]) .legend-item span{display:block;font-size:12px;line-height:1.4;color:var(--muted)}:where([data-fretfall]) .legend-item .keys{display:flex;justify-content:center;gap:4px}:where([data-fretfall]) .legend-item kbd{min-width:22px;padding:2px 6px;border:1px solid var(--chip-border);border-bottom-width:2px;border-radius:5px;background:var(--chip);font:600 12px var(--num);text-align:center;white-space:nowrap}:where([data-fretfall]) .legend-item svg{width:64px;height:36px;border-radius:8px;background:var(--chip);border:1px solid var(--chip-border);fill:none;stroke-linecap:round;stroke-linejoin:round}:where([data-fretfall]) .legend-item text{font-family:var(--num);font-weight:700;text-anchor:middle;dominant-baseline:central}:where([data-fretfall]) .legend-empty{margin:8px 0;font-size:13px;color:var(--muted)}:where([data-fretfall]) .f0{fill:var(--s0)}:where([data-fretfall]) .f1{fill:var(--s1)}:where([data-fretfall]) .f2{fill:var(--s2)}:where([data-fretfall]) .f3{fill:var(--s3)}:where([data-fretfall]) .f4{fill:var(--s4)}:where([data-fretfall]) .l0{stroke:var(--s0)}:where([data-fretfall]) .l1{stroke:var(--s1)}:where([data-fretfall]) .l2{stroke:var(--s2)}:where([data-fretfall]) .l3{stroke:var(--s3)}:where([data-fretfall]) .l4{stroke:var(--s4)}:where([data-fretfall]) .lm{stroke:var(--muted)}:where([data-fretfall]) .li{stroke:var(--ink)}:where([data-fretfall]) .ft{fill:var(--text)}:where([data-fretfall]) .lt{stroke:var(--text)}:where([data-fretfall]) .fi{fill:var(--ink)}:where([data-fretfall]) .fa{fill:var(--accent)}:where([data-fretfall]) .fl{fill:var(--lane)}:where([data-fretfall]) .ll{stroke:var(--lane)}:where([data-fretfall]) .lw{stroke:#fff}:where([data-fretfall]) .fm{fill:var(--muted)}:where([data-fretfall]) .la{stroke:var(--accent)}:where([data-fretfall]) .fw{fill:#fff}:where([data-fretfall]) .volume{position:relative}:where([data-fretfall]) .volume .icon.muted{color:var(--muted)}:where([data-fretfall]) .volume-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:10px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073}:where([data-fretfall]) .volume-panel input{width:150px}:where([data-fretfall]) .volume-panel output{min-width:36px;font:600 12px var(--num);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}:where([data-fretfall]) .volume-mute{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:none;color:var(--text);cursor:pointer}:where([data-fretfall]) .volume-mute:hover{background:var(--chip)}:where([data-fretfall]) .volume-mute[aria-pressed=true]{color:var(--muted)}:where([data-fretfall]) #drop{position:fixed;inset:12px;z-index:5;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:16px;background:#00000073;font:600 20px var(--num)}:where([data-fretfall]) #tab{position:fixed;left:-10000px;top:0;width:1000px}@media(max-width:900px){:where([data-fretfall]) .time{display:none}[data-fretfall]:where([data-fretfall-dock]) .time{display:block}:where([data-fretfall]) #menuButton{display:grid}:where([data-fretfall]) .volume{position:static}:where([data-fretfall]) .volume-panel{left:auto;right:0;transform:none}:where([data-fretfall]) .menu{display:none;position:absolute;top:calc(100% + 8px);right:0;width:230px;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--ink);border:1px solid var(--chip-border);box-shadow:0 12px 30px #00000073}:where([data-fretfall]) #menuButton[aria-expanded=true]+.menu{display:flex}:where([data-fretfall]) .menu .icon{width:100%;height:38px;display:flex;justify-content:flex-start;gap:12px;padding:0 10px;border:0;border-radius:7px;background:none;font:500 13px var(--ui)}:where([data-fretfall]) .menu .icon:after{content:attr(data-label)}:where([data-fretfall]) .menu .icon:hover{background:var(--chip)}:where([data-fretfall]) .menu .icon[aria-pressed=true],:where([data-fretfall]) .menu .icon[aria-expanded=true]{background:none;color:var(--accent)}:where([data-fretfall]) .menu .tip{display:none}:where([data-fretfall]) .menu .divider{width:auto;height:1px;margin:4px}}@media(max-width:560px){:where([data-fretfall]) .bar{flex-wrap:wrap;height:auto;row-gap:8px}:where([data-fretfall]) .bar>.group:first-child,:where([data-fretfall]) .bar>.group:last-child{flex:1 1 100%;height:40px}:where([data-fretfall]) .speed{margin-left:auto}:where([data-fretfall]) #menuButton{position:absolute;top:2px;right:0}:where([data-fretfall]) .menu{top:48px}:where([data-fretfall]) #phrases{top:122px}:where([data-fretfall]) #info{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}:where([data-fretfall]) #info>span+span:before{display:none}:where([data-fretfall]) #info>span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}:where([data-fretfall]) #progress{top:182px}:where([data-fretfall]) #lyrics{top:212px}:where([data-fretfall]) .sheet{top:114px;max-height:calc(100cqh - 166px)}}@media(max-width:520px){:where([data-fretfall]) .sheet{right:16px}}[data-fretfall]:not([data-fretfall-dock]){contain:layout;container-type:size}'}),n=Object.assign(document.createElement("link"),{id:"fonts",rel:"stylesheet"});if(!e.isConnected)throw new Error("mount(element): the element has to be in the page");e.innerHTML=`<div data-fretfall><canvas id="highway"></canvas>
+<header class="bar">
+<div class="group" style="gap: 20px">
+<div class="wordmark">
+<svg
+width="18"
+height="18"
+viewBox="0 0 24 24"
+fill="currentColor"
+aria-hidden="true"
+>
+<rect x="4" y="3" width="4.5" height="18" rx="1.5" />
+<rect x="4" y="3" width="16" height="4.5" rx="1.5" />
+<rect
+class="fall"
+x="10.5"
+y="11.67"
+width="9"
+height="4.5"
+rx="1.5"
+/>
+</svg>
+FRETFALL
+</div>
+<div
+class="seg"
+id="arrangements"
+role="group"
+aria-label="Arrangement"
+></div>
+</div>
+<div class="group">
+<span class="time" id="time">0:00 / 0:00</span>
+<div class="speed">
+<button
+id="slower"
+aria-label="Slower"
+aria-describedby="speedTip"
+>
+<svg
+width="16"
+height="16"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+>
+<path d="M5 10h10" />
+</svg>
+</button>
+<button id="speed" aria-describedby="speedTip">100%</button>
+<button
+id="faster"
+aria-label="Faster"
+aria-describedby="speedTip"
+>
+<svg
+width="16"
+height="16"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+>
+<path d="M10 5v10M5 10h10" />
+</svg>
+</button>
+<span class="tip" role="tooltip" id="speedTip"
+><b
+>Speed <span><kbd>−</kbd> <kbd>+</kbd></span></b
+>Slow the song down to practise it, or speed it up, in
+10% steps. The number goes back to 100%
+<kbd>0</kbd></span
+>
+</div>
+<div class="volume">
+<button
+class="icon"
+id="volumeButton"
+aria-expanded="false"
+aria-controls="volumePanel"
+aria-label="Volume"
+aria-describedby="volumeTip"
+>
+<span class="tip" role="tooltip" id="volumeTip"
+><b
+>Volume
+<span><kbd>↑</kbd> <kbd>↓</kbd></span></b
+>Opens a slider. <kbd>M</kbd> mutes</span
+>
+</button>
+<div class="volume-panel" id="volumePanel" hidden>
+<button
+class="volume-mute"
+id="volumeMute"
+aria-pressed="false"
+></button>
+<input
+id="volume"
+type="range"
+min="0"
+max="1"
+step="0.02"
+aria-label="Volume"
+/>
+<output id="volumeOut" for="volume"></output>
+</div>
+</div>
+<button
+class="icon"
+id="menuButton"
+aria-expanded="false"
+aria-controls="menu"
+aria-label="Menu"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+>
+<path d="M4 6h12M4 10h12M4 14h12" />
+</svg>
+</button>
+<div class="menu" id="menu">
+<button
+class="icon"
+id="loop"
+data-label="Loop"
+aria-pressed="false"
+aria-label="Loop"
+aria-describedby="loopTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<path d="M13.5 3.5l2.5 2.5-2.5 2.5" />
+<path d="M4 10V9a3 3 0 0 1 3-3h9" />
+<path d="M6.5 16.5L4 14l2.5-2.5" />
+<path d="M16 10v1a3 3 0 0 1-3 3H4" />
+</svg>
+<span class="tip" role="tooltip" id="loopTip"
+><b>Loop <kbd>L</kbd></b
+>Loop the phrase you are in. Drag across the phrase
+bars to loop a stretch, hold shift while dragging to
+loop exactly what you pick, or shift-click a bar to
+stretch the loop to it</span
+>
+</button>
+<button class="icon" id="play" aria-describedby="playTip">
+<span class="tip" role="tooltip" id="playTip"
+><b>Play and pause <kbd>Space</kbd></b
+>Play the song from where the highway is</span
+>
+</button>
+<div class="divider"></div>
+<button
+class="icon"
+id="open"
+data-label="Open file"
+aria-label="Open file"
+aria-describedby="openTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<path
+d="M3 6.5V15a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 17 15V8.5A1.5 1.5 0 0 0 15.5 7H10L8.5 5H4.5A1.5 1.5 0 0 0 3 6.5z"
+/>
+</svg>
+<span class="tip" role="tooltip" id="openTip"
+><b>Open a song <kbd>O</kbd></b
+>A Guitar Pro file, or a tab with its recording. You
+can also drop them anywhere</span
+>
+</button>
+<div class="divider"></div>
+<button
+class="icon"
+id="legendButton"
+data-label="Notation and shortcuts"
+aria-expanded="false"
+aria-controls="legend"
+aria-label="Notation and shortcuts"
+aria-describedby="legendTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<circle cx="10" cy="10" r="7.5" />
+<path
+d="M7.8 7.6a2.3 2.3 0 0 1 4.4.9c0 1.5-2.2 1.9-2.2 3.2"
+/>
+<path d="M10 14.4h.01" />
+</svg>
+<span class="tip" role="tooltip" id="legendTip"
+><b>Notation and shortcuts <kbd>?</kbd></b
+>What every mark on the highway means, and the
+keyboard shortcuts</span
+>
+</button>
+<button
+class="icon"
+id="settingsButton"
+data-label="Settings"
+aria-expanded="false"
+aria-controls="settings"
+aria-label="Settings"
+aria-describedby="settingsTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+>
+<path d="M3.5 6h8M15.5 6h1M3.5 14h2M9.5 14h7" />
+<circle cx="13.5" cy="6" r="2" />
+<circle cx="7.5" cy="14" r="2" />
+</svg>
+<span class="tip" role="tooltip" id="settingsTip"
+><b>Settings <kbd>S</kbd></b
+>The view of the highway and what shows on it, the
+strings' colours and order, and the audio
+delay</span
+>
+</button>
+<button
+class="icon"
+id="fullscreen"
+data-label="Full screen"
+aria-label="Full screen"
+aria-describedby="fullscreenTip"
+>
+<span class="tip" role="tooltip" id="fullscreenTip"
+><b>Full screen <kbd>F</kbd></b
+>The highway, the phrase bars and the lyrics. Point
+at the phrase bars to bring the header back</span
+>
+</button>
+</div>
+</div>
+</header>
+<div id="phrases">
+<span id="loopBox" hidden></span
+><span id="phraseTime" hidden></span>
+</div>
+<div id="loopTools" role="group" aria-label="Loop" hidden>
+<button
+class="icon"
+id="trainer"
+aria-pressed="false"
+aria-label="Speed trainer"
+aria-describedby="trainerTip"
+disabled
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<path d="M3.5 14.5a6.5 6.5 0 1 1 13 0" />
+<path d="M10 14.5l3.2-4.2" />
+</svg>
+<span class="tip" role="tooltip" id="trainerTip"
+><b>Speed trainer</b
+><span id="trainerHint"
+>Slow down to 90% or less to use it</span
+></span
+>
+</button>
+<button
+class="icon"
+id="clearLoop"
+aria-label="Clear the loop"
+aria-describedby="clearLoopTip"
+>
+<svg
+width="16"
+height="16"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.8"
+stroke-linecap="round"
+>
+<path d="M5.5 5.5l9 9M14.5 5.5l-9 9" />
+</svg>
+<span class="tip" role="tooltip" id="clearLoopTip"
+><b>Clear the loop <kbd>L</kbd></b
+>Play on through the whole song</span
+>
+</button>
+</div>
+<div id="progress"><div></div></div>
+<div id="lyrics">
+<div id="section"></div>
+<div id="lines"></div>
+</div>
+<div id="info"></div>
+<div id="tools" class="group" role="group" aria-label="Practice tools">
+<button
+class="icon"
+id="metronome"
+aria-pressed="false"
+aria-label="Metronome"
+aria-describedby="metronomeTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<path d="M7.8 3h4.4l3.3 13.5h-11z" />
+<path d="M5.6 12.5h8.8M10 12.5l4-7" />
+</svg>
+<span class="tip" role="tooltip" id="metronomeTip"
+><b>Metronome <kbd>K</kbd></b
+>A click on every beat, higher on the first of each
+bar</span
+>
+</button>
+<button
+class="icon"
+id="band"
+aria-label="Play as a band"
+aria-describedby="bandTip"
+disabled
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<circle cx="7.5" cy="7" r="2.5" />
+<path d="M3 16.5a4.5 4.5 0 0 1 9 0" />
+<circle cx="13.8" cy="7.5" r="2" />
+<path d="M13.5 12.2a3.8 3.8 0 0 1 4 4.3" />
+</svg>
+<span class="tip" role="tooltip" id="bandTip"
+><b>Play as a band</b>Opens every part in a window of its
+own, side by side, all in time. Play, pause, jump and loop
+from any of them; the sound comes from this window, which
+stays open behind them</span
+>
+</button>
+<button
+class="icon"
+id="tabView"
+aria-pressed="false"
+aria-label="2D tab view"
+aria-describedby="tabViewTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+>
+<path d="M2.5 5h15M2.5 10h15M2.5 15h15" />
+<path d="M7 3v14" stroke-width="2.2" />
+</svg>
+<span class="tip" role="tooltip" id="tabViewTip"
+><b>2D tab view <kbd>D</kbd></b
+>The notes as tab: fret numbers on flat strings, coming in
+from the right to the play line. Press again for the 3D
+highway</span
+>
+</button>
+<button
+class="icon"
+id="minimal"
+aria-pressed="false"
+aria-label="Minimal view"
+aria-describedby="minimalTip"
+>
+<svg
+width="18"
+height="18"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.6"
+stroke-linecap="round"
+stroke-linejoin="round"
+>
+<path
+d="M2.5 10s2.8-5 7.5-5 7.5 5 7.5 5-2.8 5-7.5 5-7.5-5-7.5-5z"
+/>
+<circle cx="10" cy="10" r="2.2" />
+</svg>
+<span class="tip" role="tooltip" id="minimalTip"
+><b>Minimal view <kbd>H</kbd></b
+>Just the highway and the lyrics: the header, phrase bars
+and song info make way. Press again to bring them back</span
+>
+</button>
+</div>
+<div
+id="settings"
+class="sheet"
+role="dialog"
+aria-labelledby="settingsTitle"
+hidden
+>
+<div class="sheet-head">
+<h2 id="settingsTitle">Settings</h2>
+<button
+class="close"
+id="settingsClose"
+aria-label="Close settings"
+>
+<svg
+width="16"
+height="16"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.8"
+stroke-linecap="round"
+>
+<path d="M5 5l10 10M15 5L5 15" />
+</svg>
+</button>
+</div>
+<div class="tabs" role="tablist" aria-label="Settings sections">
+<button
+role="tab"
+id="tab-view"
+aria-controls="pane-view"
+data-tab="view"
+>
+View
+</button>
+<button
+role="tab"
+id="tab-highway"
+aria-controls="pane-highway"
+data-tab="highway"
+>
+Highway
+</button>
+<button
+role="tab"
+id="tab-strings"
+aria-controls="pane-strings"
+data-tab="strings"
+>
+Strings
+</button>
+<button
+role="tab"
+id="tab-style"
+aria-controls="pane-style"
+data-tab="style"
+>
+Style
+</button>
+<button
+role="tab"
+id="tab-audio"
+aria-controls="pane-audio"
+data-tab="audio"
+>
+Audio
+</button>
+</div>
+<section
+class="pane"
+id="pane-view"
+role="tabpanel"
+aria-labelledby="tab-view"
+>
+<h3 class="only-3d">Camera</h3>
+<div class="pair only-3d">
+<div class="setting">
+<div class="setting-head">
+<label for="viewAngle">View angle</label
+><output id="viewAngleOut" for="viewAngle"></output>
+</div>
+<input
+id="viewAngle"
+type="range"
+min="10"
+max="65"
+step="1"
+/>
+<div class="scale" aria-hidden="true">
+<span>Flat</span><span>Top-down</span>
+</div>
+</div>
+<div
+class="setting"
+title="Look at the highway from one side: it runs off that way, and the frets on that side come closer"
+>
+<div class="setting-head">
+<label for="sideAngle">Side angle</label
+><output id="sideAngleOut" for="sideAngle"></output>
+</div>
+<input
+id="sideAngle"
+type="range"
+min="-20"
+max="20"
+step="1"
+/>
+<div class="scale" aria-hidden="true">
+<span>Left</span><span>Right</span>
+</div>
+</div>
+</div>
+<h3>Neck</h3>
+<div class="pair">
+<div
+class="setting only-3d"
+title="How wide each fret is on screen. The strings keep their spacing, and your hand position always stays in view"
+>
+<div class="setting-head">
+<label for="fretWidth">Fret width</label
+><output id="fretWidthOut" for="fretWidth"></output>
+</div>
+<input
+id="fretWidth"
+type="range"
+min="0.5"
+max="2"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>More of the neck</span
+><span>Bigger frets</span>
+</div>
+</div>
+<div
+class="setting"
+title="How far apart the strings are. The notes grow with them, and the fret numbers stay where they are"
+>
+<div class="setting-head">
+<label for="boardHeight">Fretboard height</label
+><output
+id="boardHeightOut"
+for="boardHeight"
+></output>
+</div>
+<input
+id="boardHeight"
+type="range"
+min="0.5"
+max="2"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>Strings closer</span
+><span>Strings apart</span>
+</div>
+</div>
+</div>
+<h3>Notes</h3>
+<div class="pair">
+<div class="setting">
+<div class="setting-head">
+<label for="noteSpeed">Note speed</label
+><output id="noteSpeedOut" for="noteSpeed"></output>
+</div>
+<input
+id="noteSpeed"
+type="range"
+min="0.25"
+max="2"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>Close together</span><span>Far apart</span>
+</div>
+</div>
+<div
+class="setting only-3d"
+title="How far down the highway notes show up. Shown as the seconds of notes in view, which faster notes also shorten"
+>
+<div class="setting-head">
+<label for="drawDistance">Drawing distance</label
+><output
+id="drawDistanceOut"
+for="drawDistance"
+></output>
+</div>
+<input
+id="drawDistance"
+type="range"
+min="0.2"
+max="2"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>Near</span><span>Far</span>
+</div>
+</div>
+</div>
+<button class="text-button" id="resetSettings">
+Reset settings
+</button>
+</section>
+<section
+class="pane"
+id="pane-highway"
+role="tabpanel"
+aria-labelledby="tab-highway"
+hidden
+>
+<div
+class="setting only-2d"
+title="Notes scrolling in to the play line, or a page of bars that holds still while the play line moves across it"
+>
+<div class="setting-head">
+<span id="tabLayoutLabel">Tab</span>
+</div>
+<div
+class="seg"
+data-setting="tabLayout"
+role="group"
+aria-labelledby="tabLayoutLabel"
+></div>
+</div>
+<div class="setting">
+<div class="setting-head">
+<span id="lookLabel">Notes</span>
+</div>
+<div
+class="seg"
+data-setting="look"
+role="group"
+aria-labelledby="lookLabel"
+></div>
+</div>
+<label class="toggle only-3d"
+><span
+>3D notes<small
+>Notes a few pixels deep, lit on top</small
+></span
+><input id="notes3d" type="checkbox" role="switch"
+/></label>
+<div
+class="setting only-3d"
+title="The white line on the floor under each note and chord, where it's played"
+>
+<div class="setting-head">
+<label for="noteLines">Note lines</label
+><output id="noteLinesOut" for="noteLines"></output>
+</div>
+<input
+id="noteLines"
+type="range"
+min="0"
+max="1"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>Hidden</span><span>Solid</span>
+</div>
+</div>
+<div class="setting only-3d">
+<div class="setting-head">
+<span id="framesLabel">Chord frames</span>
+</div>
+<div
+class="seg"
+data-setting="frames"
+role="group"
+aria-labelledby="framesLabel"
+></div>
+</div>
+<div class="setting only-3d">
+<div class="setting-head">
+<span id="repeatMarksLabel">Repeated chords</span>
+</div>
+<div
+class="seg"
+data-setting="repeatMarks"
+role="group"
+aria-labelledby="repeatMarksLabel"
+></div>
+</div>
+<div
+class="setting only-3d"
+title="The fret of each note, on the floor in front of it, and a ruler of inlay frets on every bar line"
+>
+<div class="setting-head">
+<label for="fretNumbers">Fret numbers</label
+><output id="fretNumbersOut" for="fretNumbers"></output>
+</div>
+<input
+id="fretNumbers"
+type="range"
+min="0"
+max="1"
+step="0.05"
+/>
+<div class="scale" aria-hidden="true">
+<span>Hidden</span><span>Solid</span>
+</div>
+</div>
+<div
+class="setting"
+title="The mute crosses and finger numbers on the notes"
+>
+<div class="setting-head">
+<span id="markingsLabel">Markings on notes</span>
+</div>
+<div
+class="seg"
+data-setting="markings"
+role="group"
+aria-labelledby="markingsLabel"
+></div>
+</div>
+<label class="toggle"
+><span
+>Hand position guides<small
+>Where your hand goes: a band down the highway, or
+its fret under the tab</small
+></span
+><input id="guides" type="checkbox" role="switch"
+/></label>
+</section>
+<section
+class="pane"
+id="pane-strings"
+role="tabpanel"
+aria-labelledby="tab-strings"
+hidden
+>
+<div class="setting">
+<div class="setting-head">
+<span id="stringOrderLabel">String order</span>
+</div>
+<div
+class="cards"
+data-setting="stringOrder"
+role="group"
+aria-labelledby="stringOrderLabel"
+></div>
+</div>
+<div class="setting">
+<div class="setting-head">
+<span id="stringsLabel">String colours</span>
+</div>
+<div
+class="cards"
+data-setting="strings"
+role="group"
+aria-labelledby="stringsLabel"
+></div>
+</div>
+</section>
+<section
+class="pane"
+id="pane-style"
+role="tabpanel"
+aria-labelledby="tab-style"
+hidden
+>
+<div class="setting">
+<div class="setting-head">
+<span id="colorsLabel">Colours</span>
+</div>
+<div
+class="cards three"
+data-setting="colors"
+role="group"
+aria-labelledby="colorsLabel"
+></div>
+</div>
+<div class="setting">
+<div class="setting-head">
+<span id="fontsLabel">Fonts</span>
+</div>
+<div
+class="seg"
+data-setting="fonts"
+role="group"
+aria-labelledby="fontsLabel"
+></div>
+</div>
+<div class="setting only-3d">
+<div class="setting-head">
+<span id="headstockLabel">Headstock</span>
+</div>
+<div
+class="cards"
+data-setting="headstock"
+role="group"
+aria-labelledby="headstockLabel"
+></div>
+</div>
+<label class="toggle"
+><span
+>Song intro<small
+>The title and "Get ready" before the first notes
+come into view</small
+></span
+><input id="songIntro" type="checkbox" role="switch"
+/></label>
+</section>
+<section
+class="pane"
+id="pane-audio"
+role="tabpanel"
+aria-labelledby="tab-audio"
+hidden
+>
+<label class="toggle"
+><span
+>Autoplay<small
+>Start playing as soon as a song has opened</small
+></span
+><input id="autoplay" type="checkbox" role="switch"
+/></label>
+<div class="setting">
+<div class="setting-head">
+<label for="offset">Audio delay</label
+><output id="offsetOut" for="offset"></output>
+</div>
+<input
+id="offset"
+type="range"
+min="-1000"
+max="1000"
+step="10"
+/>
+<div class="scale" aria-hidden="true">
+<span>Notes earlier</span><span>Notes later</span>
+</div>
+<p class="hint">
+Move it right if notes reach the strings before you hear
+them.
+</p>
+</div>
+<button class="text-button" id="resetOffset">
+Reset delay
+</button>
+<label class="toggle"
+><span
+>Mute my part<small
+>Guitar Pro files played by the synth: hear the
+other tracks without yours</small
+></span
+><input id="mute" type="checkbox" role="switch"
+/></label>
+</section>
+</div>
+<div
+id="legend"
+class="sheet"
+role="dialog"
+aria-labelledby="legendTitle"
+hidden
+>
+<div class="sheet-head">
+<h2 id="legendTitle">Notation and shortcuts</h2>
+<button
+class="close"
+id="legendClose"
+aria-label="Close notation"
+>
+<svg
+width="16"
+height="16"
+viewBox="0 0 20 20"
+fill="none"
+stroke="currentColor"
+stroke-width="1.8"
+stroke-linecap="round"
+>
+<path d="M5 5l10 10M15 5L5 15" />
+</svg>
+</button>
+</div>
+<div class="legend-find">
+<input
+id="legendFind"
+type="search"
+placeholder="Find a notation or shortcut, like bend or loop"
+aria-label="Find a notation or shortcut"
+/>
+</div>
+<div class="pane legend" id="legendList"></div>
+</div>
+<div id="intro" aria-hidden="true">
+<div id="introTitle"></div>
+<div id="introFacts"></div>
+<div id="introState">
+<span class="bars" id="introBars"
+><i></i><i></i><i></i><i></i
+></span>
+<span id="introText"></span>
+</div>
+</div>
+<div id="status" role="status" class="loading">
+<span class="bars moving" aria-hidden="true"
+><i></i><i></i><i></i><i></i
+></span>
+<span id="statusText">Loading the player…</span>
+</div>
+<div id="bandNote" hidden>
+<span
+>Playing as a band: every part is in a window of its own, and
+the sound comes from this one</span
+>
+<button class="text-button" id="bandBack">
+Close the band windows
+</button>
+</div>
+<div id="drop" hidden>
+Drop a Guitar Pro file, or a tab with its recording
+</div>
+<input
+type="file"
+id="file"
+hidden
+multiple
+accept=".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxl,.xml,.atex,.mp3,.m4a,.aac,.ogg,.oga,.wav,.flac"
+/>
+<div id="tab"></div></div>`;const o=[...e.querySelectorAll("[id]")].map(t=>t.id).filter(t=>document.querySelectorAll(`[id="${t}"]`).length>1);if(document.getElementById(n.id)&&o.push(n.id),o.length)throw e.innerHTML="",new Error(`The page around the player uses ids that are the player's: ${o.join(", ")}`);return document.head.append(a,n),window.alphaTab||await new Promise((t,r)=>document.head.append(Object.assign(document.createElement("script"),{src:"https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js",onload:t,onerror:()=>r(new Error("Could not load https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js"))}))),await import("./player.js"),window.fretfall}export{d as mount};