/* Compact override for Lesson 11 scale demo. */
.learn-scale-card.is-compact{width:min(100%,720px);margin:14px auto;padding:14px 12px;border-radius:20px}.learn-scale-row.is-compact{gap:7px;padding:9px;border-radius:16px}.learn-scale-row.is-compact .learn-scale-row-heading{gap:6px}.learn-scale-row.is-compact .learn-scale-row-heading strong{font-size:.86rem}.learn-scale-row.is-compact .learn-scale-row-heading span{font-size:.78rem}.learn-scale-staff-board.is-compact{min-height:98px;border-radius:12px;background:rgba(6,6,7,.42)}.learn-scale-staff-board.is-compact .learn-scale-staff-lines{left:10%;right:4%;top:34%;height:38%}.learn-scale-staff-board.is-compact .learn-scale-staff-lines span{height:1.4px}.learn-scale-staff-board.is-compact .learn-scale-clef{left:2.2%;top:54%;font-size:clamp(2.15rem,5.2vw,3.25rem)}.learn-scale-staff-board.is-compact .learn-scale-path-line{display:none}.learn-scale-staff-board.is-compact .learn-scale-staff-note{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.learn-scale-staff-board.is-compact .learn-scale-notehead{width:13px;height:9px;box-shadow:0 3px 8px rgba(0,0,0,.22)}.learn-scale-staff-board.is-compact .learn-scale-notehead:after{right:1px;top:-24px;width:1.8px;height:27px}.learn-scale-staff-board.is-compact .learn-scale-ledger{width:22px;height:1.4px;left:50%;transform:translate(-50%,-50%)}.learn-scale-staff-board.is-compact .learn-scale-staff-label,.learn-scale-staff-board.is-compact .learn-scale-staff-note small{display:none!important}.learn-scale-note-keys{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.learn-scale-note-key{appearance:none;-webkit-appearance:none;min-height:27px;display:inline-flex;align-items:center;justify-content:center;padding:3px 2px;border-radius:8px;border:1px solid rgba(255,224,138,.24);background:rgba(255,224,138,.05);color:#fff3bd;font-family:inherit;font-size:.67rem;font-weight:900;line-height:1.05;text-align:center;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.learn-scale-note-key.is-upper{border-color:rgba(123,168,212,.32);background:rgba(123,168,212,.10);color:#a9cbed}.learn-scale-note-key:focus-visible,.learn-scale-staff-board.is-compact .learn-scale-staff-note:focus-visible{outline:2px solid rgba(255,224,138,.72);outline-offset:3px}.learn-scale-note-key.is-playing{border-color:rgba(255,224,138,.78);background:rgba(255,224,138,.20);box-shadow:0 0 0 2px rgba(255,224,138,.10),0 8px 18px rgba(0,0,0,.24);transform:translateY(-1px)}.learn-scale-staff-note.is-playing .learn-scale-notehead{background:#ffe08a;box-shadow:0 0 0 5px rgba(255,224,138,.13),0 8px 16px rgba(0,0,0,.26)}@media(max-width:720px){.learn-scale-card.is-compact{margin:12px -4px;padding:12px 8px;border-radius:18px}.learn-scale-row.is-compact{padding:8px 7px}.learn-scale-staff-board.is-compact{min-height:88px;border-radius:11px}.learn-scale-staff-board.is-compact .learn-scale-staff-lines{left:11%;right:3%;top:35%;height:36%}.learn-scale-staff-board.is-compact .learn-scale-clef{left:1.5%;font-size:2.2rem}.learn-scale-staff-board.is-compact .learn-scale-notehead{width:11px;height:7px}.learn-scale-staff-board.is-compact .learn-scale-notehead:after{top:-20px;height:23px;width:1.6px}.learn-scale-note-key{min-height:26px;border-radius:7px;font-size:.6rem}}@media(max-width:420px){.learn-scale-staff-board.is-compact{min-height:82px}.learn-scale-note-key{font-size:.54rem;padding-inline:1px}.learn-scale-row.is-compact .learn-scale-row-heading span{font-size:.72rem}}