.tools-page[data-tool=note-flashcards]{--tools-area-min-height:820px}.notes-staff{border:1.5px solid var(--border);min-height:200px;color:var(--navy);background:#fff;border-radius:20px;flex-direction:column;justify-content:center;padding:6px 16px;display:flex}.notes-staff-drawing{width:100%}.notes-staff>.notes-staff-drawing{max-width:560px;margin-inline:auto}.notes-piano{border:1.5px solid var(--navy);border-radius:14px;grid-template-columns:repeat(7,1fr);height:170px;display:grid;position:relative;overflow:hidden}.notes-key-white{color:var(--navy);cursor:pointer;background:#fff;border:0;border-right:1.5px solid #cbd5e1;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding-bottom:12px;display:flex}.notes-key-white:nth-child(7){border-right:0}.notes-key-white b{font:800 19px var(--font-display)}.notes-key-white small{color:var(--text-muted);font-size:13.5px;font-weight:700}.notes-key-white:hover:not(:disabled){background:var(--blue-wash)}.notes-key-black{top:0;left:calc(var(--notes-key-slot,1) * 100% / 7 - 100% / 7 * .3);background:var(--navy);color:#cbd5e1;cursor:pointer;border:0;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;width:8.57143%;height:58%;padding-bottom:8px;display:flex;position:absolute}.notes-key-black[data-position="1"]{--notes-key-slot:1}.notes-key-black[data-position="2"]{--notes-key-slot:2}.notes-key-black[data-position="4"]{--notes-key-slot:4}.notes-key-black[data-position="5"]{--notes-key-slot:5}.notes-key-black[data-position="6"]{--notes-key-slot:6}.notes-key-black small{font-size:11.5px;font-weight:800}.notes-key-black:hover:not(:disabled){background:#2b3a4f}.notes-key-white:disabled,.notes-key-black:disabled{cursor:default}.notes-key-white.is-right{background:#c9efd6}.notes-key-white.is-right b,.notes-key-white.is-right small{color:#037a30}.notes-key-black.is-right{background:var(--green);color:#fff}.notes-key-white.is-wrong{background:#ffd3d8}.notes-key-black.is-wrong{background:var(--coral);color:#fff}.notes-history{grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;display:grid}.notes-history i{aspect-ratio:1;background:var(--border);border-radius:4px}.notes-history i.is-right{background:var(--green)}.notes-history i.is-wrong{background:var(--coral)}.notes-ring-tile{background:var(--bg-light);border-radius:16px;justify-items:center;gap:4px;padding:12px 14px;display:grid}.notes-ring-tile small{color:var(--text-body);font-size:13px;font-weight:700}.notes-ring{place-items:center;width:64px;height:64px;display:grid;position:relative}.notes-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.notes-ring-track,.notes-ring-bar{fill:none;stroke-width:6px}.notes-ring-track{stroke:var(--border)}.notes-ring-bar{stroke:var(--green);stroke-linecap:round}.notes-ring b{color:var(--navy);font:800 15px var(--font-display);position:relative}.notes-phone-staff{width:100%;min-height:150px;color:var(--navy);flex-direction:column;justify-content:center;display:flex}.notes-phone-scores{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.notes-phone-scores span{text-align:center;background:#ffffff24;border-radius:14px;gap:2px;padding:8px 6px;display:grid}.notes-phone-scores small{color:#fff;font-size:11.5px;font-weight:700}.notes-phone-scores b{font:800 16px var(--font-display)}.practice-phone-panel .notes-piano{height:150px}.notes-phone-settings summary{min-height:44px;color:var(--primary);font:800 15px var(--font-body);cursor:pointer;align-items:center;display:flex}.notes-phone-settings-body{gap:14px;padding-top:6px;display:grid}