@fretfall/player 0.0.1 → 0.2.0

package/index.html

@@ -6,9 +6,12 @@
 <title>Fretfall</title>
 <link rel="icon" href="favicon.svg" type="image/svg+xml" />
 <link id="fonts" rel="stylesheet" href="" />
-<link rel="preload" href="demo.atex" as="fetch" crossorigin />
-<link rel="preload" href="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js" as="script" />
-<style>:root{--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}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.4 var(--ui);accent-color:var(--accent)}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit}.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}.group{display:flex;align-items:center;gap:10px;min-width:0}.group:last-child{flex:none}.wordmark{display:flex;align-items:center;gap:7px;font:700 15px var(--num);letter-spacing:.22em}.wordmark .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){.wordmark .fall{animation:none}}.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}.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}.seg button[aria-pressed=true]{background:var(--text);color:var(--ink);font-weight:600}.seg select{max-width:22vw;border:0;padding:4px 6px;background:none;color:var(--text);font:600 13px var(--ui)}.seg option{background:var(--ink);color:var(--text)}.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)}.icon[aria-pressed=true],.icon[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.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)}.speed button{cursor:pointer;width:28px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit}.speed #speed{width:auto;min-width:46px;font:600 14px var(--num);color:var(--text)}.time{margin-right:6px;font:14px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.divider{width:1px;height:24px;margin:0 4px;background:var(--chip-border)}.menu{display:contents}#menuButton{display:none}#phrases{position:fixed;left:32px;right:32px;top:74px;height:54px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#phrases div{position:absolute;bottom:0;min-width:2px;border-radius:2px;background:var(--todo)}#phrases div.done{background:var(--done)}#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}#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)}#loopBox:before,#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}#loopBox:before{left:-6.75px}#loopBox:after{right:-6.75px}#progress{position:fixed;left:32px;right:32px;top:134px;height:5px;border-radius:3px;overflow:hidden;background:var(--todo)}#progress div{width:0;height:100%;background:var(--accent);opacity:.9}#lyrics{position:fixed;left:40px;top:164px;max-width:min(560px,46vw);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)}#section{min-height:16px;font:600 12px var(--num);letter-spacing:.18em;color:var(--accent)}#lines{position:relative;height:2.45em;font-size:clamp(20px,2.3vw,32px);line-height:1.15}#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}#lines .low{transform:translateY(1.3em);opacity:.5}#lines .gone{opacity:0;transition-duration:.45s,.25s}#lines .gone.up{transform:translateY(-.8em)}#lines span{transition:color .15s}#lines .sung{color:var(--text)}@media(prefers-reduced-motion:reduce){#lines div{transition-property:opacity}}#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}#info b{color:var(--text);font-weight:600}#info>span+span:before{content:"";display:inline-block;width:1px;height:12px;margin:0 14px;vertical-align:-1px;background:var(--chip-border)}#info .tuning{position:relative;pointer-events:auto;cursor:help}#info .tuning>b{text-decoration:underline dotted var(--muted);text-underline-offset:3px}#info .tip{left:0;right:auto;white-space:normal}#info .tuning:is(:hover,:focus)>.tip{opacity:1;visibility:visible;transform:none}.pegs{display:flex;align-items:flex-start;gap:4px;margin:10px 0 8px}.peg{display:flex;flex-direction:column;align-items:center;min-width:26px;gap:2px;font:600 13px var(--num)}.peg i{font-style:normal;font-size:11px;color:var(--muted)}.peg .move:before{content:"";display:block;width:3px;height:calc(6px + var(--d) * 3px);margin:2px auto 3px;border-radius:2px;background:var(--c)}.peg strong{color:var(--c)}.peg.same{opacity:.45}.tip small{display:block;font-size:11px}:root:fullscreen .bar{transform:translateY(calc(-100% - 18px));opacity:0;visibility:hidden;transition-delay:.4s}:root:fullscreen:has(#phrases:hover,#progress:hover,.bar:hover) .bar{transform:none;opacity:1;visibility:visible;transition-delay:0s}#tools{position:fixed;z-index:3;right:32px;bottom:6px}#tools .icon{position:relative}.icon:disabled{cursor:default;color:var(--muted)}.icon:disabled svg{opacity:.5}#loopTools{position:fixed;z-index:4;display:flex;transform:translate(-50%,calc(-50% + 3px))}#loopTools .icon{width:32px;height:26px;background:var(--ink);border-color:var(--accent)}#loopTools svg{width:15px;height:15px}#trainer{border-radius:13px 0 0 13px}#clearLoop{border-left:0;border-radius:0 13px 13px 0;color:var(--muted)}#clearLoop:hover{color:var(--text)}#loopTools .icon[aria-pressed=true]{background:var(--accent);color:var(--ink)}.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}.tip b{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;color:var(--text);font-weight:600}.tip kbd{padding:0 5px;border:1px solid var(--chip-border);border-radius:4px;color:var(--muted);font:inherit}:is(.icon,.speed):hover>.tip,.icon:focus-visible>.tip,.speed:focus-within>.tip{opacity:1;visibility:visible;transform:none}.bar :is(.icon,.speed){position:relative}.bar .tip{top:calc(100% + 10px);bottom:auto;transform:translateY(-4px)}.bar [aria-expanded=true]>.tip{display:none}#loopTools .tip{top:calc(100% + 10px);bottom:auto;left:var(--tip, 50%);right:auto;transform:translate(calc(-1 * var(--tip, 50%)),-4px)}#loopTools .icon:hover>.tip,#loopTools .icon:focus-visible>.tip{transform:translate(calc(-1 * var(--tip, 50%)))}:root:fullscreen :is(#info,#tools>:not(#minimal)){display:none}:root.minimal :is(.bar,#phrases,#progress,#loopTools,#info,#tools>:not(#minimal)){display:none}:root.tab2d .only-3d,:root:not(.tab2d) .only-2d{display:none}:root.tab2d .only-3d+.only-3d+h3{padding-top:0;border-top:0}:root.minimal #lyrics{top:24px}#status{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,90vw);padding:10px 16px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);backdrop-filter:blur(10px);text-align:center}:root.banding :is(#highway,#phrases,#progress,#loopTools,#lyrics,#info,#intro,#time){display:none}#bandNote{position:fixed;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;max-width:min(440px,90vw);padding:14px 20px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);text-align:center}#bandNote .text-button{justify-self:center}#status:not(.loading) .bars{display:none}.bars{flex:none;display:inline-flex;align-items:flex-end;gap:3px;height:16px}.bars i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform:scaleY(.3);transform-origin:bottom}.bars.moving i{animation:bars .8s ease-in-out infinite alternate}.bars.moving i:nth-child(2){animation-duration:1.1s;animation-delay:-.5s}.bars.moving i:nth-child(3){animation-duration:.7s;animation-delay:-.2s}.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){.bars.moving i{animation:none;transform:scaleY(.6)}}#intro{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(640px,90vw);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}#intro.show{opacity:1;visibility:visible}#introTitle{font:700 clamp(22px,3vw,38px) / 1.15 var(--num);color:var(--text)}#introFacts{font-size:14px;color:var(--muted)}#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)}.sheet{position:fixed;right:32px;top:66px;z-index:2;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 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}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px 18px}.sheet-head h2{margin:0;font:600 15px var(--ui)}.close{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}.close:hover{background:var(--chip);color:var(--text)}.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)}.tabs button{padding:6px 0;border:0;border-radius:6px;background:none;font:500 13px var(--ui);color:var(--muted);cursor:pointer}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--text);color:var(--ink);font-weight:600}.pane{display:grid;align-content:start;gap:18px;padding:18px 18px 20px;overflow:hidden auto}.pane h3{margin:0 0 -6px;font:600 11px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.pane h3~h3{padding-top:16px;border-top:1px solid var(--chip-border)}.setting{display:grid;gap:8px}.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 20px}.setting-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:500}.setting-head output{font:600 12px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.setting .seg{overflow:visible}.setting .seg button{flex:1}.scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:11px;color:var(--muted)}.hint{margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}.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}.text-button:hover{color:var(--text)}:is(#settings,.volume) input[type=range]{-webkit-appearance:none;appearance:none;height:18px;margin:0;background:none;cursor:pointer}#settings input[type=range]{width:100%}: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%))}: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}:is(#settings,.volume) input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--chip-border)}:is(#settings,.volume) input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}:is(#settings,.volume) input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:3px solid var(--accent)}.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;font-weight:500;cursor:pointer}.toggle small{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}.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}.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s}.toggle input:checked{background:var(--accent)}.toggle input:checked:after{transform:translate(16px);background:var(--ink)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}.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}.cards button:hover{color:var(--text)}.cards button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}.dots{display:flex;gap:4px}.dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff2e}.headstock{width:100%;height:52px}.order{font:600 12px var(--num);letter-spacing:.12em;color:var(--text)}#legend{width:min(430px,calc(100vw - 32px))}.legend-find{padding:0 14px 6px}.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)}.legend-find input::placeholder{color:var(--muted)}.legend{gap:4px;padding-top:10px}.legend h3{margin:14px 0 4px}.legend h3:first-child{margin-top:0}.legend-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:4px 0}.legend-item b{display:block;font-size:13px;font-weight:500}.legend-item span{display:block;font-size:12px;line-height:1.4;color:var(--muted)}.legend-item .keys{display:flex;justify-content:center;gap:4px}.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}.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}.legend-item text{font-family:var(--num);font-weight:700;text-anchor:middle;dominant-baseline:central}.legend-empty{margin:8px 0;font-size:13px;color:var(--muted)}.f0{fill:var(--s0)}.f1{fill:var(--s1)}.f2{fill:var(--s2)}.f3{fill:var(--s3)}.f4{fill:var(--s4)}.l0{stroke:var(--s0)}.l1{stroke:var(--s1)}.l2{stroke:var(--s2)}.l3{stroke:var(--s3)}.l4{stroke:var(--s4)}.lm{stroke:var(--muted)}.li{stroke:var(--ink)}.ft{fill:var(--text)}.lt{stroke:var(--text)}.fi{fill:var(--ink)}.fa{fill:var(--accent)}.fl{fill:var(--lane)}.ll{stroke:var(--lane)}.lw{stroke:#fff}.fm{fill:var(--muted)}.la{stroke:var(--accent)}.fw{fill:#fff}.volume{position:relative}.volume .icon.muted{color:var(--muted)}.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}.volume-panel input{width:150px}.volume-panel output{min-width:36px;font:600 12px var(--num);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.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}.volume-mute:hover{background:var(--chip)}.volume-mute[aria-pressed=true]{color:var(--muted)}#drop{position:fixed;inset:12px;z-index:3;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:16px;background:#00000073;font:600 20px var(--num)}#tab{position:fixed;left:-10000px;top:0;width:1000px}@media(max-width:900px){.time{display:none}#menuButton{display:grid}.volume{position:static}.volume-panel{left:auto;right:0;transform:none}.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}#menuButton[aria-expanded=true]+.menu{display:flex}.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)}.menu .icon:after{content:attr(data-label)}.menu .icon:hover{background:var(--chip)}.menu .icon[aria-pressed=true],.menu .icon[aria-expanded=true]{background:none;color:var(--accent)}.menu .tip{display:none}.menu .divider{width:auto;height:1px;margin:4px}}@media(max-width:560px){.bar{flex-wrap:wrap;height:auto;row-gap:8px}.bar>.group:first-child,.bar>.group:last-child{flex:1 1 100%;height:40px}.speed{margin-left:auto}#menuButton{position:absolute;top:2px;right:0}.menu{top:48px}#phrases{top:122px}#info{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}#info>span+span:before{display:none}#info>span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}#progress{top:182px}#lyrics{top:212px}.sheet{top:114px;max-height:calc(100vh - 166px)}}@media(max-width:520px){.sheet{right:16px}}</style>
+<link
+rel="preload"
+href="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js"
+as="script"
+/>
+<style>:root{--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}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.4 var(--ui);accent-color:var(--accent)}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit}.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}.group{display:flex;align-items:center;gap:10px;min-width:0}.group:last-child{flex:none}.wordmark{display:flex;align-items:center;gap:7px;font:700 15px var(--num);letter-spacing:.22em}: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){.wordmark .fall{animation:none}}.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}.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}.seg button[aria-pressed=true]{background:var(--text);color:var(--ink);font-weight:600}.seg select{max-width:22vw;border:0;padding:4px 6px;background:none;color:var(--text);font:600 13px var(--ui)}.seg option{background:var(--ink);color:var(--text)}.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)}.icon[aria-pressed=true],.icon[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.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)}.speed button{cursor:pointer;width:28px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit}.speed #speed{width:auto;min-width:46px;font:600 14px var(--num);color:var(--text)}.time{margin-right:6px;font:14px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.divider{width:1px;height:24px;margin:0 4px;background:var(--chip-border)}.menu{display:contents}#menuButton{display:none}#phrases{position:fixed;left:32px;right:32px;top:74px;height:54px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#phrases div{position:absolute;bottom:0;min-width:2px;border-radius:2px;background:var(--todo)}#phrases div.done{background:var(--done)}#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}#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)}#loopBox:before,#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}#loopBox:before{left:-6.75px}#loopBox:after{right:-6.75px}#progress{position:fixed;left:32px;right:32px;top:134px;height:5px;border-radius:3px;overflow:hidden;background:var(--todo)}#progress div{width:0;height:100%;background:var(--accent);opacity:.9}#lyrics{position:fixed;left:40px;top:164px;max-width:min(560px,46vw);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)}#section{min-height:16px;font:600 12px var(--num);letter-spacing:.18em;color:var(--accent)}#lines{position:relative;height:2.45em;font-size:clamp(20px,2.3vw,32px);line-height:1.15}#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}#lines .low{transform:translateY(1.3em);opacity:.5}#lines .gone{opacity:0;transition-duration:.45s,.25s}#lines .gone.up{transform:translateY(-.8em)}#lines span{transition:color .15s}#lines .sung{color:var(--text)}@media(prefers-reduced-motion:reduce){#lines div{transition-property:opacity}}#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}#info b{color:var(--text);font-weight:600}#info>span+span:before{content:"";display:inline-block;width:1px;height:12px;margin:0 14px;vertical-align:-1px;background:var(--chip-border)}#info .tuning{position:relative;pointer-events:auto;cursor:help}#info .tuning>b{text-decoration:underline dotted var(--muted);text-underline-offset:3px}#info .tip{left:0;right:auto;white-space:normal}#info .tuning:is(:hover,:focus)>.tip{opacity:1;visibility:visible;transform:none}.pegs{display:flex;align-items:flex-start;gap:4px;margin:10px 0 8px}.peg{display:flex;flex-direction:column;align-items:center;min-width:26px;gap:2px;font:600 13px var(--num)}.peg i{font-style:normal;font-size:11px;color:var(--muted)}.peg .move:before{content:"";display:block;width:3px;height:calc(6px + var(--d) * 3px);margin:2px auto 3px;border-radius:2px;background:var(--c)}.peg strong{color:var(--c)}.peg.same{opacity:.45}.tip small{display:block;font-size:11px}:root:fullscreen .bar{transform:translateY(calc(-100% - 18px));opacity:0;visibility:hidden;transition-delay:.4s}:root:fullscreen:has(#phrases:hover,#progress:hover,.bar:hover) .bar{transform:none;opacity:1;visibility:visible;transition-delay:0s}#tools{position:fixed;z-index:3;right:32px;bottom:6px}#tools .icon{position:relative}.icon:disabled{cursor:default;color:var(--muted)}.icon:disabled svg{opacity:.5}#loopTools{position:fixed;z-index:4;display:flex;transform:translate(-50%,calc(-50% + 3px))}#loopTools .icon{width:32px;height:26px;background:var(--ink);border-color:var(--accent)}#loopTools svg{width:15px;height:15px}#trainer{border-radius:13px 0 0 13px}#clearLoop{border-left:0;border-radius:0 13px 13px 0;color:var(--muted)}#clearLoop:hover{color:var(--text)}#loopTools .icon[aria-pressed=true]{background:var(--accent);color:var(--ink)}.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}.tip b{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;color:var(--text);font-weight:600}.tip kbd{padding:0 5px;border:1px solid var(--chip-border);border-radius:4px;color:var(--muted);font:inherit}:is(.icon,.speed):hover>.tip,.icon:focus-visible>.tip,.speed:focus-within>.tip{opacity:1;visibility:visible;transform:none}.bar :is(.icon,.speed){position:relative}.bar .tip{top:calc(100% + 10px);bottom:auto;transform:translateY(-4px)}.bar [aria-expanded=true]>.tip{display:none}#loopTools .tip{top:calc(100% + 10px);bottom:auto;left:var(--tip, 50%);right:auto;transform:translate(calc(-1 * var(--tip, 50%)),-4px)}#loopTools .icon:hover>.tip,#loopTools .icon:focus-visible>.tip{transform:translate(calc(-1 * var(--tip, 50%)))}:root:fullscreen :is(#info,#tools>:not(#minimal)){display:none}:root.minimal :is(.bar,#phrases,#progress,#loopTools,#info,#tools>:not(#minimal)){display:none}:root.tab2d .only-3d,:root:not(.tab2d) .only-2d{display:none}:root.tab2d .only-3d+.only-3d+h3{padding-top:0;border-top:0}:root.minimal #lyrics{top:24px}#status{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,90vw);padding:10px 16px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);backdrop-filter:blur(10px);text-align:center}:root.banding :is(#highway,#phrases,#progress,#loopTools,#lyrics,#info,#intro,#time){display:none}#bandNote{position:fixed;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;max-width:min(440px,90vw);padding:14px 20px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-border);text-align:center}#bandNote .text-button{justify-self:center}#status:not(.loading) .bars{display:none}.bars{flex:none;display:inline-flex;align-items:flex-end;gap:3px;height:16px}.bars i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform:scaleY(.3);transform-origin:bottom}.bars.moving i{animation:bars .8s ease-in-out infinite alternate}.bars.moving i:nth-child(2){animation-duration:1.1s;animation-delay:-.5s}.bars.moving i:nth-child(3){animation-duration:.7s;animation-delay:-.2s}.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){.bars.moving i{animation:none;transform:scaleY(.6)}}#intro{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;max-width:min(640px,90vw);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}#intro.show{opacity:1;visibility:visible}#introTitle{font:700 clamp(22px,3vw,38px) / 1.15 var(--num);color:var(--text)}#introFacts{font-size:14px;color:var(--muted)}#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)}.sheet{position:fixed;right:32px;top:66px;z-index:2;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 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}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px 18px}.sheet-head h2{margin:0;font:600 15px var(--ui)}.close{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}.close:hover{background:var(--chip);color:var(--text)}.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)}.tabs button{padding:6px 0;border:0;border-radius:6px;background:none;font:500 13px var(--ui);color:var(--muted);cursor:pointer}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--text);color:var(--ink);font-weight:600}.pane{display:grid;align-content:start;gap:18px;padding:18px 18px 20px;overflow:hidden auto}.pane h3{margin:0 0 -6px;font:600 11px var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.pane h3~h3{padding-top:16px;border-top:1px solid var(--chip-border)}.setting{display:grid;gap:8px}.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 20px}.setting-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:500}.setting-head output{font:600 12px var(--num);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.setting .seg{overflow:visible}.setting .seg button{flex:1}.scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:11px;color:var(--muted)}.hint{margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}.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}.text-button:hover{color:var(--text)}:is(#settings,.volume) input[type=range]{-webkit-appearance:none;appearance:none;height:18px;margin:0;background:none;cursor:pointer}#settings input[type=range]{width:100%}: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%))}: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}:is(#settings,.volume) input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--chip-border)}:is(#settings,.volume) input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}:is(#settings,.volume) input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:3px solid var(--accent)}.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;font-weight:500;cursor:pointer}.toggle small{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}.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}.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s}.toggle input:checked{background:var(--accent)}.toggle input:checked:after{transform:translate(16px);background:var(--ink)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}.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}.cards button:hover{color:var(--text)}.cards button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}.dots{display:flex;gap:4px}.dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff2e}.headstock{width:100%;height:52px}.order{font:600 12px var(--num);letter-spacing:.12em;color:var(--text)}#legend{width:min(430px,calc(100vw - 32px))}.legend-find{padding:0 14px 6px}.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)}.legend-find input::placeholder{color:var(--muted)}.legend{gap:4px;padding-top:10px}.legend h3{margin:14px 0 4px}.legend h3:first-child{margin-top:0}.legend-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:4px 0}.legend-item b{display:block;font-size:13px;font-weight:500}.legend-item span{display:block;font-size:12px;line-height:1.4;color:var(--muted)}.legend-item .keys{display:flex;justify-content:center;gap:4px}.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}.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}.legend-item text{font-family:var(--num);font-weight:700;text-anchor:middle;dominant-baseline:central}.legend-empty{margin:8px 0;font-size:13px;color:var(--muted)}.f0{fill:var(--s0)}.f1{fill:var(--s1)}.f2{fill:var(--s2)}.f3{fill:var(--s3)}.f4{fill:var(--s4)}.l0{stroke:var(--s0)}.l1{stroke:var(--s1)}.l2{stroke:var(--s2)}.l3{stroke:var(--s3)}.l4{stroke:var(--s4)}.lm{stroke:var(--muted)}.li{stroke:var(--ink)}.ft{fill:var(--text)}.lt{stroke:var(--text)}.fi{fill:var(--ink)}.fa{fill:var(--accent)}.fl{fill:var(--lane)}.ll{stroke:var(--lane)}.lw{stroke:#fff}.fm{fill:var(--muted)}.la{stroke:var(--accent)}.fw{fill:#fff}.volume{position:relative}.volume .icon.muted{color:var(--muted)}.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}.volume-panel input{width:150px}.volume-panel output{min-width:36px;font:600 12px var(--num);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.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}.volume-mute:hover{background:var(--chip)}.volume-mute[aria-pressed=true]{color:var(--muted)}#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)}#tab{position:fixed;left:-10000px;top:0;width:1000px}@media(max-width:900px){.time{display:none}#menuButton{display:grid}.volume{position:static}.volume-panel{left:auto;right:0;transform:none}.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}#menuButton[aria-expanded=true]+.menu{display:flex}.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)}.menu .icon:after{content:attr(data-label)}.menu .icon:hover{background:var(--chip)}.menu .icon[aria-pressed=true],.menu .icon[aria-expanded=true]{background:none;color:var(--accent)}.menu .tip{display:none}.menu .divider{width:auto;height:1px;margin:4px}}@media(max-width:560px){.bar{flex-wrap:wrap;height:auto;row-gap:8px}.bar>.group:first-child,.bar>.group:last-child{flex:1 1 100%;height:40px}.speed{margin-left:auto}#menuButton{position:absolute;top:2px;right:0}.menu{top:48px}#phrases{top:122px}#info{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}#info>span+span:before{display:none}#info>span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}#progress{top:182px}#lyrics{top:212px}.sheet{top:114px;max-height:calc(100vh - 166px)}}@media(max-width:520px){.sheet{right:16px}}</style>
 <link rel="modulepreload" href="player.js">
 <link rel="modulepreload" href="fingering.js">
 <link rel="modulepreload" href="highway.js">
