.eolio-trail { scroll-margin-top: 1.5rem; }
.eolio-trail .jonio-fretboard { overflow: hidden; }
.eolio-trail .jonio-fretboard svg { display: block; width: 100%; max-width: 100%; height: auto; }
.eolio-trail .eolio-board-segment + .eolio-board-segment { margin-top: .5rem; }
.eolio-trail .eolio-board-segment small { display: block; padding: .25rem .3rem; color: #d7ecdf; font-size: .85rem; }
.eolio-trail .jonio-controls input[type=range] { accent-color: #70d5f2; }
.eolio-trail .jonio-intro { border-left: 4px solid #53d5ff; }
.eolio-trail .jonio-help { color: #def0e6; }
@media (max-width: 600px) {
  .eolio-trail .jonio-fretboard svg { width: 100%; height: auto; }
  .eolio-trail .jonio-fretboard { padding: .3rem; }
}

.eolio-trail .jonio-controls select{max-width:100%;background:#10251f;color:#ecfff4;border:1px solid #548874;border-radius:8px;padding:10px;font-size:1rem;min-height:44px}
.eolio-trail .jonio-controls label{font-size:1rem;min-width:0;flex-wrap:wrap}.eolio-trail .jonio-exercises pre{font-size:1.1rem;line-height:1.65;white-space:pre;touch-action:pan-x pan-y}.eolio-tab-hint{display:block;font-size:.875rem;color:#ccebdd}.eolio-timing{font-size:.9rem;color:#cbe2d7}.eolio-technique{border-left:3px solid #78e6bf;padding:10px;background:#10291f}#eolioStatus{font-size:1rem}.eolio-trail .jonio-module summary small{font-size:.9rem}.eolio-trail .eolio-board-segment small{font-size:.9rem}