.space-notation{z-index:3;width:min(1120px,100%);box-shadow:none;background:0 0;border:0;margin:12px auto 42px;padding:0;position:relative}.space-notation-heading{justify-content:space-between;align-items:center;gap:24px;padding:0 18px;display:flex}.space-notation-heading h2{color:#292722;margin:0;font:400 2rem/1.2 Georgia,serif}.space-clef-switch{background:0 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.space-clef-switch button{color:#423c34;cursor:pointer;background:0 0;border:1px solid #928574;min-height:46px;padding:12px 18px;font-size:.875rem;transition:background .2s,color .2s,transform .2s}.space-clef-switch button[aria-pressed=true]{color:#f5efe4;background:#292722;border-color:#292722;box-shadow:0 8px 18px #29272226}.space-clef-switch button:focus-visible{outline-offset:4px;outline:2px solid #9b6d26}.notation-space{perspective:1300px;background:0 0;padding:30px 22px 16px;overflow:visible}.floating-staff-system{transform-style:preserve-3d;transform-origin:50%;position:relative;transform:rotateX(8deg)rotateY(-5deg)rotate(-1deg)}.floating-staff-system svg{color:#292722;background:0 0;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.staff-notation-plane{filter:drop-shadow(0 12px 5px #3b302b25)}.notation-clef{filter:drop-shadow(2px 4px #9c8870)}.notation-head{filter:drop-shadow(1px 2px #a28d6e)}.notation-lines line{stroke:#5a4c3a;stroke-width:1.8px;stroke-linecap:round}.notation-head{fill:#292722}.notation-stem{stroke:#292722;stroke-width:2.6px;stroke-linecap:round}.notation-head.notation-whole{fill:none;stroke:#292722;stroke-width:3.5px}.notation-ledger{stroke:#5a4c3a;stroke-width:1.8px;stroke-linecap:round}.notation-label{fill:#433b31;font:24px Georgia,serif}.staff-mobile{display:none}.notation-octave-marker{fill:currentColor;stroke:none;font:700 22px Georgia,serif}.clef-reference-line{stroke:#b48742;stroke-width:3px;stroke-linecap:round}@media (width<=720px){.space-notation{margin-top:4px}.space-notation-heading{flex-direction:column;align-items:center;gap:20px;padding:0}.space-notation-heading h2{font-size:1.9rem}.space-clef-switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.space-clef-switch button{padding:12px 8px}.staff-desktop{display:none}.staff-mobile{display:block}.notation-space{perspective:1000px;padding:28px 5px 18px}.notation-label{font-size:28px}}.piano-notation{text-align:center;background:0 0;border-top:1px solid #a98a5a35;width:min(1000px,100%);margin:28px auto 48px;padding-top:30px}.piano-notation h2{color:#292722;margin:0 0 12px;font:400 2rem/1.3 Georgia,serif}.piano-notation>p{color:#76674f;max-width:650px;margin:0 auto 18px;font:15px/1.8 Georgia,serif}.piano-space{perspective:1300px;direction:ltr;background:0 0;padding:12px 20px}.floating-piano-system{width:min(850px,100%);transform-style:preserve-3d;transform-origin:50%;margin:auto;position:relative;transform:rotateX(8deg)rotateY(-5deg)rotate(-1deg)}.piano-plane{filter:drop-shadow(0 14px 7px #3b302b35);width:100%;height:100%;display:block;overflow:visible}.piano-key{stroke:#66563f;stroke-width:1px}.piano-black-key{filter:drop-shadow(1px 4px 1px #20180d75)}.piano-key.pressed{stroke:#966623;stroke-width:1.5px}.piano-note-label{fill:#30271a;font:15px Georgia,serif}.piano-register-label{fill:#72614b;font:10px Arial,sans-serif}.piano-note-key{color:#75664c;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:14px auto 0;font:13px/1.7 Georgia;display:flex}.piano-note-key i{background:#b48742;border-radius:50%;width:9px;height:9px}.piano-note-key bdi{color:#40372a;border-bottom:1px solid #ae8a5140;padding:3px 7px;font-size:16px}html[lang=ar] :is(.piano-notation>p,.piano-note-key,.piano-note-label){font-family:Tahoma,Arial,sans-serif}html[lang=ar] .piano-note-label{font-size:12px}@media (width<=720px){.piano-notation{margin-top:20px;padding-top:24px}.piano-notation h2{font-size:1.9rem}.piano-notation>p{font-size:13px}.piano-space{perspective:1000px;padding:10px 5px}.piano-note-key{gap:7px;font-size:12px}.piano-note-key bdi{font-size:14px}}.music-playback{color:#423c34;text-align:start;background:#e8dece55;border:1px solid #b7a88f;margin:28px 18px 8px;padding:24px}.music-playback-copy>span{color:#292722;font:400 1.65rem Georgia,serif}.music-playback-copy p{margin:8px 0 20px;font-size:.9rem;line-height:1.7}.music-playback-buttons{flex-wrap:wrap;gap:10px;display:flex}.music-playback-buttons button{color:#423c34;min-height:46px;font:inherit;cursor:pointer;background:0 0;border:1px solid #928574;justify-content:center;align-items:center;gap:10px;padding:12px 20px;font-size:.9rem;display:flex}.music-playback-buttons button.music-play-primary{color:#e4c588;background:#292722;border-color:#292722;box-shadow:0 6px 15px #2927221c}.music-playback-buttons button:disabled{opacity:.4;cursor:default}.music-playback-buttons button:focus-visible,.music-playback-settings input:focus-visible{outline-offset:4px;outline:2px solid #9b6d26}.music-playback-settings{grid-template-columns:repeat(2,minmax(0,260px));gap:28px;margin-top:22px;display:grid}.music-playback-settings label{grid-template-columns:1fr auto;align-items:center;gap:10px;font-size:.8rem;display:grid}.music-playback-settings input{accent-color:#9b6d26;cursor:pointer;grid-column:1/-1;width:100%;min-height:28px;margin:0}.music-playback-status{color:#7b6a52;min-height:1.5em;margin:12px 0 0!important;font-size:.8rem!important}html[lang=ar] .music-playback-copy>span{font-family:Tahoma,sans-serif}@media (width<=720px){.music-playback{margin:24px 0 6px;padding:18px}.music-playback-buttons button{flex:auto;padding:12px}.music-playback-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.music-playback-settings label{font-size:.75rem}}