@@ -22,10 +25,23 @@
 <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">
+<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" />
+<rect
+class="fall"
+x="10.5"
+y="11.67"
+width="9"
+height="4.5"
+rx="1.5"
+/>
 </svg>
 FRETFALL
 </div>
@@ -39,7 +55,11 @@ aria-label="Arrangement"
 <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">
+<button
+id="slower"
+aria-label="Slower"
+aria-describedby="speedTip"
+>
 <svg
 width="16"
 height="16"
@@ -53,7 +73,11 @@ stroke-linecap="round"
 </svg>
 </button>
 <button id="speed" aria-describedby="speedTip">100%</button>
-<button id="faster" aria-label="Faster" aria-describedby="speedTip">
+<button
+id="faster"
+aria-label="Faster"
+aria-describedby="speedTip"
+>
 <svg
 width="16"
 height="16"
@@ -66,7 +90,13 @@ 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>
+<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
@@ -77,7 +107,12 @@ 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>
+<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
@@ -139,14 +174,18 @@ stroke-linejoin="round"
 <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, or shift-click one to stretch the loop to it</span>
+<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, or shift-click one to
+stretch the loop to it</span
+>
 </button>
-<button
-class="icon"
-id="play"
-aria-describedby="playTip"
+<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
 >
-<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
@@ -170,7 +209,11 @@ stroke-linejoin="round"
 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>
