.jonio-trail{scroll-margin-top:1.5rem}.jonio-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem;border:1px solid #347a62;border-radius:14px;background:#10251f}.jonio-controls label{display:flex;align-items:center;gap:.5rem;color:#d9f0e4;font-size:.9rem}.jonio-controls input[type=number]{width:4.5rem;padding:.4rem;border-radius:6px}.jonio-help{font-size:.95rem;line-height:1.5}.jonio-modules{display:grid;gap:.7rem;margin:1rem 0}.jonio-module{border:1px solid #356650;border-radius:12px;background:#13241f;overflow:hidden}.jonio-module summary{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:1rem;cursor:pointer;list-style:none;color:#effff4}.jonio-module summary::-webkit-details-marker{display:none}.jonio-module summary span{color:#8ee8b6;font-weight:800}.jonio-module summary strong{font-size:1.04rem}.jonio-module summary small{font-size:.86rem;color:#c2d6ca}.jonio-module summary:after{content:'▾';margin-left:auto}.jonio-module[open] summary:after{transform:rotate(180deg)}.jonio-exercises{display:grid;gap:.8rem;padding:0 1rem 1rem}.jonio-exercises article{min-width:0;padding:1rem;border:1px solid #345443;border-radius:10px;background:#1a3028}.jonio-exercises h4{margin:0 0 .4rem;font-size:1rem;color:#f4fff8}.jonio-exercises p{margin:.3rem 0 .8rem;line-height:1.5}.jonio-exercises pre{overflow-x:auto;max-width:100%;margin:.5rem 0;padding:.8rem;border-radius:8px;background:#0a1713;color:#d2ffe2;font-size:clamp(.8rem,2.6vw,1rem);line-height:1.5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.jonio-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.jonio-actions label{display:flex;gap:.4rem;align-items:center;min-height:40px}.jonio-actions .playing{box-shadow:0 0 0 2px #8ee8b6}@media(max-width:600px){.jonio-module summary small{flex-basis:100%;padding-left:2rem}.jonio-exercises{padding:0 .65rem .7rem}.jonio-exercises article{padding:.75rem}}

.jonio-intro,.jonio-lesson,.jonio-review{padding:1rem 1.2rem;border:1px solid #356650;border-radius:12px;background:#162d24;color:#e5f7ec;line-height:1.55}.jonio-intro p,.jonio-lesson p,.jonio-review p{margin:.45rem 0}.jonio-lesson{margin:0 .7rem .8rem;background:#18352a}.jonio-review{margin:1rem 0;background:#18352a}.jonio-criterion{font-size:.9rem;color:#c8e5d2}.jonio-controls button:disabled{opacity:.65;cursor:wait}

.jonio-board{max-width:620px;margin:.65rem 0;overflow:hidden}.jonio-board svg{display:block;width:100%;height:auto;min-width:0}.jonio-board svg text{font-family:system-ui,sans-serif;fill:#d9f2e2;font-size:14px}.jonio-board svg g text{fill:#07180e}.jonio-board svg g.active circle{fill:#f7d96e;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 7px #f7d96e)}@media(max-width:600px){.jonio-board svg text{font-size:16px}.jonio-board svg g circle{r:15}}
.jonio-fretboard{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;margin:.7rem 0;padding:.45rem;border:1px solid #496e5d;border-radius:9px;background:#0c201a}
.jonio-fretboard svg{display:block;width:100%;height:auto;max-width:100%}
.jonio-fretboard svg[style*="min-width"]{max-width:none}
.jonio-fretboard g[data-note]{cursor:pointer;outline:none}
.jonio-fretboard g[data-note]:focus-visible circle,.jonio-fretboard .note-active circle{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 5px #60e8ab)}
#jonioStatus{font-size:.9rem;color:#d3f3e2;min-width:9rem}
.jonio-actions button{min-height:42px}
@media(max-width:600px){.jonio-controls{align-items:stretch}.jonio-controls label{flex-wrap:wrap}.jonio-fretboard svg{height:160px;width:auto}}
.jonio-lesson{margin:0 1rem 1rem;padding:.85rem 1rem;border-left:3px solid #63df9c;border-radius:0 8px 8px 0;background:#1b3529;color:#e1f4e8;line-height:1.55;font-size:1rem}
@media(max-width:600px){.jonio-lesson{margin:0 .65rem .8rem}}