.learning-controls{display:flex;flex-wrap:wrap;align-items:end;gap:18px;margin:25px 0}.learning-controls label{display:grid;gap:8px;font-size:17px}.learning-controls select{min-width:140px;padding:12px;font:inherit;background:var(--ui-panel,var(--bg,#fff));color:var(--text);border:1px solid var(--line);border-radius:10px}.learning-card{padding:24px;border:1px solid var(--line);border-radius:18px;min-width:0;background:var(--ui-panel,var(--bg,#fff))}.learning-card h3{font-size:32px;font-weight:800;margin:0 0 10px;color:var(--text)}.learning-card>svg{width:220px;max-width:100%;display:block;margin:20px auto}.learning-harmony-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}.learning-notes,.learning-degree{font-size:17px;line-height:1.7}.learning-piano-scroll{width:100%;overflow:auto;margin:22px 0;padding:4px}.learning-piano{position:relative;height:180px;min-width:280px;isolation:isolate;touch-action:pan-x}.learning-key{position:absolute;top:0;padding:0!important;margin:0!important;min-height:0!important;border-radius:0 0 5px 5px!important;border:1px solid #4a5263!important;touch-action:none;cursor:pointer}.learning-key.white{background:#fff!important;color:#101825!important;height:100%;width:calc(100% / var(--white-count));z-index:1}.learning-key.black{background:#182132!important;color:#fff!important;height:62%;width:calc(67% / var(--white-count));z-index:2}.learning-key span{position:absolute;bottom:8px;left:0;width:100%;font:10px Arial;text-align:center;pointer-events:none}.learning-key.highlight{background:#b9e69c!important}.learning-key.degree-key{background:var(--degree-color)!important;color:#fff!important}.learning-key.pressed{background:#ec8c35!important;box-shadow:inset 0 0 0 3px #f7da74}.learning-key:focus-visible{outline:3px solid #e28819;outline-offset:-3px}.full-piano .learning-piano{min-width:1100px;height:230px}.full-piano .learning-key span{font-size:11px}.learning-fret,.learning-nut{stroke:var(--text);stroke-width:1.5}.learning-nut{stroke-width:5}.learning-finger{fill:#7445dc}.learning-barre{stroke:#7445dc;stroke-width:18;stroke-linecap:round}.learning-card svg text{fill:var(--text);font:14px Arial}.learning-fretboard{background:var(--ui-panel,var(--bg,#fff));border:1px solid var(--line);border-radius:16px;padding:12px;margin:20px 0}.learning-fretboard svg{display:block;width:100%;height:auto}.learning-fretboard svg text{fill:var(--text);font:13px Arial}.learning-fretboard svg .fret-note{fill:white;font-size:11px;font-weight:bold}.learning-fretboard circle{cursor:pointer}.learning-fretboard circle:focus{stroke:var(--text);stroke-width:3}.learning-tone-grid,.learning-note-chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.learning-note-chips button{color:white;border:0;border-radius:10px;padding:12px;font-size:17px;font-weight:700;cursor:pointer}.learning-tone-grid [aria-pressed=true]{outline:3px solid var(--text)}.learning-result>h2{font-size:28px}.learning-result>p{font-size:17px;line-height:1.7}.learning-controls input[type=range]{max-width:180px}.music-tools-nav{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.music-tools-nav a{padding:12px 16px;border:1px solid var(--line);border-radius:12px}.music-tools-nav [aria-current=page]{background:var(--text);color:var(--bg)}@media(max-width:600px){.learning-card{padding:18px}.learning-fretboard{padding:2px}.learning-fretboard svg{min-height:180px}.learning-controls{gap:12px}.learning-controls select{max-width:210px}.learning-key span{font-size:8px}}

@media(max-width:600px){.learning-fretboard{overflow-x:auto}.learning-fretboard svg{width:680px;max-width:none}.learning-fretboard:before{content:"Deslize para explorar as 12 casas do braço";display:block;font-size:14px;padding:10px}}

.learning-register{display:grid;gap:10px;font-size:17px;margin:15px 0}.learning-register input{width:100%;min-height:44px}

.learning-card .learning-piano-scroll,.learning-result>.learning-piano-scroll:not(.full-piano){max-width:520px;margin:22px auto}.learning-card .learning-piano,.learning-result>.learning-piano-scroll:not(.full-piano) .learning-piano{min-width:240px}