+<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
@@ -198,7 +241,11 @@ 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>
+<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"
@@ -222,7 +269,12 @@ stroke-linecap="round"
 <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>
+<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"
@@ -231,12 +283,19 @@ 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>
+<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="phrases">
+<span id="loopBox" hidden></span
+><span id="phraseTime" hidden></span>
+</div>
 <div id="loopTools" role="group" aria-label="Loop" hidden>
 <button
 class="icon"
@@ -259,7 +318,12 @@ 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>
+<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"
@@ -278,7 +342,10 @@ 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>
+<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>
@@ -308,7 +375,11 @@ 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>
+<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"
@@ -332,7 +403,12 @@ stroke-linejoin="round"
 <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>
+<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"
@@ -353,7 +429,12 @@ 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>
+<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"
@@ -372,10 +453,16 @@ 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" />
+<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>
+<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
@@ -509,7 +596,8 @@ max="2"
 step="0.05"
 />
 <div class="scale" aria-hidden="true">
-<span>More of the neck</span><span>Bigger frets</span>
+<span>More of the neck</span
+><span>Bigger frets</span>
 </div>
 </div>
 <div
@@ -531,7 +619,8 @@ max="2"
 step="0.05"
 />
 <div class="scale" aria-hidden="true">
-<span>Strings closer</span><span>Strings apart</span>
+<span>Strings closer</span
+><span>Strings apart</span>
 </div>
 </div>
 </div>
