@layer components{[class*=wideVisualization]:has(._keyboard_6ydfb_1){width:100%}._keyboard_6ydfb_1{width:100%;margin-inline:auto;padding-top:1.75rem;position:relative}._groups_6ydfb_12{height:1.75rem;position:absolute;inset:0 0 auto}._group_6ydfb_12{color:var(--text-tertiary);flex-direction:column;align-items:center;gap:.2rem;display:flex;position:absolute;top:0}._groupLine_6ydfb_28{border-top:1px solid var(--border-heavy);border-inline:1px solid var(--border-heavy);width:100%;height:.35rem}._whiteRow_6ydfb_35{grid-template-columns:repeat(16,minmax(0,1fr));height:10.5rem;display:grid}._whiteKey_6ydfb_41{border:1px solid var(--border-heavy);color:var(--black);background:var(--white);border-inline-start-width:0;border-radius:0 0 .35rem .35rem;justify-content:center;align-items:flex-end;padding:0 0 .75rem;display:flex;position:relative}._whiteKey_6ydfb_41:first-child{border-inline-start-width:1px}._whiteSelected_6ydfb_58{z-index:1;color:var(--text-primary);background:var(--learning-block-accent-surface);box-shadow:inset 0 0 0 2px var(--learning-block-accent)}._whiteNeighbor_6ydfb_65{color:var(--text-primary);background:var(--learning-block-accent-surface)}._contextKey_6ydfb_70{color:var(--text-tertiary)}._landmark_6ydfb_74{color:var(--learning-block-color-primary)}._blackKey_6ydfb_78{z-index:2;border:1px solid var(--black);width:5%;height:6.65rem;color:var(--white);background:var(--black);box-shadow:0 1px 2px var(--border-heavy);border-radius:0 0 .3rem .3rem;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 .4rem;display:flex;position:absolute;top:1.75rem}._blackSelected_6ydfb_96{border-color:var(--learning-block-accent);box-shadow:inset 0 0 0 2px var(--learning-block-accent), 0 1px 2px var(--border-heavy)}._blackLabels_6ydfb_103{flex-direction:column;align-items:center;line-height:1rem;display:flex}._gapMarkers_6ydfb_110{height:1.4rem;position:relative}._gapMarker_6ydfb_110{white-space:nowrap;color:var(--text-tertiary);align-items:center;gap:.25rem;display:flex;position:absolute;top:.1rem;transform:translate(-50%)}._gapMarker_6ydfb_110:before,._gapMarker_6ydfb_110:after{content:"";background:var(--border-heavy);width:.35rem;height:1px}._gapActive_6ydfb_134{color:var(--learning-block-accent)}._gapActive_6ydfb_134:before,._gapActive_6ydfb_134:after{background:var(--learning-block-accent)}._direction_6ydfb_143{color:var(--text-secondary);justify-content:space-between;display:flex}@media (width<=480px){._keyboard_6ydfb_1{padding-top:1.5rem}._groups_6ydfb_12{height:1.5rem}._whiteRow_6ydfb_35{height:9.25rem}._whiteKey_6ydfb_41{padding-bottom:.5rem}._blackKey_6ydfb_78{height:5.8rem;padding-bottom:.3rem;top:1.5rem}._blackLabels_6ydfb_103{display:none}._blackSelected_6ydfb_96{width:6.5625%;margin-inline-start:-.78125%}._blackSelected_6ydfb_96 ._blackLabels_6ydfb_103{display:flex}._gapMarker_6ydfb_110{gap:.1rem}._gapMarker_6ydfb_110:before,._gapMarker_6ydfb_110:after{display:none}._gapMarker_6ydfb_110:first-child{transform:translate(-15%)}._gapMarker_6ydfb_110:last-child{transform:translate(-85%)}}._thumbnail_6ydfb_203._thumbnail_6ydfb_203{padding:.45rem}._thumbnail_6ydfb_203 ._keyboard_6ydfb_1{padding-top:0}._thumbnail_6ydfb_203 ._groups_6ydfb_12,._thumbnail_6ydfb_203 ._gapMarkers_6ydfb_110,._thumbnail_6ydfb_203 ._direction_6ydfb_143{display:none}._thumbnail_6ydfb_203 ._whiteRow_6ydfb_35{grid-template-columns:repeat(7,minmax(0,1fr));height:3.85rem}._thumbnail_6ydfb_203 ._whiteKey_6ydfb_41{padding:0}._thumbnail_6ydfb_203 ._whiteKey_6ydfb_41>span{display:none}._thumbnail_6ydfb_203 ._blackKey_6ydfb_78{width:11.4286%;height:2.5rem;padding:0;top:0}._thumbnail_6ydfb_203 ._blackLabels_6ydfb_103{display:none}}