@media (prefers-reduced-motion:reduce){:root:root{--motion-fast:0s;--motion-recenter:0s;--motion-glow:0s;--motion-vibrate:0s;--motion-vibrate-amplitude:0px}}:root:root[data-reduce-motion=true]{--motion-fast:0s;--motion-recenter:0s;--motion-glow:0s;--motion-vibrate:0s;--motion-vibrate-amplitude:0px}:root{color-scheme:var(--color-scheme);accent-color:var(--color-accent);background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);font-size:var(--font-size-base)}body{background:var(--color-bg);margin:0}button,input,select{font:inherit}input:not([type=range]):not([type=checkbox]):not([type=radio]),select{border-color:var(--color-text-muted)}:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-width)}h1,h2,h3{margin:0}.app{max-width:110rem;padding:var(--space-3);margin:0 auto}.app-header{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.app-header h1{font-size:var(--font-size-xl);color:var(--color-accent)}@media (width<=47.99rem){.app-header h1{font-size:var(--font-size-lg)}.app-header,.header-links{gap:var(--space-2)}.layout-choice select{max-width:6.5rem;padding:0 var(--space-1)}}.header-links{align-items:center;gap:var(--space-3);margin-right:auto;display:flex}.header-links a,.app-header a{color:var(--color-text-muted)}.layout,.layout-top{gap:var(--space-3);flex-direction:column;display:flex}.col{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.col[hidden],.minimizable[hidden]{display:none}.row-neck,.row-strip{min-width:0}@media (width>=48rem){.layout-top{flex-flow:wrap;align-items:flex-start}.col-center{flex:100%;order:-1}.col-left,.col-right{flex:1 1 0}}@media (width>=64rem){.col-center{flex:1 1 0;order:0}.col-left{flex:0 22rem;min-width:17rem}.col-right{flex:100%}.no-center .col-left{flex-grow:1}}@media (width>=100rem){.layout-top{flex-wrap:nowrap}.col-right{flex:0 25rem;min-width:19rem}.no-center .col-right{flex-grow:1}}.minimizable{position:relative}.minimizable:not(:has(.panel)){display:none}.minimizable>.panel>:first-child{padding-right:calc(var(--tap-size) * .85)}.minimize-button{top:var(--space-2);right:var(--space-2);z-index:1;width:calc(var(--tap-size) * .75);height:calc(var(--tap-size) * .75);border:var(--border-width) solid transparent;border-radius:var(--radius);color:var(--color-text-muted);font-size:var(--font-size-lg);cursor:pointer;background:0 0;padding:0;line-height:1;position:absolute}.minimize-button:hover{border-color:var(--color-border);background:var(--color-surface-2);color:var(--color-text)}@media (pointer:coarse){.minimize-button{width:var(--tap-size);height:var(--tap-size)}.minimizable>.panel>:first-child{padding-right:calc(var(--tap-size) + var(--space-1))}}.tile-tray{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.tile{box-sizing:border-box;width:calc(var(--tap-size) * 1.8);height:calc(var(--tap-size) * 1.8);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:flex-end;padding:0;display:flex;overflow:hidden}.tile:hover,.tile:focus-visible{border-color:var(--color-accent)}.tile-label{max-width:calc(100% - 2 * var(--space-1));margin:var(--space-1);padding:0 var(--space-1);box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius);background:var(--color-overlay);color:var(--color-text);font-size:var(--font-size-sm);overflow:hidden}.tile-input{background:var(--tile-input) center / cover}.tile-style{background:var(--tile-style) center / cover}.tile-suggest{background:var(--tile-suggest) center / cover}.tile-keys{background:var(--tile-keys) center / cover}.tile-web{background:var(--tile-web) center / cover}.tile-chord{background:var(--tile-chord) center / cover}.tile-neck{background:var(--tile-neck) center / cover}.tile-progression{background:var(--tile-progression) center / cover}.tile-next{background:var(--tile-next) center / cover}@media (width<=47.99rem){.tile{width:calc(var(--tap-size) * 1.35);height:calc(var(--tap-size) * 1.35)}}.panel{padding:var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-width:0}.panel-title{margin-bottom:var(--space-2);color:var(--color-text);font-size:var(--font-size-base);font-weight:600}.subhead{margin:var(--space-3) 0 var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:400}.note-text,.rel-text{color:var(--color-text-muted);font-size:var(--font-size-sm)}.mono{font-family:var(--font-mono)}.chip,.switch{min-height:var(--tap-size);padding:var(--space-1) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);cursor:pointer}.chip-small{min-height:calc(var(--tap-size) * .85);padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm)}.chip:hover,.switch:hover,.mini:hover,.pin:hover{border-color:var(--color-accent)}.chip:disabled,.mini:disabled{opacity:.45;cursor:default}.chip-active{border-color:var(--color-accent);color:var(--color-accent)}.link-button{min-height:calc(var(--tap-size) * .7);padding:var(--space-1) 0;color:var(--color-accent);font-size:var(--font-size-sm);cursor:pointer;background:0 0;border:none;align-items:center;text-decoration:underline;display:inline-flex}.mini,.pin{min-height:calc(var(--tap-size) * .85);min-width:calc(var(--tap-size) * .85);padding:0 var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer}.chips,.examples{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.music-input{box-sizing:border-box;width:100%;padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-lg)}.input-label{margin-bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);display:block}.newer-version{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-accent);border-radius:var(--radius);color:var(--color-text)}.update-notice{margin:var(--space-3) max(var(--space-3), calc((100% - 110rem) / 2)) 0;padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-accent);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text)}.errors{margin:var(--space-2) 0 0;padding-left:var(--space-4);color:var(--color-error)}.notes{font-family:var(--font-mono);font-size:var(--font-size-lg)}.typed{margin-top:var(--space-3)}.chord-chip{min-height:var(--tap-size);min-width:var(--tap-size);padding:var(--space-1) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-lg);cursor:pointer}.chord-chip.chip-active{background:var(--color-accent);color:var(--color-on-accent)}.keys{margin:0;padding:0;list-style:none}.key{padding:var(--space-2) 0;border-bottom:var(--border-width) solid var(--color-border)}.key-pinned .key-name{color:var(--color-accent)}.key-head,.key-move-head{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.key-name{font-size:var(--font-size-lg);flex:0 0 9.5rem}.key-bar{min-width:3rem;height:var(--space-2);border-radius:var(--radius);background:var(--color-bg);flex:1;overflow:hidden}.key-bar span{background:var(--color-accent);height:100%;display:block}.key-score{text-align:right;color:var(--color-text-muted);font-size:var(--font-size-sm);flex:0 0 1.75rem}.numerals{margin-top:var(--space-1);color:var(--color-accent);font-family:var(--font-mono)}.key-more summary,.key-moves summary{padding:var(--space-1) 0;color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer}.key-moves{margin-top:var(--space-3)}.key-moves ul{margin:0;padding:0;list-style:none}.key-moves li{padding:var(--space-2) 0;border-bottom:var(--border-width) solid var(--color-border)}.reasons{margin:var(--space-1) 0 0;padding-left:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-sm)}.key-info{gap:var(--space-1) var(--space-3);margin:var(--space-2) 0 0;font-size:var(--font-size-sm);grid-template-columns:max-content 1fr;display:grid}.key-info dt{color:var(--color-text-muted)}.key-info dd{margin:0}.pinned{font-size:var(--font-size-sm)}.web-toolbar{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.web-toolbar .panel-title{color:var(--color-text);font-size:var(--font-size-lg);margin:0}.adventure{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-sm);display:flex}.adventure-name{min-width:3rem;color:var(--color-text)}.adventure{min-width:0;max-width:100%}.adventure input[type=range]{flex:6rem;min-width:4rem}.web-stage{margin-top:var(--space-2);position:relative;overflow-x:auto}.web-canvas{max-width:max(78vh, var(--web-min,0px));margin:0 auto;position:relative}@media (width<=47.99rem){.web-canvas{min-width:max(30rem, var(--web-min,0px))}}.melody-fits p{margin:var(--space-2) 0 var(--space-1)}.input-row{align-items:center}.web-swipe-hint{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);text-align:center;display:none}@media (width<=47.99rem){.web-swipe-hint{display:block}}.web{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;display:block}.web-recenter{transform-origin:0 0;animation:web-in var(--motion-recenter) var(--motion-easing)}@keyframes web-in{0%{transform:translate(var(--from-x), var(--from-y)) scale(.3);opacity:0}to{opacity:1;transform:none}}.web-ring{fill:none;stroke:var(--web-ring);stroke-width:1px;stroke-dasharray:3 5}.web-edge{stroke:var(--web-edge);stroke-linecap:round}.web-center-node rect{fill:var(--web-center)}.web-center-node text{fill:var(--color-on-accent);font-family:var(--font-mono);font-size:var(--web-center-font-size);font-weight:700}.web-node{cursor:pointer;outline:none}.web-node-bg{fill:var(--web-node-bg);stroke:var(--web-edge);stroke-width:1px;transition:stroke var(--motion-fast)}.web-node text{fill:var(--web-node-text);font-family:var(--font-mono);font-size:var(--web-font-size);pointer-events:none}.web-node:hover .web-node-bg,.web-node:focus-visible .web-node-bg{stroke:var(--color-accent);stroke-width:2px}.web-add{cursor:pointer;outline:none}.web-add circle{fill:var(--color-accent)}.web-add:focus-visible circle{stroke:var(--color-text);stroke-width:2.5px}.web-add text{pointer-events:none;fill:var(--color-on-accent);font-family:var(--font-ui);font-size:var(--web-center-font-size);font-weight:700}.web-node-selected .web-node-bg{stroke:var(--color-accent);stroke-width:2.5px}.web-cat-diatonic{fill:var(--web-diatonic)}.web-cat-extension{fill:var(--web-extension)}.web-cat-relativeParallel{fill:none;stroke:var(--web-relativeParallel);stroke-width:2.5px}.web-cat-secondaryDominant{fill:var(--web-secondaryDominant)}.web-cat-secondaryLeadingTone{fill:var(--web-secondaryLeadingTone)}.web-cat-borrowed{fill:var(--web-borrowed)}.web-cat-tritoneSub{fill:var(--web-tritoneSub)}.web-cat-neoRiemannian{fill:var(--web-neoRiemannian)}.web-cat-chromaticMediant{fill:var(--web-chromaticMediant)}.web-tip{z-index:2;--tip-dx:0px;--tip-dy:0px;--tip-room:18rem;box-sizing:border-box;width:max-content;max-width:min(18rem, 80vw, var(--tip-room));padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-overlay);font-size:var(--font-size-sm);transform:translate(calc(-50% + var(--tip-dx)), calc(-100% - var(--space-4) + var(--tip-dy)));position:absolute}.web-tip-below{transform:translate(calc(-50% + var(--tip-dx)), calc(var(--space-4) + var(--tip-dy)))}.web-tip-head{margin-bottom:var(--space-1);color:var(--color-accent)}.web-tip-actions{gap:var(--space-2);margin-top:var(--space-2);display:flex}.tooltip{z-index:10;box-sizing:border-box;width:max-content;max-width:min(18rem,90vw);padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-overlay);color:var(--color-text);font-size:var(--font-size-sm);pointer-events:none;visibility:hidden;position:fixed;top:0;left:0}.legend{gap:var(--space-1) var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.legend-item{align-items:center;gap:var(--space-1);min-height:calc(var(--tap-size) * .8);padding:0 var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;display:inline-flex}.legend-off{opacity:.65;text-decoration:line-through}.legend-marker{width:1rem;height:1rem}.detail-head{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.detail-name{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-xl)}.detail-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.tones{margin-top:var(--space-3);border-collapse:collapse;font-family:var(--font-mono)}.tones th{padding-right:var(--space-3);color:var(--color-text-muted);font-family:var(--font-ui);font-size:var(--font-size-sm);text-align:left;font-weight:400}.tones td{min-width:2.25rem;padding:var(--space-1) var(--space-1);text-align:center}.detail-function{margin:var(--space-3) 0 0}.style-panel .chips{margin-top:0}.style-only{margin-top:var(--space-1);font-size:var(--font-size-sm)}.detail-styles{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.style-fallback{margin:0 0 var(--space-2)}.web-next-mark{fill:var(--color-accent);stroke:var(--color-surface);stroke-width:3px;paint-order:stroke;font-family:var(--font-ui);font-size:var(--web-center-font-size);pointer-events:none;font-weight:700}.next-legend{margin:var(--space-2) 0 0}.row-strip .next-panel{margin-top:var(--space-3)}.next-list{gap:var(--space-2);flex-direction:column;max-width:48rem;margin:0;padding:0;list-style:none;display:flex}.next-item{align-items:center;gap:var(--space-1) var(--space-2);grid-template-columns:minmax(4.5rem,auto) 3.5rem minmax(0,1fr) auto;grid-template-areas:"chord numeral reason add";display:grid}.next-chord{grid-area:chord;justify-self:start}.next-numeral{color:var(--color-text-muted);font-size:var(--font-size-sm);grid-area:numeral}.next-reason{grid-area:reason}.next-add{grid-area:add}@media (width<=47.99rem){.next-item{grid-template-columns:minmax(4.5rem,auto) minmax(0,1fr) auto;grid-template-areas:"chord numeral add""reason reason reason"}}.web-style-ring{fill:none;stroke:var(--color-accent);stroke-width:1.5px;stroke-dasharray:4 3;pointer-events:none}.web-node-dim{opacity:.7;transition:opacity var(--motion-fast)}.web-node-dim:hover,.web-node-dim:focus-visible,.web-node-dim.web-node-selected{opacity:.9}.style-legend{margin:var(--space-2) 0 0}.web-tip-style{margin-top:var(--space-1);color:var(--color-accent)}.suggest-style+.suggest-style{margin-top:var(--space-3)}.suggest-group-title{margin:var(--space-2) 0 var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-sm)}.suggest-list{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.suggest-item{align-items:center;gap:var(--space-1);display:flex}.suggest-numeral{color:var(--color-text-muted);font-size:var(--font-size-sm)}.style-badges{justify-content:center;gap:var(--space-1);flex-wrap:wrap;min-height:1.4em;display:flex}.style-badge{min-height:1.6em;padding:0 var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);font:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0}.style-badge:hover,.style-badge[aria-expanded=true]{border-color:var(--color-accent)}.style-badge-why{margin-top:var(--space-1);color:var(--color-text);font-size:var(--font-size-sm);text-align:left;display:block}.style-blurbs{margin:var(--space-2) 0 0;padding:0;list-style:none}.style-badge-active{border-color:var(--color-accent);color:var(--color-accent)}.editing{margin:var(--space-3) 0 0;padding:var(--space-2);border:var(--border-width) solid var(--color-accent);border-radius:var(--radius);font-size:var(--font-size-sm)}.voicings{gap:var(--space-3) var(--space-2);grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));display:grid}.voicing{padding:var(--space-1);border:var(--border-width) solid transparent;border-radius:var(--radius);text-align:center;flex-direction:column;margin:0;display:flex}.voicing-current{border-color:var(--color-accent)}.voicing figcaption{gap:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-sm);flex-direction:column;display:flex}.voicing-actions{justify-content:center;gap:var(--space-1);padding-top:var(--space-1);flex-wrap:wrap;margin-top:auto;display:flex}.voicing-actions button{white-space:nowrap}.voicing-play{cursor:pointer;background:0 0;border:none;padding:0}.voicing-play:hover .cb-dot,.voicing-play:hover .cb-barre{fill:var(--color-text)}.chord-box .cb-string,.chord-box .cb-fret{stroke:var(--color-text-muted);stroke-width:var(--chord-box-line)}.chord-box .cb-nut{stroke:var(--color-text);stroke-width:var(--chord-box-nut)}.chord-box .cb-dot,.chord-box .cb-barre{fill:var(--color-accent)}.chord-box .cb-finger{fill:var(--color-on-accent);font-family:var(--font-ui);font-size:var(--chord-box-finger-size);font-weight:700}.chord-box .cb-mark,.chord-box .cb-label{fill:var(--color-text-muted);font-family:var(--font-ui);font-size:var(--chord-box-label-size)}.neck-toolbar{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.neck-toolbar .chips{margin:0}.neck-scroll{margin-top:var(--space-2);overflow-x:auto}.fretboard{min-width:42rem;padding:var(--space-2) 0;border-radius:var(--radius);background:var(--fb-bg);overflow:hidden}.fb-3d{perspective:var(--fb-perspective)}.fb-svg{width:100%;display:block}.fb-3d .fb-svg{transform:rotateX(calc(var(--fb-tilt) * .9)) rotateY(calc(var(--fb-tilt) * -.35)) scale(.96)}.fb-3d.fb-mirror .fb-svg{transform:rotateX(calc(var(--fb-tilt) * .9)) rotateY(calc(var(--fb-tilt) * .35)) scale(.96)}.fb-stop-wood-1{stop-color:var(--fb-wood-1)}.fb-stop-wood-2{stop-color:var(--fb-wood-2)}.fb-flat .fb-wood{fill:var(--fb-wood-2)}.fb-grain{fill:none;stroke:var(--fb-wood-grain);stroke-width:1.2px}.fb-grain-layer{opacity:.55}.fb-fret{stroke:var(--fb-fret);stroke-width:2.4px}.fb-fret-highlight{stroke:var(--fb-fret-highlight);stroke-width:.7px;opacity:.8}.fb-fret-shadow{stroke:var(--fb-fret-shadow);stroke-width:2.5px;opacity:var(--fb-shadow-strength)}.fb-nut{fill:var(--fb-nut)}.fb-inlay{fill:var(--fb-inlay);opacity:.85}.fb-fret-number,.fb-mute{fill:var(--fb-label);font-family:var(--font-ui);font-size:var(--fb-font-size)}.fb-mute{fill:var(--fb-wood-text);font-size:var(--font-size-base)}.fb-capo{fill:var(--fb-capo)}.fb-string{stroke:var(--fb-string);stroke-width:calc(var(--fb-string-width-high) + (var(--fb-string-width-low) - var(--fb-string-width-high)) * var(--string-mix))}.fb-string-sheen{stroke-width:calc(( var(--fb-string-width-high) + (var(--fb-string-width-low) - var(--fb-string-width-high)) * var(--string-mix) ) * .4);opacity:.7}.fb-stop-sheen{stop-color:var(--fb-string-sheen)}.fb-stop-sheen-fade{stop-color:var(--fb-string-sheen);stop-opacity:.2}.fb-drop{flood-color:var(--fb-shadow-color);flood-opacity:var(--fb-shadow-strength)}.fb-dot{fill:var(--fb-dot)}.fb-dot-root{fill:var(--fb-root-dot)}.fb-dot-label{fill:var(--fb-dot-text);font-family:var(--font-ui);font-size:var(--fb-font-size);pointer-events:none;font-weight:700}.fb-scale-dot{fill:var(--fb-scale-dot)}.fb-sv circle{pointer-events:none}.fb-sv-root circle{fill:var(--fb-root-dot)}.fb-sv-chord circle{fill:var(--fb-dot)}.fb-sv-scale circle{fill:var(--fb-scale-dot)}.fb-sv-outside circle{fill:none;stroke:var(--fb-root-dot);stroke-width:2px;stroke-dasharray:3 2.5}.fb-sv-away{opacity:.2}.fb-sv-label{fill:var(--fb-dot-text);font-family:var(--font-ui);font-size:var(--fb-font-size);pointer-events:none;font-weight:700}.fb-sv-scale .fb-sv-label,.fb-sv-outside .fb-sv-label{fill:var(--fb-wood-text);font-size:calc(var(--fb-font-size) - 2px);font-weight:400}.scale-controls{align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.scale-controls .chips{margin-top:0}.sv-picker,.sv-positions{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.sv-legend{flex-basis:100%;margin:0}.fb-glow{fill:none;stroke:var(--fb-glow);stroke-width:3px;opacity:0;animation:fb-glow var(--motion-glow) ease-out both;pointer-events:none}.fb-glow-static{opacity:1;animation:none}@keyframes fb-glow{0%{opacity:0}12%{opacity:1}to{opacity:0}}.fb-vibrate{animation:fb-vibrate var(--motion-vibrate) ease-out both}@keyframes fb-vibrate{0%,to{transform:translateY(0)}15%{transform:translateY(var(--motion-vibrate-amplitude))}35%{transform:translateY(calc(var(--motion-vibrate-amplitude) * -.8))}55%{transform:translateY(calc(var(--motion-vibrate-amplitude) * .5))}75%{transform:translateY(calc(var(--motion-vibrate-amplitude) * -.25))}}.fb-tap{fill:#0000;cursor:pointer}.fb-tap:hover{fill:var(--fb-scale-dot)}.fb-tap:focus-visible{fill:var(--fb-scale-dot);stroke:var(--fb-wood-text);stroke-width:3px;outline:none}.listen{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius)}.listen-note{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.listen-name{min-width:3ch;color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-xl)}.listen-cents{align-items:center;gap:var(--space-2);display:inline-flex}.listen-meter{border-radius:var(--radius);background:var(--color-surface-2);border:var(--border-width) solid var(--color-text-muted);width:8rem;height:.5rem;position:relative}.listen-zone{background:var(--color-text-muted);opacity:.45;width:10%;position:absolute;top:0;bottom:0;left:45%}.listen-centre{background:var(--color-text-muted);width:1px;position:absolute;top:-.2rem;bottom:-.2rem;left:50%}.listen-needle{background:var(--color-text);width:.2rem;height:1rem;margin-left:-.1rem;position:absolute;top:-.25rem}.listen-in-tune{background:var(--color-accent)}.identify{align-items:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.strip-toolbar{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.strip-toolbar .panel-title{margin:0}.smooth-controls{gap:var(--space-2);flex-wrap:wrap;display:flex}.smooth-note{margin:var(--space-2) 0 0}.strip{gap:var(--space-2);margin:var(--space-2) 0 0;padding:0 0 var(--space-2);list-style:none;display:flex;overflow-x:auto}.strip-item{align-items:center;gap:var(--space-1);padding:var(--space-1);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);flex-direction:column;flex:none;display:flex}.strip-playing{border-color:var(--color-accent);background:var(--color-surface-2)}.strip-editing{outline:var(--focus-width) solid var(--color-accent)}.strip-dragging{opacity:.5}.strip-chord{padding:var(--space-1);color:var(--color-text);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;display:flex}.strip-chord .chord-box{width:5.5rem;height:auto}.strip-symbol{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-lg)}.strip-frets{color:var(--color-text-muted);font-size:var(--font-size-sm)}.strip-controls{gap:var(--space-1);display:flex}.key-tools{align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.key-tools-group{align-items:center;gap:var(--space-1);display:inline-flex}.capo-options{flex-basis:100%}.capo-options ul{gap:var(--space-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.capo-options li{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.strip-shape-name{font-size:var(--font-size-sm)}.strip-grip{min-width:calc(var(--tap-size) * .75);min-height:calc(var(--tap-size) * .75);border-radius:var(--radius);color:var(--color-text-muted);font-size:var(--font-size-lg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.strip-dragging .strip-grip{color:var(--color-accent);cursor:grabbing}.strip-drop-before{box-shadow:calc(var(--focus-width) * -2) 0 0 var(--color-accent)}.strip-drop-after{box-shadow:calc(var(--focus-width) * 2) 0 0 var(--color-accent)}.strip-length{align-items:center;gap:var(--space-1);display:flex}.length-label{min-width:4.5rem;color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center;background:0 0;border:none;padding:0}.length-own{color:var(--color-accent);cursor:pointer}.length-label:disabled{opacity:1;cursor:default}.chart{align-items:stretch;gap:var(--space-1);margin:var(--space-2) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.chart-meter{padding:0 var(--space-1);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--font-size-sm);text-align:center;flex-direction:column;justify-content:center;line-height:1;display:flex}.chart-bar{border-inline-start:var(--border-width) solid var(--color-text-muted);flex:none;width:7rem;display:flex}.chart-chord,.chart-rest{flex-basis:0;min-width:0}.chart-chord{min-height:calc(var(--tap-size) * .75);padding:0 var(--space-1);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}.chart-held{color:var(--color-text-muted);background:0 0}.chart-playing{border-color:var(--color-accent);color:var(--color-accent)}.chart-editing{outline:var(--focus-width) solid var(--color-accent)}.strip-files{align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.strip-save,.strip-load,.strip-export{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.strip-files input,.strip-files select,.player input:not([type=checkbox]),.player select,.layout-choice select,.sv-picker select,.smooth-controls select,.settings select,.settings input:not([type]){min-height:calc(var(--tap-size) * .85);padding:0 var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text)}.export-text{padding:var(--space-1) var(--space-2);border-radius:var(--radius);background:var(--color-bg);font-size:var(--font-size-sm);-webkit-user-select:all;user-select:all;white-space:pre-line}.volume,.player{align-items:center;gap:var(--space-2) var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);flex-wrap:wrap;display:flex}.volume label,.adventure{align-items:center;gap:var(--space-2);display:inline-flex}.volume{position:relative}.audio-problem{z-index:5;max-width:min(20rem,90vw);margin-top:var(--space-1);color:var(--color-error);font-size:var(--font-size-sm);text-align:right;position:absolute;top:100%;right:0}@media (width<=47.99rem){.volume label{display:none}}.player input[type=number]{width:4rem}.tap-in{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;flex-basis:100%;display:flex}.tap-pad{justify-content:center;align-items:center;gap:var(--space-1);box-sizing:border-box;width:calc(var(--tap-size) * 4);height:calc(var(--tap-size) * 2.5);padding:var(--space-2);border:var(--border-width) solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.tap-pad:disabled{cursor:default;opacity:.5}.tap-pad-count,.tap-pad-tap{border-color:var(--color-accent)}.tap-pad-tap .tap-pad-big,.tap-pad-count .tap-pad-big{color:var(--color-accent)}.tap-pad-big{font-size:var(--font-size-xl);font-weight:600}.tap-pad-small{color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center}.tap-side{gap:var(--space-2);flex-direction:column;flex:12rem;display:flex}.tap-status{min-height:calc(var(--font-size-sm) * 3);margin:0}.tap-preview{gap:var(--space-2);font-size:var(--font-size-lg);display:flex}.tap-preview span{flex-direction:column;align-items:center;display:flex}.tap-preview small{color:var(--color-text-muted);font-size:var(--font-size-sm)}.strip-mystery{width:4.5rem;height:5rem;margin:var(--space-1) auto;border:var(--border-width) dashed var(--color-text-muted);border-radius:var(--radius);color:var(--color-text-muted);font-size:var(--font-size-xl);place-items:center;display:grid}.pattern-editor{gap:var(--space-1);flex-basis:100%;grid-template-columns:repeat(8,minmax(0,1fr));max-width:28rem;display:grid}.pattern-editor>.note-text{grid-column:1/-1}.pattern-slot{min-width:0;min-height:var(--tap-size);padding:var(--space-1) 0;border:var(--border-width) solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);font-size:var(--font-size-lg);cursor:pointer;flex-direction:column;align-items:center;line-height:1;display:inline-flex}.pattern-count{color:var(--color-text-muted);font-size:var(--font-size-sm)}.pattern-down{border-color:var(--color-accent);color:var(--color-accent)}.pattern-rest{color:var(--color-text-muted)}.settings{max-width:min(34rem,92vw);max-height:90dvh;padding:var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);overflow-y:auto}.settings::backdrop{background:var(--color-overlay)}.settings-form{gap:var(--space-3);flex-direction:column;display:flex}.settings-form>label,.settings fieldset>label:not(.check){gap:var(--space-1);color:var(--color-text-muted);font-size:var(--font-size-sm);flex-direction:column;display:flex}.settings fieldset{gap:var(--space-2);padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius);flex-direction:column;margin:0;display:flex}.settings fieldset>.chip{align-self:flex-start}.settings legend{color:var(--color-text-muted);font-size:var(--font-size-sm)}.check{align-items:center;gap:var(--space-2);min-height:calc(var(--tap-size) * .8);display:flex}.settings-head{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.settings-actions{bottom:calc(-1 * var(--space-4));justify-content:space-between;align-items:center;gap:var(--space-3);margin:0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid var(--color-border);background:var(--color-surface);flex-wrap:wrap;display:flex;position:sticky}.import-text{box-sizing:border-box;width:100%;min-height:10rem;padding:var(--space-2);border:var(--border-width) solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-sm);resize:vertical}.import-sections{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.import-sections li{align-items:center;gap:var(--space-2);grid-template-columns:minmax(5rem,auto) minmax(0,1fr) auto;display:grid}.import-name{color:var(--color-text);font-size:var(--font-size-sm)}.import-chords{color:var(--color-text-muted);font-size:var(--font-size-sm);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.import-timing{min-width:0;margin-top:calc(var(--space-2) * -1);grid-column:2/-1}.import-timing select{max-width:100%;font-size:var(--font-size-sm)}.import-meter{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.tour{right:var(--space-3);bottom:var(--space-3);left:var(--space-3);z-index:20;max-width:30rem;padding:var(--space-3);border:var(--border-width) solid var(--color-accent);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);box-shadow:0 .5rem 2rem var(--color-overlay);margin:0 auto;position:fixed}.tour p{margin:var(--space-1) 0 var(--space-2)}.tour-count{margin:0}.tour-title:focus{outline:none}.tour-title{color:var(--color-accent);font-size:var(--font-size-lg);margin:0}.tour-actions,.tour-steps{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.tour-target{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--space-1)}.chords{border-collapse:collapse;width:100%;font-family:var(--font-mono)}.chords th,.chords td{padding:var(--space-1) var(--space-2);border-bottom:var(--border-width) solid var(--color-border);text-align:left}.chords .symbol{color:var(--color-accent)}.debug-table td{vertical-align:middle}.ear-check{margin-top:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-width) solid var(--color-border)}.ear-check h2{margin:var(--space-3) 0 var(--space-2);color:var(--color-text);font-size:var(--font-size-lg)}.about-section{max-width:42rem;margin-top:var(--space-4)}.about-section h2{margin:0 0 var(--space-2);color:var(--color-text);font-size:var(--font-size-lg)}.about a{color:var(--color-accent)}@media (pointer:coarse){:root input,:root select,:root textarea{font-size:1rem}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.print-sheet{display:none}@media print{body>:not(.print-sheet){display:none}body{background:var(--color-bg)}.print-sheet{color:var(--color-text);font-family:var(--font-ui);display:block}.print-sheet h1{margin:0 0 var(--space-1);font-size:var(--font-size-xl)}.print-key{margin:0 0 var(--space-3);color:var(--color-text-muted)}.print-chords{gap:var(--space-3);grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;display:grid}.print-chords li{align-items:center;gap:var(--space-1);break-inside:avoid;flex-direction:column;display:flex}.print-symbol{font-size:var(--font-size-lg);font-weight:600}.print-chords .chord-box{width:9rem;height:auto}.print-text{margin-top:var(--space-4);white-space:pre-line}.print-footer{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm)}}