@@ -576,7 +665,9 @@ step="0.05"
 </div>
 </div>
 </div>
-<button class="text-button" id="resetSettings">Reset settings</button>
+<button class="text-button" id="resetSettings">
+Reset settings
+</button>
 </section>
 <section
 class="pane"
@@ -661,7 +752,8 @@ aria-labelledby="repeatMarksLabel"
 <label class="toggle only-3d"
 ><span
 >Fret numbers<small
->The fret of each note, on the floor in front of it</small
+>The fret of each note, on the floor in front of
+it</small
 ></span
 ><input id="fretNumbers" type="checkbox" role="switch"
 /></label>
@@ -682,7 +774,8 @@ aria-labelledby="markingsLabel"
 <label class="toggle"
 ><span
 >Hand position guides<small
->Where your hand goes: a band down the highway, or its fret under the tab</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>
@@ -854,17 +947,26 @@ aria-label="Find a notation or shortcut"
 <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 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 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>
+<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
@@ -874,7 +976,7 @@ type="file"
 id="file"
 hidden
 multiple
-accept=".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxl,.xml,.mp3,.m4a,.aac,.ogg,.oga,.wav,.flac"
+accept=".gp,.gp3,.gp4,.gp5,.gpx,.musicxml,.mxl,.xml,.atex,.mp3,.m4a,.aac,.ogg,.oga,.wav,.flac"
 />
 <div id="tab"></div>
 <script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@1.8.4/dist/alphaTab.min.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fretfall/player",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "An arcade-style 3D note highway for Guitar Pro and MusicXML tabs, in the browser. Plays along with the synth or the band's recording.",
   "keywords": [
     "guitar",
@@ -14,11 +14,11 @@
   ],
   "license": "MIT",
   "author": "Angelo Dini",
-  "homepage": "https://github.com/FinalAngel/fretfall-player#readme",
+  "homepage": "https://github.com/fretfall/player#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/FinalAngel/fretfall-player.git"
+    "url": "git+https://github.com/fretfall/player.git"
   },
-  "bugs": "https://github.com/FinalAngel/fretfall-player/issues",
+  "bugs": "https://github.com/fretfall/player/issues",
   "type": "module"
 }