diff --git a/docs/index.295c5a99.css b/docs/index.295c5a99.css
new file mode 100644
index 0000000..cbd933c
--- /dev/null
+++ b/docs/index.295c5a99.css
@@ -0,0 +1,2 @@
+@font-face{font-family:Cascadia Tablature;src:url(CascadiaTablature.bd0a5a15.woff2)}@font-face{font-family:Cascadia Mono;src:url(CascadiaMono.11654244.woff2)}@font-face{font-family:Cascadia Mono Italic;src:url(CascadiaMonoItalic.252c0bde.woff2)}html{scroll-behavior:smooth}:root{--shadow:rgba(0,0,0,0.2);--border:rgba(40,160,162,0.4);--title-width:260px;--controls-max-width:900px;--app-height:100vh;--tablature-font-size:13px;--tablature-sup-font-size:10px;--tablature-sup-top:-0.3em;--tablature-sub-font-size:13px;--tablature-sub-top:0.2em;--search-result-padding-vertical:10px;--search-result-padding-horizontal:30px;--tab-bg:#fef8ec;--header-bg:#f9f1e1;--button-bg:#f5eddd;--button-hover-bg:#d1dfd0;--button-active-bg:#a9b5a9;--fg:#28a0a2;--fg-alt:#1c9ff0;--fg-alt2:#5ed0fa;--fg-disabled:#9ec5c5;--accent:#ff6a9e;--accent-alt:#f5970a}@media (prefers-color-scheme:dark){:root{--shadow:rgba(0,0,0,0.5);--border:rgba(0,0,0,0.3);--tab-bg:#262335;--header-bg:#241b2f;--button-bg:var(--header-bg);--button-hover-bg:#342847;--button-active-bg:#4f3d6a;--fg:#acb3b3;--fg-alt:#ffcb6b;--fg-alt2:#91f5f8;--fg-disabled:#585858;--accent:#f78c6c;--accent:#f07178;--accent-alt:#f78c6c}}.tablature .tabTitle{font-family:Cascadia Mono Italic;color:var(--accent-alt)}.tablature .tabTimeline{color:var(--fg)}.tablature .tabFret{color:var(--accent)}.tablature .tabSpecial{color:var(--fg-alt2)}.tablature .tabText{color:var(--fg)}.tablature .tabChord{color:var(--fg-alt)}.tablature .tabHeader{color:var(--accent-alt)}.tablature .tabPrefix{color:var(--fg-alt)}.tablature .tabSuffix{font-family:Cascadia Mono Italic;color:var(--accent-alt)}.smallViewport{display:none}@media only screen and (max-width:1060px){.smallViewport{display:inline}.largeViewport{display:none}:root{--tablature-font-size:10px;--tablature-sup-font-size:8px;--tablature-sub-font-size:10px;--search-result-padding-vertical:7px;--search-result-padding-horizontal:15px}}*{box-sizing:border-box;outline:none;scrollbar-color:var(--button-hover-bg) var(--tab-bg)}::-webkit-scrollbar{background-color:var(--button-hover-bg);cursor:pointer}::-webkit-scrollbar-button{height:0;width:0}::-webkit-scrollbar-corner,::-webkit-scrollbar-track-piece{background-color:var(--tab-bg)}::-webkit-scrollbar-thumb{background-color:var(--button-hover-bg)}::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:var(--button-active-bg)}body{background-color:var(--tab-bg)}.app,body{border:0;margin:0;padding:0}.app{display:grid;grid-template-rows:40px auto;height:var(--app-height);position:sticky;font-family:Cascadia Mono}.header{display:flex;flex-wrap:wrap;margin:0;border:0;z-index:100;justify-content:center;box-shadow:0 0 6px 0 var(--shadow);background-color:var(--header-bg)}.title{margin:auto 0;padding:0 10px;width:var(--title-width)}.title a{text-decoration:none}.title h1{margin:auto;color:var(--fg);font-family:Cascadia Mono;font-size:24px}.controls{display:flex;margin:0;border:0;max-width:var(--controls-max-width)}.controls *{background-color:var(--button-bg);font-family:Cascadia Tablature;font-size:13px;color:var(--fg)}.header-button button,button.header-button{box-shadow:0 0 3px 0 var(--shadow);height:100%;border:0;cursor:pointer;padding:10px 20px}.controls button:focus,.controls button:hover{background-color:var(--button-hover-bg)}.controls button:active,.controls button:focus{border-top:1px solid var(--border)}.controls button:active{background-color:var(--button-active-bg)}.controls .selected{background-color:var(--button-hover-bg)}.controls button.disabled{color:var(--fg-disabled)}.controls button>*{background-color:inherit;color:inherit}.dropdown-item button,button.dropdown-item{height:100%;border:0;border-right:1px solid var(--border);cursor:pointer;padding:10px;min-width:50px;text-align:center}.dropdown-item{border-bottom:1px solid var(--border);flex-direction:row;display:flex}.dropdown-item>div{padding:10px;font-style:italic;overflow:hidden;white-space:nowrap}.dropdown-menu{position:absolute;box-shadow:1px 1px 4px 0 var(--shadow);border-top:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border);z-index:1;flex-direction:column;display:flex}.loadingIcon{padding:18px 0;width:50px}.tablatureSearch *{font-family:Cascadia Tablature;font-size:var(--tablature-font-size);color:var(--fg)}.tablatureSearch{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap;margin:5px}.searchBar{padding:10px 30px;background-color:var(--button-hover-bg);border:1px solid;border-color:var(--shadow);width:300px}.searchBar:focus{border-color:var(--fg)}.searchResults table,.searchResults td,.searchResults th,.searchResults tr{border:0;border-collapse:collapse}.searchResults tr:hover{cursor:pointer}.searchResults tr:focus,.searchResults tr:hover{background-color:var(--button-hover-bg)}.searchResults tr:active{background-color:var(--button-active-bg)}.searchResults .selected{background-color:var(--button-hover-bg)}.searchResults td,.searchResults th{padding:var(--search-result-padding-vertical) var(--search-result-padding-horizontal)}.tablatureViewer{display:flex;overflow:auto;background-color:var(--tab-bg)}.tablatureViewer pre{margin:auto;border:0;padding:10px}.tablature pre{font-family:Cascadia Tablature;font-size:var(--tablature-font-size);color:var(--fg)}.tablature sub,.tablature sup{vertical-align:baseline;position:relative}.tablature sup{font-size:var(--tablature-sup-font-size);top:var(--tablature-sup-top)}.tablature sup .fontsize-compensation{font-size:calc(var(--tablature-font-size) - var(--tablature-sup-font-size))}.tablature sub{font-size:var(--tablature-sub-font-size);top:var(--tablature-sub-top)}.tablature sub .fontsize-compensation{font-size:calc(var(--tablature-font-size) - var(--tablature-sub-font-size))}.tablatureEditor{margin:0;border:0;padding:10px 0 10px 10px;outline:none;resize:none;white-space:pre;background-color:var(--tab-bg);color:var(--fg);font-family:Cascadia Tablature;font-size:var(--tablature-font-size)}.tablaturePrinter{display:none}@media print{:root{--tab-bg:#fff;--header-bg:#fff;--button-bg:var(--header-bg);--button-hover-bg:#ddd;--button-active-bg:#eee;--fg:#888;--fg-alt:#666;--fg-alt2:#666;--fg-disabled:#aaa;--accent:#000;--accent-alt:#000}.app{display:none}.tablaturePrinter{display:block}}.hidden{display:none}
+/*# sourceMappingURL=index.295c5a99.css.map */
diff --git a/docs/index.295c5a99.css.map b/docs/index.295c5a99.css.map
new file mode 100644
index 0000000..40dfe3b
--- /dev/null
+++ b/docs/index.295c5a99.css.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["res/index.css"],"sourcesContent":["@font-face {\n font-family: Cascadia Tablature;\n src: url(\"CascadiaTablature.woff2\");\n}\n\n@font-face {\n font-family: Cascadia Mono;\n src: url(\"CascadiaMono.woff2\");\n}\n\n@font-face {\n font-family: Cascadia Mono Italic;\n src: url(\"CascadiaMonoItalic.woff2\");\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n:root {\n --shadow: rgba(0, 0, 0, 0.2);\n /* --border: rgba(0, 0, 0, 0.1); */\n --border: #28a0a266;\n\n --title-width: 260px;\n --controls-max-width: 900px;\n --app-height: 100vh;\n\n --tablature-font-size: 13px;\n --tablature-sup-font-size: 10px;\n --tablature-sup-top: -0.3em;\n --tablature-sub-font-size: 13px;\n --tablature-sub-top: 0.2em;\n\n --search-result-padding-vertical: 10px;\n --search-result-padding-horizontal: 30px;\n\n --tab-bg: #FEF8EC;\n --header-bg: #F9F1E1;\n --button-bg: #f5eddd;\n --button-hover-bg: #D1DFD0;\n --button-active-bg: #A9B5A9;\n\n --fg: #28a0a2;\n --fg-alt: #1c9ff0;\n --fg-alt2: #5ed0fa;\n --fg-disabled: #9ec5c5;\n\n --accent: #ff6a9e;\n --accent-alt: #f5970a;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --shadow: rgba(0, 0, 0, 0.5);\n --border: rgba(0, 0, 0, 0.3);\n --tab-bg: #262335;\n --header-bg: #241B2F;\n --button-bg: var(--header-bg);\n --button-hover-bg: #342847;\n --button-active-bg: #4f3d6a;\n\n --fg: #acb3b3;\n --fg-alt: #ffcb6b;\n --fg-alt2: #91f5f8;\n /* --fg-alt2: #94afeb; */\n --fg-disabled: #585858;\n\n --accent: #f78c6c;\n --accent: #f07178;\n /* --accent-alt: #94afeb; */\n /* --accent-alt: #c792ea; */\n --accent-alt: #f78c6c;\n }\n}\n\n.tablature .tabTitle {\n font-family: Cascadia Mono Italic;\n color: var(--accent-alt);\n}\n\n.tablature .tabTimeline {\n color: var(--fg);\n}\n\n.tablature .tabFret {\n color: var(--accent);\n}\n\n.tablature .tabSpecial {\n color: var(--fg-alt2);\n}\n\n.tablature .tabText {\n color: var(--fg);\n}\n\n.tablature .tabChord {\n color: var(--fg-alt);\n}\n\n.tablature .tabHeader {\n color: var(--accent-alt);\n}\n\n.tablature .tabPrefix {\n color: var(--fg-alt);\n}\n\n.tablature .tabSuffix {\n font-family: Cascadia Mono Italic;\n color: var(--accent-alt);\n}\n\n.smallViewport {\n display: none;\n}\n\n/* max-width must be larger that sum of --title-width and --controls-max-width */\n@media only screen and (max-width: 1060px) {\n .smallViewport {\n display: inline;\n }\n\n .largeViewport {\n display: none;\n }\n\n :root {\n --tablature-font-size: 10px;\n --tablature-sup-font-size: 8px;\n --tablature-sub-font-size: 10px;\n --search-result-padding-vertical: 7px;\n --search-result-padding-horizontal: 15px;\n }\n}\n\n* {\n box-sizing: border-box;\n outline: none;\n\n scrollbar-color: var(--button-hover-bg) var(--tab-bg);\n}\n\n/* Minimalistic Webkit scrollbars for browsers not supporting scollbar-color (Chrome, Safari) */\n::-webkit-scrollbar {\n background-color: var(--button-hover-bg);\n cursor: pointer;\n}\n\n::-webkit-scrollbar-button {\n height: 0;\n width: 0;\n}\n\n::-webkit-scrollbar-corner {\n background-color: var(--tab-bg);\n}\n\n::-webkit-scrollbar-track-piece {\n background-color: var(--tab-bg);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--button-hover-bg);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--button-active-bg);\n}\n\n::-webkit-scrollbar-thumb:active {\n background-color: var(--button-active-bg);\n}\n\nbody {\n border: 0;\n margin: 0;\n padding: 0;\n background-color: var(--tab-bg);\n\n}\n\n.app {\n display: grid;\n grid-template-rows: 40px auto;\n border: 0;\n margin: 0;\n padding: 0;\n height: var(--app-height);\n position: sticky;\n\n font-family: Cascadia Mono;\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n border: 0;\n z-index: 100;\n\n justify-content: center;\n box-shadow: 0 0 6px 0 var(--shadow);\n background-color: var(--header-bg);\n}\n\n.title {\n margin: auto 0;\n padding: 0 10px;\n width: var(--title-width);\n}\n\n.title a {\n text-decoration: none;\n}\n\n.title h1 {\n margin: auto auto;\n\n color: var(--fg);\n font-family: Cascadia Mono;\n font-size: 24px;\n}\n\n/**************/\n/** CONTROLS **/\n/**************/\n\n.controls {\n display: flex;\n margin: 0;\n border: 0;\n max-width: var(--controls-max-width);\n}\n\n.controls * {\n background-color: var(--button-bg);\n font-family: Cascadia Tablature;\n font-size: 13px;\n color: var(--fg);\n}\n\nbutton.header-button,\n.header-button button {\n box-shadow: 0 0 3px 0 var(--shadow);\n height: 100%;\n border: 0;\n cursor: pointer;\n padding: 10px 20px;\n}\n\n.controls button:hover {\n background-color: var(--button-hover-bg);\n}\n\n.controls button:focus {\n background-color: var(--button-hover-bg);\n border-top: 1px solid var(--border);\n}\n\n.controls button:active {\n background-color: var(--button-active-bg);\n border-top: 1px solid var(--border);\n}\n\n.controls .selected {\n background-color: var(--button-hover-bg);\n}\n\n.controls button.disabled {\n color: var(--fg-disabled);\n}\n\n.controls button>* {\n background-color: inherit;\n color: inherit;\n}\n\nbutton.dropdown-item,\n.dropdown-item button {\n height: 100%;\n border: 0;\n border-right: 1px solid var(--border);\n cursor: pointer;\n padding: 10px 10px;\n min-width: 50px;\n text-align: center;\n}\n\n.dropdown-item {\n border-bottom: 1px solid var(--border);\n flex-direction: row;\n display: flex;\n}\n\n.dropdown-item>div {\n padding: 10px 10px;\n font-style: italic;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.dropdown-menu {\n position: absolute;\n box-shadow: 1px 1px 4px 0 var(--shadow);\n border-top: 1px solid var(--border);\n border-left: 1px solid var(--border);\n border-right: 1px solid var(--border);\n z-index: 1;\n flex-direction: column;\n display: flex;\n}\n\n.loadingIcon {\n padding: 18px 0px;\n width: 50px;\n}\n\n/************/\n/** SEARCH **/\n/************/\n\n/* TODO: make margins smaller on phone */\n.tablatureSearch * {\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n color: var(--fg);\n}\n\n.tablatureSearch {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-wrap: wrap;\n margin: 5px;\n}\n\n.searchBar {\n padding: 10px 30px;\n background-color: var(--button-hover-bg);\n border: 1px solid;\n border-color: var(--shadow);\n width: 300px;\n}\n\n.searchBar:focus {\n border-color: var(--fg);\n}\n\n.searchResults table,\n.searchResults th,\n.searchResults tr,\n.searchResults td {\n border: 0;\n border-collapse: collapse;\n}\n\n.searchResults tr:hover {\n background-color: var(--button-hover-bg);\n cursor: pointer;\n}\n\n.searchResults tr:focus {\n background-color: var(--button-hover-bg);\n}\n\n.searchResults tr:active {\n background-color: var(--button-active-bg);\n}\n\n.searchResults .selected {\n background-color: var(--button-hover-bg);\n}\n\n.searchResults td,\n.searchResults th {\n padding: var(--search-result-padding-vertical) var(--search-result-padding-horizontal);\n}\n\n/***************/\n/** TABLATURE **/\n/***************/\n\n.tablatureViewer {\n display: flex;\n overflow: auto;\n background-color: var(--tab-bg);\n}\n\n.tablatureViewer pre {\n margin: auto;\n border: 0;\n padding: 10px;\n}\n\n.tablature pre {\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n color: var(--fg);\n}\n\n.tablature sup,\n.tablature sub {\n vertical-align: baseline;\n position: relative;\n}\n\n.tablature sup {\n font-size: var(--tablature-sup-font-size);\n top: var(--tablature-sup-top);\n}\n\n.tablature sup .fontsize-compensation {\n font-size: calc(var(--tablature-font-size) - var(--tablature-sup-font-size));\n}\n\n.tablature sub {\n font-size: var(--tablature-sub-font-size);\n top: var(--tablature-sub-top);\n}\n\n.tablature sub .fontsize-compensation {\n font-size: calc(var(--tablature-font-size) - var(--tablature-sub-font-size));\n}\n\n.tablatureEditor {\n margin: 0;\n border: 0;\n padding: 10px 0 10px 10px;\n\n outline: none;\n resize: none;\n white-space: pre;\n\n background-color: var(--tab-bg);\n color: var(--fg);\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n}\n\n.tablaturePrinter {\n display: none;\n}\n\n@media print {\n :root {\n --tab-bg: #fff;\n --header-bg: #fff;\n --button-bg: var(--header-bg);\n --button-hover-bg: #ddd;\n --button-active-bg: #eee;\n\n --fg: #888;\n --fg-alt: #666;\n --fg-alt2: #666;\n --fg-disabled: #aaa;\n\n --accent: #000;\n --accent-alt: #000;\n }\n\n .app {\n display: none;\n }\n\n .tablaturePrinter {\n display: block;\n }\n}\n\n.hidden {\n display: none\n}\n"],"names":[],"version":3,"file":"index.295c5a99.css.map"}
\ No newline at end of file
diff --git a/docs/index.8097b105.css b/docs/index.8097b105.css
deleted file mode 100644
index e414f3d..0000000
--- a/docs/index.8097b105.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@font-face{font-family:Cascadia Tablature;src:url(CascadiaTablature.bd0a5a15.woff2)}@font-face{font-family:Cascadia Mono;src:url(CascadiaMono.11654244.woff2)}@font-face{font-family:Cascadia Mono Italic;src:url(CascadiaMonoItalic.252c0bde.woff2)}html{scroll-behavior:smooth}:root{--shadow:rgba(0,0,0,0.2);--border:rgba(40,160,162,0.4);--title-width:260px;--controls-max-width:900px;--app-height:100vh;--tablature-font-size:13px;--tablature-sup-font-size:10px;--tablature-sup-top:-0.3em;--tablature-sub-font-size:13px;--tablature-sub-top:0.2em;--search-result-padding-vertical:10px;--search-result-padding-horizontal:30px;--tab-bg:#fef8ec;--header-bg:#f9f1e1;--button-bg:#f5eddd;--button-hover-bg:#d1dfd0;--button-active-bg:#a9b5a9;--fg:#28a0a2;--fg-alt:#1c9ff0;--fg-alt2:#5ed0fa;--fg-disabled:#9ec5c5;--accent:#ff6a9e;--accent-alt:#f5970a}@media (prefers-color-scheme:dark){:root{--shadow:rgba(0,0,0,0.5);--border:rgba(0,0,0,0.3);--tab-bg:#262335;--header-bg:#241b2f;--button-bg:var(--header-bg);--button-hover-bg:#342847;--button-active-bg:#4f3d6a;--fg:#acb3b3;--fg-alt:#ffcb6b;--fg-alt2:#91f5f8;--fg-disabled:#585858;--accent:#f78c6c;--accent:#f07178;--accent-alt:#f78c6c}}.tablature .tabTitle{font-family:Cascadia Mono Italic;color:var(--accent-alt)}.tablature .tabTimeline{color:var(--fg)}.tablature .tabFret{color:var(--accent)}.tablature .tabSpecial{color:var(--fg-alt2)}.tablature .tabText{color:var(--fg)}.tablature .tabChord{color:var(--fg-alt)}.tablature .tabHeader{color:var(--accent-alt)}.tablature .tabPrefix{color:var(--fg-alt)}.tablature .tabSuffix{font-family:Cascadia Mono Italic;color:var(--accent-alt)}.smallViewport{display:none}@media only screen and (max-width:1060px){.smallViewport{display:inline}.largeViewport{display:none}:root{--tablature-font-size:10px;--tablature-sup-font-size:8px;--tablature-sub-font-size:10px;--search-result-padding-vertical:7px;--search-result-padding-horizontal:15px}}*{box-sizing:border-box;outline:none;scrollbar-color:var(--button-hover-bg) var(--tab-bg)}::-webkit-scrollbar{background-color:var(--button-hover-bg);cursor:pointer}::-webkit-scrollbar-button{height:0;width:0}::-webkit-scrollbar-corner,::-webkit-scrollbar-track-piece{background-color:var(--tab-bg)}::-webkit-scrollbar-thumb{background-color:var(--button-hover-bg)}::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:var(--button-active-bg)}body{background-color:var(--tab-bg)}.app,body{border:0;margin:0;padding:0}.app{display:grid;grid-template-rows:40px auto;height:var(--app-height);font-family:Cascadia Mono}.header{display:flex;flex-wrap:wrap;margin:0;border:0;z-index:100;justify-content:center;box-shadow:0 0 6px 0 var(--shadow);background-color:var(--header-bg)}.title{margin:auto 0;padding:0 10px;width:var(--title-width)}.title a{text-decoration:none}.title h1{margin:auto;color:var(--fg);font-family:Cascadia Mono;font-size:24px}.controls{display:flex;margin:0;border:0;max-width:var(--controls-max-width)}.controls *{background-color:var(--button-bg);font-family:Cascadia Tablature;font-size:13px;color:var(--fg)}.header-button button,button.header-button{box-shadow:0 0 3px 0 var(--shadow);height:100%;border:0;cursor:pointer;padding:10px 20px}.controls button:focus,.controls button:hover{background-color:var(--button-hover-bg)}.controls button:active,.controls button:focus{border-top:1px solid var(--border)}.controls button:active{background-color:var(--button-active-bg)}.controls .selected{background-color:var(--button-hover-bg)}.controls button.disabled{color:var(--fg-disabled)}.controls button>*{background-color:inherit;color:inherit}.dropdown-item button,button.dropdown-item{height:100%;border:0;border-right:1px solid var(--border);cursor:pointer;padding:10px;min-width:50px;text-align:center}.dropdown-item{border-bottom:1px solid var(--border);flex-direction:row;display:flex}.dropdown-item>div{padding:10px;font-style:italic;overflow:hidden;white-space:nowrap}.dropdown-menu{position:absolute;box-shadow:1px 1px 4px 0 var(--shadow);border-top:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border);z-index:1;flex-direction:column;display:flex}.loadingIcon{padding:18px 0;width:50px}.tablatureSearch *{font-family:Cascadia Tablature;font-size:var(--tablature-font-size);color:var(--fg)}.tablatureSearch{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap;margin:5px}.searchBar{padding:10px 30px;background-color:var(--button-hover-bg);border:1px solid;border-color:var(--shadow);width:300px}.searchBar:focus{border-color:var(--fg)}.searchResults table,.searchResults td,.searchResults th,.searchResults tr{border:0;border-collapse:collapse}.searchResults tr:hover{cursor:pointer}.searchResults tr:focus,.searchResults tr:hover{background-color:var(--button-hover-bg)}.searchResults tr:active{background-color:var(--button-active-bg)}.searchResults .selected{background-color:var(--button-hover-bg)}.searchResults td,.searchResults th{padding:var(--search-result-padding-vertical) var(--search-result-padding-horizontal)}.tablatureViewer{display:flex;overflow:auto;background-color:var(--tab-bg)}.tablatureViewer pre{margin:auto;border:0;padding:10px}.tablature pre{font-family:Cascadia Tablature;font-size:var(--tablature-font-size);color:var(--fg)}.tablature sub,.tablature sup{vertical-align:baseline;position:relative}.tablature sup{font-size:var(--tablature-sup-font-size);top:var(--tablature-sup-top)}.tablature sup .fontsize-compensation{font-size:calc(var(--tablature-font-size) - var(--tablature-sup-font-size))}.tablature sub{font-size:var(--tablature-sub-font-size);top:var(--tablature-sub-top)}.tablature sub .fontsize-compensation{font-size:calc(var(--tablature-font-size) - var(--tablature-sub-font-size))}.tablatureEditor{margin:0;border:0;padding:10px 0 10px 10px;outline:none;resize:none;white-space:pre;background-color:var(--tab-bg);color:var(--fg);font-family:Cascadia Tablature;font-size:var(--tablature-font-size)}.tablaturePrinter{display:none}@media print{:root{--tab-bg:#fff;--header-bg:#fff;--button-bg:var(--header-bg);--button-hover-bg:#ddd;--button-active-bg:#eee;--fg:#888;--fg-alt:#666;--fg-alt2:#666;--fg-disabled:#aaa;--accent:#000;--accent-alt:#000}.app{display:none}.tablaturePrinter{display:block}}.hidden{display:none}
-/*# sourceMappingURL=index.8097b105.css.map */
diff --git a/docs/index.8097b105.css.map b/docs/index.8097b105.css.map
deleted file mode 100644
index df8f544..0000000
--- a/docs/index.8097b105.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"mappings":"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","sources":["res/index.css"],"sourcesContent":["@font-face {\n font-family: Cascadia Tablature;\n src: url(\"CascadiaTablature.woff2\");\n}\n\n@font-face {\n font-family: Cascadia Mono;\n src: url(\"CascadiaMono.woff2\");\n}\n\n@font-face {\n font-family: Cascadia Mono Italic;\n src: url(\"CascadiaMonoItalic.woff2\");\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n:root {\n --shadow: rgba(0, 0, 0, 0.2);\n /* --border: rgba(0, 0, 0, 0.1); */\n --border: #28a0a266;\n\n --title-width: 260px;\n --controls-max-width: 900px;\n --app-height: 100vh;\n\n --tablature-font-size: 13px;\n --tablature-sup-font-size: 10px;\n --tablature-sup-top: -0.3em;\n --tablature-sub-font-size: 13px;\n --tablature-sub-top: 0.2em;\n\n --search-result-padding-vertical: 10px;\n --search-result-padding-horizontal: 30px;\n\n --tab-bg: #FEF8EC;\n --header-bg: #F9F1E1;\n --button-bg: #f5eddd;\n --button-hover-bg: #D1DFD0;\n --button-active-bg: #A9B5A9;\n\n --fg: #28a0a2;\n --fg-alt: #1c9ff0;\n --fg-alt2: #5ed0fa;\n --fg-disabled: #9ec5c5;\n\n --accent: #ff6a9e;\n --accent-alt: #f5970a;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --shadow: rgba(0, 0, 0, 0.5);\n --border: rgba(0, 0, 0, 0.3);\n --tab-bg: #262335;\n --header-bg: #241B2F;\n --button-bg: var(--header-bg);\n --button-hover-bg: #342847;\n --button-active-bg: #4f3d6a;\n\n --fg: #acb3b3;\n --fg-alt: #ffcb6b;\n --fg-alt2: #91f5f8;\n /* --fg-alt2: #94afeb; */\n --fg-disabled: #585858;\n\n --accent: #f78c6c;\n --accent: #f07178;\n /* --accent-alt: #94afeb; */\n /* --accent-alt: #c792ea; */\n --accent-alt: #f78c6c;\n }\n}\n\n.tablature .tabTitle {\n font-family: Cascadia Mono Italic;\n color: var(--accent-alt);\n}\n\n.tablature .tabTimeline {\n color: var(--fg);\n}\n\n.tablature .tabFret {\n color: var(--accent);\n}\n\n.tablature .tabSpecial {\n color: var(--fg-alt2);\n}\n\n.tablature .tabText {\n color: var(--fg);\n}\n\n.tablature .tabChord {\n color: var(--fg-alt);\n}\n\n.tablature .tabHeader {\n color: var(--accent-alt);\n}\n\n.tablature .tabPrefix {\n color: var(--fg-alt);\n}\n\n.tablature .tabSuffix {\n font-family: Cascadia Mono Italic;\n color: var(--accent-alt);\n}\n\n.smallViewport {\n display: none;\n}\n\n/* max-width must be larger that sum of --title-width and --controls-max-width */\n@media only screen and (max-width: 1060px) {\n .smallViewport {\n display: inline;\n }\n\n .largeViewport {\n display: none;\n }\n\n :root {\n --tablature-font-size: 10px;\n --tablature-sup-font-size: 8px;\n --tablature-sub-font-size: 10px;\n --search-result-padding-vertical: 7px;\n --search-result-padding-horizontal: 15px;\n }\n}\n\n* {\n box-sizing: border-box;\n outline: none;\n\n scrollbar-color: var(--button-hover-bg) var(--tab-bg);\n}\n\n/* Minimalistic Webkit scrollbars for browsers not supporting scollbar-color (Chrome, Safari) */\n::-webkit-scrollbar {\n background-color: var(--button-hover-bg);\n cursor: pointer;\n}\n\n::-webkit-scrollbar-button {\n height: 0;\n width: 0;\n}\n\n::-webkit-scrollbar-corner {\n background-color: var(--tab-bg);\n}\n\n::-webkit-scrollbar-track-piece {\n background-color: var(--tab-bg);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--button-hover-bg);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--button-active-bg);\n}\n\n::-webkit-scrollbar-thumb:active {\n background-color: var(--button-active-bg);\n}\n\nbody {\n border: 0;\n margin: 0;\n padding: 0;\n background-color: var(--tab-bg);\n\n}\n\n.app {\n display: grid;\n grid-template-rows: 40px auto;\n border: 0;\n margin: 0;\n padding: 0;\n height: var(--app-height);\n\n font-family: Cascadia Mono;\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n border: 0;\n z-index: 100;\n\n justify-content: center;\n box-shadow: 0 0 6px 0 var(--shadow);\n background-color: var(--header-bg);\n}\n\n.title {\n margin: auto 0;\n padding: 0 10px;\n width: var(--title-width);\n}\n\n.title a {\n text-decoration: none;\n}\n\n.title h1 {\n margin: auto auto;\n\n color: var(--fg);\n font-family: Cascadia Mono;\n font-size: 24px;\n}\n\n/**************/\n/** CONTROLS **/\n/**************/\n\n.controls {\n display: flex;\n margin: 0;\n border: 0;\n max-width: var(--controls-max-width);\n}\n\n.controls * {\n background-color: var(--button-bg);\n font-family: Cascadia Tablature;\n font-size: 13px;\n color: var(--fg);\n}\n\nbutton.header-button,\n.header-button button {\n box-shadow: 0 0 3px 0 var(--shadow);\n height: 100%;\n border: 0;\n cursor: pointer;\n padding: 10px 20px;\n}\n\n.controls button:hover {\n background-color: var(--button-hover-bg);\n}\n\n.controls button:focus {\n background-color: var(--button-hover-bg);\n border-top: 1px solid var(--border);\n}\n\n.controls button:active {\n background-color: var(--button-active-bg);\n border-top: 1px solid var(--border);\n}\n\n.controls .selected {\n background-color: var(--button-hover-bg);\n}\n\n.controls button.disabled {\n color: var(--fg-disabled);\n}\n\n.controls button>* {\n background-color: inherit;\n color: inherit;\n}\n\nbutton.dropdown-item,\n.dropdown-item button {\n height: 100%;\n border: 0;\n border-right: 1px solid var(--border);\n cursor: pointer;\n padding: 10px 10px;\n min-width: 50px;\n text-align: center;\n}\n\n.dropdown-item {\n border-bottom: 1px solid var(--border);\n flex-direction: row;\n display: flex;\n}\n\n.dropdown-item>div {\n padding: 10px 10px;\n font-style: italic;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.dropdown-menu {\n position: absolute;\n box-shadow: 1px 1px 4px 0 var(--shadow);\n border-top: 1px solid var(--border);\n border-left: 1px solid var(--border);\n border-right: 1px solid var(--border);\n z-index: 1;\n flex-direction: column;\n display: flex;\n}\n\n.loadingIcon {\n padding: 18px 0px;\n width: 50px;\n}\n\n/************/\n/** SEARCH **/\n/************/\n\n/* TODO: make margins smaller on phone */\n.tablatureSearch * {\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n color: var(--fg);\n}\n\n.tablatureSearch {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-wrap: wrap;\n margin: 5px;\n}\n\n.searchBar {\n padding: 10px 30px;\n background-color: var(--button-hover-bg);\n border: 1px solid;\n border-color: var(--shadow);\n width: 300px;\n}\n\n.searchBar:focus {\n border-color: var(--fg);\n}\n\n.searchResults table,\n.searchResults th,\n.searchResults tr,\n.searchResults td {\n border: 0;\n border-collapse: collapse;\n}\n\n.searchResults tr:hover {\n background-color: var(--button-hover-bg);\n cursor: pointer;\n}\n\n.searchResults tr:focus {\n background-color: var(--button-hover-bg);\n}\n\n.searchResults tr:active {\n background-color: var(--button-active-bg);\n}\n\n.searchResults .selected {\n background-color: var(--button-hover-bg);\n}\n\n.searchResults td,\n.searchResults th {\n padding: var(--search-result-padding-vertical) var(--search-result-padding-horizontal);\n}\n\n/***************/\n/** TABLATURE **/\n/***************/\n\n.tablatureViewer {\n display: flex;\n overflow: auto;\n background-color: var(--tab-bg);\n}\n\n.tablatureViewer pre {\n margin: auto;\n border: 0;\n padding: 10px;\n}\n\n.tablature pre {\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n color: var(--fg);\n}\n\n.tablature sup,\n.tablature sub {\n vertical-align: baseline;\n position: relative;\n}\n\n.tablature sup {\n font-size: var(--tablature-sup-font-size);\n top: var(--tablature-sup-top);\n}\n\n.tablature sup .fontsize-compensation {\n font-size: calc(var(--tablature-font-size) - var(--tablature-sup-font-size));\n}\n\n.tablature sub {\n font-size: var(--tablature-sub-font-size);\n top: var(--tablature-sub-top);\n}\n\n.tablature sub .fontsize-compensation {\n font-size: calc(var(--tablature-font-size) - var(--tablature-sub-font-size));\n}\n\n.tablatureEditor {\n margin: 0;\n border: 0;\n padding: 10px 0 10px 10px;\n\n outline: none;\n resize: none;\n white-space: pre;\n\n background-color: var(--tab-bg);\n color: var(--fg);\n font-family: Cascadia Tablature;\n font-size: var(--tablature-font-size);\n}\n\n.tablaturePrinter {\n display: none;\n}\n\n@media print {\n :root {\n --tab-bg: #fff;\n --header-bg: #fff;\n --button-bg: var(--header-bg);\n --button-hover-bg: #ddd;\n --button-active-bg: #eee;\n\n --fg: #888;\n --fg-alt: #666;\n --fg-alt2: #666;\n --fg-disabled: #aaa;\n\n --accent: #000;\n --accent-alt: #000;\n }\n\n .app {\n display: none;\n }\n\n .tablaturePrinter {\n display: block;\n }\n}\n\n.hidden {\n display: none\n}\n"],"names":[],"version":3,"file":"index.8097b105.css.map"}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 7903e5f..8646094 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-Tab Viewer
\ No newline at end of file
+Tab Viewer
\ No newline at end of file
diff --git a/res/index.css b/res/index.css
index c394810..2314b64 100644
--- a/res/index.css
+++ b/res/index.css
@@ -188,6 +188,7 @@ body {
margin: 0;
padding: 0;
height: var(--app-height);
+ position: sticky;
font-family: Cascadia Mono;
}