/* Familiar clef cards, with a small silent example beside each description. */
.notes-menu-tools {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 12px;}
.notes-categories {display:flex;flex-wrap:wrap;gap:6px;padding:5px;background:#e5eaf5;border-radius:14px;}
.notes-categories button {min-height:44px;padding:9px 14px;border:1px solid transparent;border-radius:10px;font-size:.9375rem;font-weight:700;line-height:1.3;font-family:inherit;color:#4e5d78;background:transparent;cursor:pointer;}
.notes-categories button[aria-pressed=true] {background:#fff;border-color:#ccd5e6;color:#453783;box-shadow:0 2px 4px #24396012;}
.notes-filter {display:flex;align-items:center;gap:8px;font-size:.875rem;color:#52627c;}
.notes-filter select {min-height:44px;max-width:100%;font:inherit;padding:8px 12px;border:1px solid #bdc9de;border-radius:10px;background:#fff;color:#243960;}
.notes-menu-hint {font-size:.9375rem;line-height:1.45;color:#52627c;margin:0 0 18px;}
.notes-group > h2 {font-size:1.125rem;margin:0 0 12px;color:#243960;}
body.page-notes .notes-card-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
body.page-notes .notes-card {display:grid;grid-template-columns:minmax(0,1fr) 136px;grid-template-rows:1fr auto;gap:16px;align-items:start;min-height:0;padding:18px!important;overflow:hidden;}
body.page-notes .notes-card .notes-card-copy {min-width:0;}
body.page-notes .notes-card h3 {font-size:1.2rem!important;line-height:1.3!important;margin:4px 0 8px!important;}
body.page-notes .notes-card p {font-size:1rem!important;line-height:1.45!important;margin:0!important;font-weight:500!important;}
body.page-notes .notes-card .card-tag {font-size:.8125rem!important;line-height:1.3;padding:4px 8px!important;margin:0 0 6px!important;max-width:100%;}
body.page-notes .notes-card .game-btn-group {grid-column:1/-1;margin:0;padding:0;gap:8px;}
body.page-notes .notes-card .game-btn {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:52px!important;padding:10px 8px!important;line-height:1.35;font-size:.9375rem!important;}
body.page-notes .notes-card .difficulty-badge {font-size:.8125rem!important;line-height:1.25;font-weight:500;padding:0!important;border:0;background:transparent;color:inherit;}
.notes-demo {position:relative;align-self:start;display:grid;grid-template-rows:16px minmax(0,1fr) 40px;gap:8px;width:100%;height:172px;min-width:0;min-height:0;box-sizing:border-box;padding:10px;border:1px solid #d6daed;border-radius:16px;background:#f3f1fd;color:#453783;pointer-events:none;user-select:none;overflow:hidden;}
.notes-demo[data-clef=bass] {background:#fff1f5;border-color:#f0d7e2;}
.notes-demo[data-clef=grand] {background:#eaf8f3;border-color:#cde9df;}
.notes-demo[data-demo=sight] {background:#fff7e5;border-color:#eedfb9;}
.demo-label {display:block;line-height:16px;text-align:center;text-transform:uppercase;font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#69748d;}
.demo-scene {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;overflow:hidden;}
.demo-response {display:flex;align-items:center;justify-content:center;width:100%;height:40px;min-width:0;}
.notes-demo .demo-scene svg {display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%;padding:0!important;overflow:visible;}
.demo-letters {display:flex;justify-content:center;gap:6px;width:100%;height:40px;}
.demo-letters span {display:grid;place-items:center;flex:1;min-width:0;height:40px;border:1px solid #ccd3e7;border-radius:7px;background:#fff;font:700 .9375rem/1 system-ui;color:#65738d;}
.demo-letters .demo-answer {background:#d6f4e4;color:#176b46;border-color:#8eccac;}
.demo-note-name {font-size:2.25rem;font-weight:800;line-height:1.2;font-family:inherit;text-align:center;display:block;margin:0;}
.demo-piano {flex:none;box-sizing:border-box;display:flex;position:relative;height:40px;width:100%;border:1px solid #98a8c1;border-radius:5px;overflow:hidden;background:#fff;}
.demo-piano i {position:relative;flex:1;min-width:0;border-right:1px solid #a6b2c7;background:#fff;}
.demo-piano i:last-child {border-right:0;}
.demo-piano i[data-black]::after {content:'';position:absolute;right:-4px;top:0;z-index:1;width:7px;height:23px;background:#263654;border-radius:0 0 3px 3px;}
.demo-piano .demo-key-target,.demo-piano .demo-step-2 {background:#88d7b0;}
.demo-note-focus {fill:transparent;}
.demo-step-2 .demo-note-focus {fill:#b9e5cc;}
.demo-timer {position:absolute;z-index:2;top:0;right:0;font:700 .75rem/1 system-ui;color:#54617b;}
.demo-rush-lane {position:relative;width:100%;height:100%;overflow:hidden;}
.demo-falling {position:absolute;top:0;left:0;right:0;height:calc(100% - 12px);}
.demo-finish {position:absolute;bottom:2px;left:0;right:0;height:2px;background:#d18da0;border-radius:2px;}
@keyframes nl-demo-answer {0%,48%{background:#fff;border-color:#ccd3e7;color:#65738d;scale:1;}60%,75%{background:#d6f4e4;border-color:#8eccac;color:#176b46;scale:1.08;}100%{background:#d6f4e4;border-color:#8eccac;color:#176b46;scale:1;}}
@keyframes nl-demo-key {0%,48%{background:#fff;}62%,100%{background:#88d7b0;}}
@keyframes nl-demo-fall {0%,12%{translate:0 -6px;}62%,100%{translate:0 10px;}}
@keyframes nl-demo-step {0%,100%{background:#fff;}20%,40%{background:#88d7b0;}}
@keyframes nl-demo-note {0%,100%{fill:transparent;}20%,40%{fill:#b9e5cc;}}
/* One short demonstration when a card becomes visible, then a still example. */
@media(prefers-reduced-motion:no-preference){
 .demo-playing .demo-answer {animation:nl-demo-answer 3.8s ease both;}
 .demo-playing .demo-key-target {animation:nl-demo-key 3.8s ease both;}
 .demo-playing .demo-falling {animation:nl-demo-fall 3.8s ease both;}
 .demo-playing .demo-piano .demo-step:not(.demo-step-2) {animation:nl-demo-step 2s ease both;}
 .demo-playing .demo-step:not(.demo-step-2) .demo-note-focus {animation:nl-demo-note 2s ease both;}
 .demo-playing .demo-piano .demo-step-1,.demo-playing .demo-step-1 .demo-note-focus {animation-delay:1s;}
 .demo-playing .demo-piano .demo-step-2 {animation:nl-demo-key 1.8s 2s ease both;}
 .demo-playing .demo-step-2 .demo-note-focus {animation:nl-demo-note-last 1.8s 2s ease both;}
}
@keyframes nl-demo-note-last {0%,48%{fill:transparent;}62%,100%{fill:#b9e5cc;}}
@media(max-width:850px){body.page-notes .notes-card {grid-template-columns:minmax(0,1fr) 110px;gap:12px;padding:16px!important;}}
@media(max-width:700px){
 .notes-menu-tools {align-items:stretch;gap:10px;}
 .notes-categories {display:grid;grid-template-columns:1fr 1fr;width:100%;}
 .notes-categories button {font-size:.9375rem;padding:10px 8px;}
 .notes-filter {margin-left:auto;}
 body.page-notes .notes-card-grid {grid-template-columns:1fr;gap:12px;}
 body.page-notes .notes-card {grid-template-columns:minmax(0,1fr) 112px;gap:12px;}
 body.page-notes .notes-card h3 {font-size:1.125rem!important;}
 .notes-demo {padding-inline:8px;}
}
@media(max-width:360px){body.page-notes .notes-card {grid-template-columns:minmax(0,1fr) 92px;padding:14px!important;gap:10px;}.demo-letters{gap:4px;}.demo-label{font-size:.75rem;}}