GCSE Music

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-transform: none;
}

.reveal h1 {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
}

.reveal p, .reveal li, .reveal table {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    color: #ffffff;
    text-transform: none;
}

.interactive-glossary-table tr {
    height: 3.2em;
    transition: background 0.5s;
  }
.interactive-glossary-table tr:hover {
    background: rgba(255, 255, 255, 0.1);
  }

@keyframes hint-pulse {
    0%, 100% {
      background-color: transparent;
      border-bottom-color: transparent;
    }
    20%, 80% {
      background-color: rgba(255, 255, 255, 0.25);
      border-bottom-color: rgba(255, 255, 255, 0.9);
    }
  }

.has-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 2px dotted transparent;
    border-radius: 3px;
  }

/* 
    `:not(.stack)` targets ONLY the active leaf slide, excluding parent vertical stacks.
    This prevents hidden vertical (-v-) slides from pre-firing, and re-triggers 
    the animation cleanly every time any slide or sub-slide gains focus (.present).
  */
  section.present:not(.stack) .has-tooltip,
  .slide-container.present .has-tooltip,
  .active:not(.stack) .has-tooltip {
    animation: hint-pulse 2.5s ease-in-out 0.6s;
  }

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    border: 1px solid #555;
  }

.has-tooltip:hover::after {
    opacity: 1;
  }

@keyframes audio-hint-pulse {
    0%, 100% {
      background-color: transparent;
      border-bottom-color: transparent;
    }
    20%, 80% {
      background-color: rgba(255, 255, 255, 0.25);
      border-bottom-color: rgba(255, 255, 255, 0.9);
    }
  }
  .flash-target {
    border-bottom: 2px dotted transparent;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .flash-target.animate-pulse {
    animation: audio-hint-pulse 2.5s ease-in-out !important;
  }
</style>

# Music Theory<br>for GCSE Music

---

## Glossary

<div style="font-size: 0.75em;">

<div style="display: flex; justify-content: center; width: 100%;">
  <table class="interactive-glossary-table" style="border-collapse: collapse; border: none; font-size: 0.75em; width: 100%;">
    <tr onclick="location.href='#/articulation'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left; width: 25%;"><strong>Articulation</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How notes are performed; whether they are smooth or short, accented or not.</td>
    </tr>
    <tr onclick="location.href='#/cadence'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Cadence</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">A two-chord progression that ends a phrase or section.</td>
    </tr>
    <tr onclick="location.href='#/chord'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Chord</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">Two or more notes played together.</td>
    </tr>
    <tr onclick="location.href='#/dynamics'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Dynamics</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How loud or quiet the music is.</td>
    </tr>
    <tr onclick="location.href='#/harmony'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Harmony</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">A progression of chords often used to accompany a melody.</td>
    </tr>
    <tr onclick="location.href='#/interval'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Interval</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">The distance between two notes.</td>
    </tr>
    <tr onclick="location.href='#/melody'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Melody</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">The main tune.</td>
    </tr>
    <tr onclick="location.href='#/metre'" style="cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Metre</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">A pattern of beats often indicated by the time signature.</td>
    </tr>
  </table>
</div>

</div>

-v-

<div style="display: flex; justify-content: center; width: 100%;">
  <table class="interactive-glossary-table" style="border-collapse: collapse; border: none; font-size: 0.75em; width: 100%;">
    <tr onclick="location.href='#/modulation'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left; width: 25%;"><strong>Modulation</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How the music moves from one key (scale) to another.</td>
    </tr>
    <tr onclick="location.href='#/ornament'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Ornament</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">A musical decoration.</td>
    </tr>
    <tr onclick="location.href='#/pitch'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Pitch</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How high or low the music is.</td>
    </tr>
    <tr onclick="location.href='#/range'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Range</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">The interval between the highest and lowest notes of a melody or section.</td>
    </tr>
    <tr onclick="location.href='#/rhythm'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Rhythm</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">The combination of notes of different lengths.</td>
    </tr>
    <tr onclick="location.href='#/structure'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Structure</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How the music is organised into sections.</td>
    </tr>
    <tr onclick="location.href='#/tempo'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Tempo</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How fast or slow the music is.</td>
    </tr>
    <tr onclick="location.href='#/texture'" style="border-bottom: 2px dotted #ffffff; cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Texture</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">How various parts or layers are combined.</td>
    </tr>
    <tr onclick="location.href='#/tonality'" style="cursor: pointer; height: 3.2em;">
      <td style="padding: 8px 18px; border: none; text-align: left;"><strong>Tonality</strong></td>
      <td style="padding: 8px 18px; border: none; text-align: left;">Keys, chords and harmony.</td>
    </tr>
  </table>
</div>

</div>

---

## Articulation

- **Legato** – smooth notes that flow from one to another.
- **Staccato** – short notes that are detached from one another.
- **Accent** – an emphasis placed on a note or chord to make it louder or more forceful.

</div>

-v-

## How instruments use articulation

<table class="equal-table">
  <tr>
    <th>Woodwind Instruments</th>
    <th>String Instruments</th>
    <th>Vocals</th>
  </tr>
  <tr>
    <td style="vertical-align: top;">
      <ul style="list-style-type: none; margin: 0; padding: 0;">
        <li style="margin-bottom: 0.8em;">Legato – by slurring notes to join them.</li>
        <li>Staccato – tonguing notes to separate them.</li>
      </ul>
    </td>
    <td style="vertical-align: top;">
      <ul style="list-style-type: none; margin: 0; padding: 0;">
        <li style="margin-bottom: 0.8em;">Legato – several notes on one bow.</li>
        <li style="margin-bottom: 0.8em;">Staccato – move the bow for each note.</li>
        <li style="margin-bottom: 0.8em;">Arco – using a bow.</li>
        <li>Pizzicato – using fingers to pluck the strings.</li>
      </ul>
    </td>
    <td style="vertical-align: top;">
      <ul style="list-style-type: none; margin: 0; padding: 0;">
        <li style="margin-bottom: 0.8em;">Legato – melisma or melismatic writing.</li>
        <li>Staccato – syllabic, where each syllable has a separate note.</li>
      </ul>
    </td>
  </tr>
</table>

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Tchaikovsky:<br>Piano Concerto No.1 in B flat Minor Op.23</span>
<div style="font-size: 0.75em;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>The opening has a dramatic <strong class="has-tooltip" data-tooltip="Emphasis placed on a note or chord to make it louder or more forceful">accented</strong> passage from the horns with accented chords from the whole orchestra.</li>
<li>The piano takes over with <strong class="has-tooltip" data-tooltip="Short notes that are detached from one another">detached</strong> and <strong class="has-tooltip" data-tooltip="Emphasis placed on a note or chord to make it louder or more forceful">accented</strong> chords.</li>
<li>The main melody is then heard by the string family which is predominantly smooth and <strong class="has-tooltip" data-tooltip="Smooth notes that flow from one to another">legato</strong>.</li>
<li><span id="tchaikovsky-arpeggio-hint" class="flash-target">The piano continues to accompany this melody with <strong class="has-tooltip" data-tooltip="Emphasis placed on a note or chord to make it louder or more forceful">accented</strong> chords but later (0:44) the chords change to spread <strong class="has-tooltip" data-tooltip="Notes of a chord sounding one at a time">arpeggiated</strong> chords.</span></li>
<li><span id="tchaikovsky-pizzicato-hint" class="flash-target">When this melody ends, the strings continue with some <strong class="has-tooltip" data-tooltip="Using fingers to pluck the strings">pizzicato</strong> chords (0:54).</span></li>
</ul>
<p style="margin-top: 10px; font-style: italic;">Hint: The words in <strong>bold</strong> are used to describe the type of articulation.</p>
<audio id="tchaikovsky-audio" controls src="audio/tchaikovsky-piano_concerto_no.1.mp3" style="margin-top: 10px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=44 && this.dataset.t44!=='1'){this.dataset.t44='1';var h1=document.getElementById('tchaikovsky-arpeggio-hint');if(h1){h1.classList.remove('animate-pulse');void h1.offsetWidth;h1.classList.add('animate-pulse');}}else if(c<43){this.dataset.t44='0';} if(c>=54 && this.dataset.t54!=='1'){this.dataset.t54='1';var h2=document.getElementById('tchaikovsky-pizzicato-hint');if(h2){h2.classList.remove('animate-pulse');void h2.offsetWidth;h2.classList.add('animate-pulse');}}else if(c<53){this.dataset.t54='0';}"></audio>
</div>

---

<h2 style="color: #ffffff !important;">Chord</h2>

Most are pleasant in sound (concord) but can sound strange when they contain notes that clash with each other. This can happen in film music to represent something scary (discord).

**Chord I – Tonic** <br>
Chord II – Supertonic <br>
Chord III – Mediant <br>
**Chord IV – Subdominant** <br>
**Chord V – Dominant** <br>
Chord VI – Submediant <br>
Chord VII – Leading note

*You are expected to know the names of the chords in **bold**.*

</div>

-v-

<h2 style="color: #ffffff !important;">C Major chord sequence</h2>

<div style="font-size: 0.75em;">
  

<img src="x" style="display:none;" onerror="
  if(!window.playChord){
    window.audioCtx = null;
    window.playChord = function(freqs) {
      if(!window.audioCtx) window.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      if(window.audioCtx.state === 'suspended') window.audioCtx.resume();
      let now = window.audioCtx.currentTime + 0.05;
      freqs.forEach(f => {
        let o = window.audioCtx.createOscillator(), g = window.audioCtx.createGain();
        o.type = 'sine';
        o.frequency.setValueAtTime(f, now);
        g.gain.setValueAtTime(0, now);
        g.gain.linearRampToValueAtTime(0.15, now + 0.1);
        g.gain.exponentialRampToValueAtTime(0.001, now + 1.2);
        o.connect(g);
        g.connect(window.audioCtx.destination);
        o.start(now);
        o.stop(now + 1.25);
      });
    }
  }
">

<div style="display: flex; justify-content: center; width: 100%;">
  <table class="interactive-chord-table" style="border-collapse: collapse; border: none; font-size: 1.1em;">
    <tr onclick="playChord([261.63, 329.63, 392.00])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord I</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">CEG</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">C major</td>
    </tr>
    <tr onclick="playChord([293.66, 349.23, 440.00])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord II</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">DFA</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">D minor</td>
    </tr>
    <tr onclick="playChord([329.63, 392.00, 493.88])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord III</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">EGB</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">E minor</td>
    </tr>
    <tr onclick="playChord([349.23, 440.00, 523.25])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord IV</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">FAC</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">F major</td>
    </tr>
    <tr onclick="playChord([392.00, 493.88, 587.33])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord V</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">GBD</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">G major</td>
    </tr>
    <tr onclick="playChord([440.00, 523.25, 659.25])" style="border-bottom: 2px dotted #ffffff; cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord VI</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">ACE</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">A minor</td>
    </tr>
    <tr onclick="playChord([493.88, 587.33, 698.46])" style="cursor: pointer;">
      <td style="padding: 12px 24px; border: none; text-align: right;">Chord VII</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">BDF</td>
      <td style="padding: 12px 24px; border: none; text-align: left;">B diminished</td>
    </tr>
  </table>
</div>
</div>

---

<h2 style="color: #ffffff !important;">Cadence</h2>

<img src="x" style="display:none;" onerror="
  if(!window.playCadence){
    window.audioCtx = window.audioCtx || null;
    window.playCadence = function(freqs1, freqs2) {
      if(!window.audioCtx) window.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      if(window.audioCtx.state === 'suspended') window.audioCtx.resume();
      let now = window.audioCtx.currentTime + 0.05;
      let play = (freqs, time) => {
        freqs.forEach(f => {
          let o = window.audioCtx.createOscillator(), g = window.audioCtx.createGain();
          o.type = 'sine';
          o.frequency.setValueAtTime(f, time);
          g.gain.setValueAtTime(0, time);
          g.gain.linearRampToValueAtTime(0.15, time + 0.1);
          g.gain.exponentialRampToValueAtTime(0.001, time + 1.2);
          o.connect(g);
          g.connect(window.audioCtx.destination);
          o.start(time);
          o.stop(time + 1.25);
        });
      };
      play(freqs1, now);
      play(freqs2, now + 1.0);
    }
  }
">

<div class="interactive-cadence" onclick="playCadence([392.00, 493.88, 587.33], [261.63, 329.63, 392.00])">
  <strong>Perfect cadence: chord V to chord I</strong> <br>
  Sounds complete and finished. Used at the end of sections or a whole piece.
</div>

<div class="interactive-cadence" onclick="playCadence([349.23, 440.00, 523.25], [261.63, 329.63, 392.00])">
  <strong>Plagal cadence: chord IV to chord I</strong> <br>
  Sounds complete and finished. Used in church music or hymns to the word ‘Amen’.
</div>

<div class="interactive-cadence" onclick="playCadence([261.63, 329.63, 392.00], [392.00, 493.88, 587.33])">
  <strong>Imperfect cadence: chord I, II or IV to V</strong> <br>
  Sounds incomplete. Occurs halfway through a phrase.
</div>

<div class="interactive-cadence" onclick="playCadence([392.00, 493.88, 587.33], [440.00, 523.25, 659.25])">
  <strong>Interrupted cadence: chord V to chord VI</strong> <br>
  You expect to hear chord I but because you hear chord VI it sounds interrupted, like a surprise.
</div>

</div>

---

## Harmony

- **Block chord**: where all the notes sound together.
- **Broken** or **arpeggiated chord**: where the notes of a chord sound one at a time.
- **Dissonance**: where the notes in a chord clash.
- **Diatonic**: where the harmony is major and/or minor
- **Chromatic**: where some of the notes in the chord progressions move chromatically (in semitones).
- **Primary**: where chords I, IV and V are used.
- **Rich**: where the harmony sounds romantic and luscious.
- **Close**: where the notes of the harmonies are all close together.

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Lionel Richie:<br>‘Hello’</span>
<div style="font-size: 0.75em;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>In the introduction, the chords are played in a <strong class="has-tooltip" data-tooltip="All notes sounding together">block</strong> way. This continues into the verse.</li>
<li><span id="lionel-chorus-hint" class="flash-target">In the chorus, the chords change to a <strong>‘rocking’</strong> style (0:46).</span></li>
</ul>
<audio id="lionel-audio" controls src="audio/lionel_richie-hello.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="if(this.currentTime>=46 && this.dataset.triggered!=='1'){this.dataset.triggered='1';var h=document.getElementById('lionel-chorus-hint');if(h){h.classList.remove('animate-pulse');void h.offsetWidth;h.classList.add('animate-pulse');}}else if(this.currentTime<46){this.dataset.triggered='0';}"></audio>
</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Lady Gaga:<br>‘Million Reasons’</span>
<div style="font-size: 0.75em;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>The song has a four-chord pattern in the introduction that repeats and continues into the verse.</li>
<li>The chords used in the introduction and verse are <strong class="has-tooltip" data-tooltip="Primary chords I, IV, and V">I / VI / IV / V</strong>.</li>
<li><span id="gaga-chorus-hint" class="flash-target">The same chords are used in the chorus but in a different order (0:45).</span></li>
</ul>
<audio id="gaga-audio" controls src="audio/lady_gaga-million_reasons.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="if(this.currentTime>=45 && this.dataset.triggered!=='1'){this.dataset.triggered='1';var h=document.getElementById('gaga-chorus-hint');if(h){h.classList.remove('animate-pulse');void h.offsetWidth;h.classList.add('animate-pulse');}}else if(this.currentTime<44){this.dataset.triggered='0';}"></audio>
</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Mozart:<br>Horn Concerto No.1 in D major</span>
<div style="font-size: 0.75em;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>In the introduction, there is a melody in the violins accompanied by chords in other strings.</li>
<li>The introduction only uses the <strong>primary chords</strong> (I, IV and V).</li>
<li>Chords I and V are heard several times whilst chord IV only occurs once.</li>
<li><span id="mozart-cadence-1" class="flash-target">There is a descending D major scale which ends on chord V creating an <strong class="has-tooltip" data-tooltip="Chord I, II or IV to V; sounds incomplete">imperfect cadence</strong> (0:20).</span></li>
<li><span id="mozart-cadence-2" class="flash-target">There is a contrasting section which ends with a <strong class="has-tooltip" data-tooltip="Chord V to chord I; sounds complete and finished">perfect cadence</strong> and then the first section is repeated with the horn playing the melody (0:45).</span></li>
</ul>
<audio id="mozart-audio" controls src="audio/mozart-horn_concerto_no.1.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=20 && this.dataset.t20!=='1'){this.dataset.t20='1';var h1=document.getElementById('mozart-cadence-1');if(h1){h1.classList.remove('animate-pulse');void h1.offsetWidth;h1.classList.add('animate-pulse');}}else if(c<19){this.dataset.t20='0';} if(c>=45 && this.dataset.t45!=='1'){this.dataset.t45='1';var h2=document.getElementById('mozart-cadence-2');if(h2){h2.classList.remove('animate-pulse');void h2.offsetWidth;h2.classList.add('animate-pulse');}}else if(c<44){this.dataset.t45='0';}"></audio>
</div>

---

## Dynamics

<table class="dynamics-table">
  <thead>
    <tr>
      <th style="text-align: center;">Symbol</th>
      <th style="text-align: center;">Name</th>
      <th>Meaning</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="symbol-col">ff</td>
      <td style="text-align: center;">Fortissimo</td>
      <td>Very loud</td>
    </tr>
    <tr>
      <td class="symbol-col">f</td>
      <td style="text-align: center;">Forte</td>
      <td>Loud</td>
    </tr>
    <tr>
      <td class="symbol-col">mf</td>
      <td style="text-align: center;">Mezzo-forte</td>
      <td>Quite loud</td>
    </tr>
    <tr>
      <td class="symbol-col">mp</td>
      <td style="text-align: center;">Mezzo-piano</td>
      <td>Quite quiet</td>
    </tr>
    <tr>
      <td class="symbol-col">p</td>
      <td style="text-align: center;">Piano</td>
      <td>Quiet</td>
    </tr>
    <tr>
      <td class="symbol-col">pp</td>
      <td style="text-align: center;">Pianissimo</td>
      <td>Very Quiet</td>
    </tr>
    <tr>
      <td class="symbol-col" style="text-align: center !important;">
        <svg class="hairpin-svg" viewBox="0 0 40 16"><path d="M 38 2 L 2 8 L 38 14"/></svg>
      </td>
      <td style="text-align: center;">Crescendo</td>
      <td>Gradually getting louder</td>
    </tr>
    <tr>
      <td class="symbol-col" style="text-align: center !important;">
        <svg class="hairpin-svg" viewBox="0 0 40 16"><path d="M 2 2 L 38 8 L 2 14"/></svg>
      </td>
      <td style="text-align: center;">Diminuendo</td>
      <td>Gradually getting quieter</td>
    </tr>
  </tbody>
</table>

</div>

---

<h2 style="color: white !important;">Tonality / Key</h2>

**Major** - the music has a happy and nice feel.

**Minor** - the music has a sad feel.

**Atonal** - the music has a very random feel (sounds awful).

- You are expected to know the scales that have up to four sharps or flats.
- Every key signature has two possible keys – one major and one minor, which are the relative of each other.
- An **accidental** is where a sharp, flat or unnatural sign is added to a note in order to change it by one semitone.

</div>

-v-

<div style="font-size: 0.95em;">
<style>
  .key-sig-img {
    max-height: 65px;
    margin: 0 auto 4px auto !important;
    padding: 0 !important;
    display: block !important;
    border: none;
    box-shadow: none;
    background: transparent;
    filter: invert(1);
  }
  @media print {
    .key-sig-img {
      filter: invert(0) !important;
    }
  }
</style>

<table style="width: 100%; background: transparent; border-collapse: collapse; text-align: center;">
  
  <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.2);">
    <th style="padding: 8px; vertical-align: middle;">Sharps</th>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/CM.svg" alt="C Major" class="key-sig-img">
      <strong>C Major</strong><br><em>A Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/GM.svg" alt="G Major" class="key-sig-img">
      <strong>G Major</strong><br><em>E Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/DM.svg" alt="D Major" class="key-sig-img">
      <strong>D Major</strong><br><em>B Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/AM.svg" alt="A Major" class="key-sig-img">
      <strong>A Major</strong><br><em>F♯ Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/EM.svg" alt="E Major" class="key-sig-img">
      <strong>E Major</strong><br><em>C♯ Minor</em>
    </td>
  </tr>
  
  
  <tr>
    <th style="padding: 8px; vertical-align: middle;">Flats</th>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/CM.svg" alt="C Major" class="key-sig-img">
      <strong>C Major</strong><br><em>A Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/FM.svg" alt="F Major" class="key-sig-img">
      <strong>F Major</strong><br><em>D Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/B♭M.svg" alt="B♭ Major" class="key-sig-img">
      <strong>B♭ Major</strong><br><em>G Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/E♭M.svg" alt="E♭ Major" class="key-sig-img">
      <strong>E♭ Major</strong><br><em>C Minor</em>
    </td>
    <td style="padding: 8px; vertical-align: top; text-align: center;">
      <img src="images/A♭M.svg" alt="A♭ Major" class="key-sig-img">
      <strong>A♭ Major</strong><br><em>F Minor</em>
    </td>
  </tr>
</table>

</div>

-v-

The *Circle of Fifths* can help you work out the key signatures

<svg viewBox="0 0 500 500" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;">
    <defs>
      <marker id="arrow-head" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 1.5 L 10 5 L 0 8.5 z" fill="#ffffff" />
      </marker>
    </defs>
    
    <g transform="translate(-20, -10) rotate(-6, 115, 55)">
      <path d="M 185 50 A 225 225 0 0 0 50 130" fill="none" stroke="#ffffff" stroke-width="3" marker-end="url(#arrow-head)" />
      <text x="100" y="36" fill="#ffffff" font-size="14" font-family="Barlow" text-anchor="middle">down by 5th</text>
      <text x="100" y="50" fill="#ffffff" font-size="12" font-family="Barlow" text-anchor="middle">add ♭ then remove ♯</text>
    </g>
    
    <g transform="translate(-10, -12) rotate(5.5, 385, 55)">
      <path d="M 315 50 A 225 225 0 0 1 450 130" fill="none" stroke="#ffffff" stroke-width="3" marker-end="url(#arrow-head)" />
      <text x="400" y="36" fill="#ffffff" font-size="14" font-family="Barlow" text-anchor="middle">up by 5th</text>
      <text x="400" y="50" fill="#ffffff" font-size="12" font-family="Barlow" text-anchor="middle">add ♯ then remove ♭</text>
    </g>
  </svg>

<svg viewBox="0 0 400 400" style="position: absolute; top: 0; left: -12px; width: 100%; height: 100%; z-index: 2;">
    <defs>
      <path id="wedge" d="M 200,200 L 137.8834,-31.8222 A 240,240 0 0,1 262.1166,-31.8222 Z" />
      <clipPath id="donut-clip">
        <path d="M 200,200 m -180,0 a 180,180 0 1,0 360,0 a 180,180 0 1,0 -360,0 M 200,200 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" fill-rule="evenodd" />
      </clipPath>
      <clipPath id="inner-circle-clip">
        <circle cx="200" cy="200" r="76" />
      </clipPath>
    </defs>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#fa4b55" transform="rotate(270, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#fa4b55" transform="rotate(0, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ff7b3d" transform="rotate(300, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ff7b3d" transform="rotate(30, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#e84162" transform="rotate(330, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#e84162" transform="rotate(60, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ecce57" transform="rotate(0, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ecce57" transform="rotate(90, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#aed759" transform="rotate(30, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#aed759" transform="rotate(120, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#52be6b" transform="rotate(60, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#52be6b" transform="rotate(150, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#2cc1b2" transform="rotate(90, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#2cc1b2" transform="rotate(180, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#24a8e6" transform="rotate(120, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#24a8e6" transform="rotate(210, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#497dce" transform="rotate(150, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#497dce" transform="rotate(240, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#5a4da9" transform="rotate(180, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#5a4da9" transform="rotate(270, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#a04eaa" transform="rotate(210, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#a04eaa" transform="rotate(300, 200, 200)" /></g>
    </g>
    
    <g class="wedge-pair">
      <g clip-path="url(#inner-circle-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ef4a8a" transform="rotate(240, 200, 200)" /></g>
      <g clip-path="url(#donut-clip)" shape-rendering="geometricPrecision"><use href="#wedge" fill="#ef4a8a" transform="rotate(330, 200, 200)" /></g>
    </g>
  </svg>
  
<img src="images/circle-of-fifths.svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;" alt="Circle of Fifths">
</div>

-v-

<h2 style="color: white !important;">Father Charles Key Signatures</h2>

<table style="border-collapse: collapse; border: none; background: transparent; text-align: center; margin: 0 auto; font-family: 'Barlow', sans-serif;">
  <tr style="border: none; background: transparent;">
    <td style="padding: 6px 16px; border: none; text-align: right; white-space: nowrap;">C# →</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">G</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">D</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">A</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">E</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">B</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">F#</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">C#</td>
    <td style="padding: 6px 16px; border: none;"></td>
  </tr>
  <tr style="border: none; background: transparent;">
    <td style="padding: 6px 16px; border: none;"></td>
    <td style="padding: 6px 16px; border: none; text-align: center;">1</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">2</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">3</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">4</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">5</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">6</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">7</td>
    <td style="padding: 6px 16px; border: none;"></td>
  </tr>
  <tr style="border: none; background: transparent;">
    <td style="padding: 6px 16px; border: none;"></td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Father</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Charles</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Goes</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Down</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">And</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Ends</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">Battle</td>
    <td style="padding: 6px 16px; border: none;"></td>
  </tr>
  <tr style="border: none; background: transparent;">
    <td style="padding: 6px 16px; border: none;"></td>
    <td style="padding: 6px 16px; border: none; text-align: center;">7</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">6</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">5</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">4</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">3</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">2</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">1</td>
    <td style="padding: 6px 16px; border: none;"></td>
  </tr>
  <tr style="border: none; background: transparent;">
    <td style="padding: 6px 16px; border: none;"></td>
    <td style="padding: 6px 16px; border: none; text-align: center;">C♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">G♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">D♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">A♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">E♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">B♭</td>
    <td style="padding: 6px 16px; border: none; text-align: center;">F</td>
    <td style="padding: 6px 16px; border: none; text-align: left; white-space: nowrap;">← C♭</td>
  </tr>
</table>

</div>

---

<h2 style="color: white !important;">Modulation</h2>

Most Western music has a tonic key. Some music stays in the same key
and others change key (modulate).

Modulations you need to recognise:
- To the dominant
- To the subdominant
- To the relative major
- To the relative minor

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Vivaldi:<br>Four Seasons - First movement of Spring</span>
<div style="font-size: 0.75em;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>The piece is in <strong>E major</strong> and it stays in the same key for a long time</li>
<li><span id="vivaldi-mod1-hint" class="flash-target">At 1:20 the music begins to <strong class="has-tooltip" data-tooltip="Change from one key to another">modulate</strong>.</span></li>
<li><span id="vivaldi-mod2-hint" class="flash-target">At 1:42 the original melody is heard in the <strong class="has-tooltip" data-tooltip="The fifth note of the scale, creating a key 5 steps above the tonic">dominant key</strong> (B major).</span></li>
<li><span id="vivaldi-mod3-hint" class="flash-target">At 2:18, the music modulates to the <strong class="has-tooltip" data-tooltip="The minor key that shares the same key signature as the major key">relative minor</strong> of E major (C# minor) before returning to the tonic key.</span></li>
<li><span id="vivaldi-mod4-hint" class="flash-target">At 3:10, the original melody is heard back in E major.</span></li>
</ul>
<audio id="vivaldi-audio" controls src="audio/vivaldi-spring.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=80&&c<82&&this.dataset.t80!=='1'){this.dataset.t80='1';var e1=document.getElementById('vivaldi-mod1-hint');if(e1){e1.classList.remove('animate-pulse');void e1.offsetWidth;e1.classList.add('animate-pulse');}}else if(c<80||c>=82){this.dataset.t80='0';} if(c>=101&&c<103&&this.dataset.t101!=='1'){this.dataset.t101='1';var e2=document.getElementById('vivaldi-mod2-hint');if(e2){e2.classList.remove('animate-pulse');void e2.offsetWidth;e2.classList.add('animate-pulse');}}else if(c<101||c>=103){this.dataset.t102='0';} if(c>=138&&c<140&&this.dataset.t138!=='1'){this.dataset.t138='1';var e3=document.getElementById('vivaldi-mod3-hint');if(e3){e3.classList.remove('animate-pulse');void e3.offsetWidth;e3.classList.add('animate-pulse');}}else if(c<138||c>=140){this.dataset.t138='0';} if(c>=190&&c<192&&this.dataset.t190!=='1'){this.dataset.t190='1';var e4=document.getElementById('vivaldi-mod4-hint');if(e4){e4.classList.remove('animate-pulse');void e4.offsetWidth;e4.classList.add('animate-pulse');}}else if(c<190||c>=192){this.dataset.t190='0';}"></audio>
</div>

---

<h2 style="color: white !important;">Interval</h2>
<div style="font-size: 0.75em; color: white !important;">

.bracket {
    position: absolute;
    bottom: 94%;
  }

/* Layering hierarchy: inner brackets sit above outer brackets */
  .b-unison     { z-index: 10; --b-color: #DC8633; top: -125px; left: 10.0%; right: 12.0%; }
  .b-dissonant  { z-index: 20; --b-color: #E03E52; top: -90px;  left: 22.0%; right: 23.1%; }
  .b-harmonious { z-index: 30; --b-color: #006271; top: -55px;  left: 32.2%; right: 34.1%; }
  .b-hollow     { z-index: 40; --b-color: #92C1E9; top: -20px;  left: 43.4%; right: 45.3%; }

/* Clickable Arm Buttons */
  .arm {
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    transition: filter 0.15s ease;
  }

/* Expanded hover target area */
  .arm::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
  }

.arm.left {
    left: 0;
    right: 50%;
    border-top: 2px solid var(--b-color);
    border-left: 2px solid var(--b-color);
  }

.arm.right {
    left: 50%;
    right: 0;
    border-top: 2px solid var(--b-color);
    border-right: 2px solid var(--b-color);
  }

/* Hover highlight without layout shift */
  .arm:hover {
    filter: drop-shadow(0 0 6px var(--b-color)) brightness(1.2);
    border-top-width: 4px;
  }
  .arm.left:hover  { border-left-width: 4px; }
  .arm.right:hover { border-right-width: 4px; }

/* Centered Labels */
  .bracket span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 3px 8px;
    border: 1px solid #8b0000;
    font-weight: 300;
    font-size: 0.95rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
    z-index: 50;
    pointer-events: none;
  }

.b-unison span     { color: #DC8633; font-weight: 400; left: 50%; }
  .b-dissonant span  { color: #E03E52; left: 48.8%; }
  .b-harmonious span { color: #006271; left: 50%; }
  .b-hollow span     { color: #92C1E9; left: 47.5%; }

.interval-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
    filter: invert(1);
  }

</style>

<div class="interval-wrapper">
  
  <div class="bracket b-unison">
    <button class="arm left" onclick="window.playNotes(['C4'])" aria-label="Play Unison Left"></button>
    <span>Unison – Same</span>
    <button class="arm right" onclick="window.playNotes(['C4', 'C5'])" aria-label="Play Unison Right"></button>
  </div>
  
  <div class="bracket b-dissonant">
    <button class="arm left" onclick="window.playNotes(['C4', 'D4'])" aria-label="Play Dissonant Left"></button>
    <span>Dissonant</span>
    <button class="arm right" onclick="window.playNotes(['C4', 'B4'])" aria-label="Play Dissonant Right"></button>
  </div>
  
  <div class="bracket b-harmonious">
    <button class="arm left" onclick="window.playNotes(['C4', 'E4'])" aria-label="Play Harmonious Left"></button>
    <span>Harmonious</span>
    <button class="arm right" onclick="window.playNotes(['C4', 'A4'])" aria-label="Play Harmonious Right"></button>
  </div>
  
  <div class="bracket b-hollow">
    <button class="arm left" onclick="window.playNotes(['C4', 'F4'])" aria-label="Play Hollow Left"></button>
    <span>Hollow</span>
    <button class="arm right" onclick="window.playNotes(['C4', 'G4'])" aria-label="Play Hollow Right"></button>
  </div>
  <svg width="187.06mm" height="30mm" viewBox="0 0 8837.48 1417.32"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="full">
<title>Intervals</title>
<desc>Generated by MuseScore Studio 4.7.5</desc>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,165.354 8790.24,165.354" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,248.031 8790.24,248.031" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,330.709 8790.24,330.709" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,413.386 8790.24,413.386" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,496.063 8790.24,496.063" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,1033.46 8790.24,1033.46" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,1116.14 8790.24,1116.14" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,1198.82 8790.24,1198.82" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,1281.5 8790.24,1281.5" />
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="9.09" stroke-linejoin="bevel" points="124.016,1364.17 8790.24,1364.17" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="14.88" stroke-linejoin="bevel" points="131.457,160.807 131.457,1033.46" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="14.88" stroke-linejoin="bevel" points="8706.73,160.807 8706.73,1033.46" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="45.47" stroke-linejoin="bevel" points="8767.5,160.807 8767.5,1033.46" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="14.88" stroke-linejoin="bevel" points="131.457,1028.92 131.457,1368.72" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="14.88" stroke-linejoin="bevel" points="8706.73,1028.92 8706.73,1368.72" />
<polyline class="BarLine" fill="none" stroke="#000000" stroke-width="45.47" stroke-linejoin="bevel" points="8767.5,1028.92 8767.5,1368.72" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="2773.73,578.74 2951.67,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="3755.45,578.74 3933.39,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="1792.01,578.74 1969.95,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="7682.35,578.74 7860.28,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="4737.18,578.74 4915.11,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="6700.62,578.74 6878.56,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="810.284,578.74 988.222,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="5718.9,578.74 5896.84,578.74" />
<polyline class="LedgerLine" fill="none" stroke="#000000" stroke-width="13.23" stroke-linejoin="bevel" points="7682.35,950.787 7860.28,950.787" />
<path class="Note" d="M1998.94,571.167 C1989.68,571.167 1983.38,568.511 1979.08,560.245 C1974.77,551.964 1968.82,530.777 1968.49,521.839 C1967.83,512.902 1971.13,507.605 1979.08,504.964 C1983.05,503.636 1988.35,502.98 1993.32,502.98 C2002.58,502.98 2008.53,504.964 2013.18,513.902 C2017.8,522.839 2023.77,544.027 2023.77,552.292 C2023.77,568.511 2012.5,571.167 1998.94,571.167 M1996.28,492.386 C1950.61,492.386 1934.39,515.558 1934.39,537.073 C1934.39,558.589 1950.61,581.761 1996.28,581.761 C2041.97,581.761 2057.85,558.589 2057.85,537.073 C2057.85,515.558 2041.97,492.386 1996.28,492.386"/>
<path class="Note" d="M7774.18,323.136 C7764.91,323.136 7758.61,320.479 7754.32,312.214 C7750,303.933 7744.05,282.745 7743.72,273.808 C7743.07,264.87 7746.36,259.573 7754.32,256.933 C7758.29,255.604 7763.58,254.948 7768.55,254.948 C7777.82,254.948 7783.77,256.933 7788.41,265.87 C7793.04,274.808 7799,295.995 7799,304.261 C7799,320.479 7787.74,323.136 7774.18,323.136 M7771.52,244.354 C7725.85,244.354 7709.63,267.526 7709.63,289.042 C7709.63,310.558 7725.85,333.729 7771.52,333.729 C7817.21,333.729 7833.08,310.558 7833.08,289.042 C7833.08,267.526 7817.21,244.354 7771.52,244.354"/>
<path class="Note" d="M7774.18,612.506 C7764.91,612.506 7758.61,609.85 7754.32,601.584 C7750,593.303 7744.05,572.115 7743.72,563.178 C7743.07,554.24 7746.36,548.943 7754.32,546.303 C7758.29,544.975 7763.58,544.318 7768.55,544.318 C7777.82,544.318 7783.77,546.303 7788.41,555.24 C7793.04,564.178 7799,585.365 7799,593.631 C7799,609.85 7787.74,612.506 7774.18,612.506 M7771.52,533.725 C7725.85,533.725 7709.63,556.896 7709.63,578.412 C7709.63,599.928 7725.85,623.1 7771.52,623.1 C7817.21,623.1 7833.08,599.928 7833.08,578.412 C7833.08,556.896 7817.21,533.725 7771.52,533.725"/>
<path class="Note" d="M2865.56,529.829 C2856.3,529.829 2850,527.172 2845.7,518.907 C2841.39,510.625 2835.44,489.438 2835.11,480.5 C2834.45,471.563 2837.75,466.266 2845.7,463.625 C2849.67,462.297 2854.97,461.641 2859.94,461.641 C2869.2,461.641 2875.15,463.625 2879.8,472.563 C2884.42,481.5 2890.39,502.688 2890.39,510.954 C2890.39,527.172 2879.12,529.829 2865.56,529.829 M2862.9,451.047 C2817.23,451.047 2801.01,474.219 2801.01,495.735 C2801.01,517.25 2817.23,540.422 2862.9,540.422 C2908.59,540.422 2924.47,517.25 2924.47,495.735 C2924.47,474.219 2908.59,451.047 2862.9,451.047"/>
<path class="Note" d="M3847.28,612.506 C3838.02,612.506 3831.72,609.85 3827.42,601.584 C3823.11,593.303 3817.16,572.115 3816.83,563.178 C3816.17,554.24 3819.47,548.943 3827.42,546.303 C3831.39,544.975 3836.69,544.318 3841.66,544.318 C3850.92,544.318 3856.88,546.303 3861.52,555.24 C3866.14,564.178 3872.11,585.365 3872.11,593.631 C3872.11,609.85 3860.85,612.506 3847.28,612.506 M3844.63,533.725 C3798.96,533.725 3782.74,556.896 3782.74,578.412 C3782.74,599.928 3798.96,623.1 3844.63,623.1 C3890.31,623.1 3906.19,599.928 3906.19,578.412 C3906.19,556.896 3890.31,533.725 3844.63,533.725"/>
<path class="Note" d="M902.115,612.506 C892.849,612.506 886.552,609.85 882.255,601.584 C877.943,593.303 871.99,572.115 871.662,563.178 C871.005,554.24 874.302,548.943 882.255,546.303 C886.224,544.975 891.521,544.318 896.49,544.318 C905.755,544.318 911.708,546.303 916.349,555.24 C920.974,564.178 926.943,585.365 926.943,593.631 C926.943,609.85 915.677,612.506 902.115,612.506 M899.458,533.725 C853.787,533.725 837.568,556.896 837.568,578.412 C837.568,599.928 853.787,623.1 899.458,623.1 C945.146,623.1 961.021,599.928 961.021,578.412 C961.021,556.896 945.146,533.725 899.458,533.725"/>
<path class="Note" d="M6792.45,612.506 C6783.19,612.506 6776.89,609.85 6772.59,601.584 C6768.28,593.303 6762.33,572.115 6762,563.178 C6761.34,554.24 6764.64,548.943 6772.59,546.303 C6776.56,544.975 6781.86,544.318 6786.83,544.318 C6796.09,544.318 6802.05,546.303 6806.69,555.24 C6811.31,564.178 6817.28,585.365 6817.28,593.631 C6817.28,609.85 6806.02,612.506 6792.45,612.506 M6789.8,533.725 C6744.12,533.725 6727.91,556.896 6727.91,578.412 C6727.91,599.928 6744.12,623.1 6789.8,623.1 C6835.48,623.1 6851.36,599.928 6851.36,578.412 C6851.36,556.896 6835.48,533.725 6789.8,533.725"/>
<path class="Note" d="M5810.73,405.813 C5801.46,405.813 5795.17,403.157 5790.87,394.891 C5786.56,386.61 5780.6,365.422 5780.28,356.485 C5779.62,347.547 5782.92,342.25 5790.87,339.61 C5794.84,338.282 5800.14,337.625 5805.1,337.625 C5814.37,337.625 5820.32,339.61 5824.96,348.547 C5829.59,357.485 5835.56,378.672 5835.56,386.938 C5835.56,403.157 5824.29,405.813 5810.73,405.813 M5808.07,327.032 C5762.4,327.032 5746.18,350.203 5746.18,371.719 C5746.18,393.235 5762.4,416.407 5808.07,416.407 C5853.76,416.407 5869.64,393.235 5869.64,371.719 C5869.64,350.203 5853.76,327.032 5808.07,327.032"/>
<path class="Note" d="M1883.84,612.506 C1874.57,612.506 1868.28,609.85 1863.98,601.584 C1859.67,593.303 1853.71,572.115 1853.38,563.178 C1852.73,554.24 1856.03,548.943 1863.98,546.303 C1867.95,544.975 1873.24,544.318 1878.21,544.318 C1887.48,544.318 1893.43,546.303 1898.07,555.24 C1902.7,564.178 1908.67,585.365 1908.67,593.631 C1908.67,609.85 1897.4,612.506 1883.84,612.506 M1881.18,533.725 C1835.51,533.725 1819.29,556.896 1819.29,578.412 C1819.29,599.928 1835.51,623.1 1881.18,623.1 C1926.87,623.1 1942.74,599.928 1942.74,578.412 C1942.74,556.896 1926.87,533.725 1881.18,533.725"/>
<path class="Note" d="M4829.01,447.151 C4819.74,447.151 4813.44,444.495 4809.15,436.23 C4804.83,427.948 4798.88,406.761 4798.55,397.823 C4797.9,388.886 4801.19,383.589 4809.15,380.948 C4813.12,379.62 4818.41,378.964 4823.38,378.964 C4832.65,378.964 4838.6,380.948 4843.24,389.886 C4847.87,398.823 4853.83,420.011 4853.83,428.276 C4853.83,444.495 4842.57,447.151 4829.01,447.151 M4826.35,368.37 C4780.68,368.37 4764.46,391.542 4764.46,413.058 C4764.46,434.573 4780.68,457.745 4826.35,457.745 C4872.04,457.745 4887.91,434.573 4887.91,413.058 C4887.91,391.542 4872.04,368.37 4826.35,368.37"/>
<path class="Note" d="M6792.45,364.474 C6783.19,364.474 6776.89,361.818 6772.59,353.552 C6768.28,345.271 6762.33,324.084 6762,315.146 C6761.34,306.209 6764.64,300.912 6772.59,298.271 C6776.56,296.943 6781.86,296.287 6786.83,296.287 C6796.09,296.287 6802.05,298.271 6806.69,307.209 C6811.31,316.146 6817.28,337.334 6817.28,345.599 C6817.28,361.818 6806.02,364.474 6792.45,364.474 M6789.8,285.693 C6744.12,285.693 6727.91,308.865 6727.91,330.381 C6727.91,351.896 6744.12,375.068 6789.8,375.068 C6835.48,375.068 6851.36,351.896 6851.36,330.381 C6851.36,308.865 6835.48,285.693 6789.8,285.693"/>
<path class="Note" d="M5810.73,612.506 C5801.46,612.506 5795.17,609.85 5790.87,601.584 C5786.56,593.303 5780.6,572.115 5780.28,563.178 C5779.62,554.24 5782.92,548.943 5790.87,546.303 C5794.84,544.975 5800.14,544.318 5805.1,544.318 C5814.37,544.318 5820.32,546.303 5824.96,555.24 C5829.59,564.178 5835.56,585.365 5835.56,593.631 C5835.56,609.85 5824.29,612.506 5810.73,612.506 M5808.07,533.725 C5762.4,533.725 5746.18,556.896 5746.18,578.412 C5746.18,599.928 5762.4,623.1 5808.07,623.1 C5853.76,623.1 5869.64,599.928 5869.64,578.412 C5869.64,556.896 5853.76,533.725 5808.07,533.725"/>
<path class="Note" d="M3847.28,488.49 C3838.02,488.49 3831.72,485.834 3827.42,477.568 C3823.11,469.287 3817.16,448.099 3816.83,439.162 C3816.17,430.224 3819.47,424.928 3827.42,422.287 C3831.39,420.959 3836.69,420.303 3841.66,420.303 C3850.92,420.303 3856.88,422.287 3861.52,431.224 C3866.14,440.162 3872.11,461.349 3872.11,469.615 C3872.11,485.834 3860.85,488.49 3847.28,488.49 M3844.63,409.709 C3798.96,409.709 3782.74,432.881 3782.74,454.396 C3782.74,475.912 3798.96,499.084 3844.63,499.084 C3890.31,499.084 3906.19,475.912 3906.19,454.396 C3906.19,432.881 3890.31,409.709 3844.63,409.709"/>
<path class="Note" d="M4829.01,612.506 C4819.74,612.506 4813.44,609.85 4809.15,601.584 C4804.83,593.303 4798.88,572.115 4798.55,563.178 C4797.9,554.24 4801.19,548.943 4809.15,546.303 C4813.12,544.975 4818.41,544.318 4823.38,544.318 C4832.65,544.318 4838.6,546.303 4843.24,555.24 C4847.87,564.178 4853.83,585.365 4853.83,593.631 C4853.83,609.85 4842.57,612.506 4829.01,612.506 M4826.35,533.725 C4780.68,533.725 4764.46,556.896 4764.46,578.412 C4764.46,599.928 4780.68,623.1 4826.35,623.1 C4872.04,623.1 4887.91,599.928 4887.91,578.412 C4887.91,556.896 4872.04,533.725 4826.35,533.725"/>
<path class="Note" d="M2865.56,612.506 C2856.3,612.506 2850,609.85 2845.7,601.584 C2841.39,593.303 2835.44,572.115 2835.11,563.178 C2834.45,554.24 2837.75,548.943 2845.7,546.303 C2849.67,544.975 2854.97,544.318 2859.94,544.318 C2869.2,544.318 2875.15,546.303 2879.8,555.24 C2884.42,564.178 2890.39,585.365 2890.39,593.631 C2890.39,609.85 2879.12,612.506 2865.56,612.506 M2862.9,533.725 C2817.23,533.725 2801.01,556.896 2801.01,578.412 C2801.01,599.928 2817.23,623.1 2862.9,623.1 C2908.59,623.1 2924.47,599.928 2924.47,578.412 C2924.47,556.896 2908.59,533.725 2862.9,533.725"/>
<path class="Note" d="M902.115,1273.92 C892.849,1273.92 886.552,1271.27 882.255,1263 C877.943,1254.72 871.99,1233.53 871.662,1224.59 C871.005,1215.66 874.302,1210.36 882.255,1207.72 C886.224,1206.39 891.521,1205.74 896.49,1205.74 C905.755,1205.74 911.708,1207.72 916.349,1216.66 C920.974,1225.59 926.943,1246.78 926.943,1255.05 C926.943,1271.27 915.677,1273.92 902.115,1273.92 M899.458,1195.14 C853.787,1195.14 837.568,1218.31 837.568,1239.83 C837.568,1261.34 853.787,1284.52 899.458,1284.52 C945.146,1284.52 961.021,1261.34 961.021,1239.83 C961.021,1218.31 945.146,1195.14 899.458,1195.14"/>
<path class="Note" d="M1883.84,1273.92 C1874.57,1273.92 1868.28,1271.27 1863.98,1263 C1859.67,1254.72 1853.71,1233.53 1853.38,1224.59 C1852.73,1215.66 1856.03,1210.36 1863.98,1207.72 C1867.95,1206.39 1873.24,1205.74 1878.21,1205.74 C1887.48,1205.74 1893.43,1207.72 1898.07,1216.66 C1902.7,1225.59 1908.67,1246.78 1908.67,1255.05 C1908.67,1271.27 1897.4,1273.92 1883.84,1273.92 M1881.18,1195.14 C1835.51,1195.14 1819.29,1218.31 1819.29,1239.83 C1819.29,1261.34 1835.51,1284.52 1881.18,1284.52 C1926.87,1284.52 1942.74,1261.34 1942.74,1239.83 C1942.74,1218.31 1926.87,1195.14 1881.18,1195.14"/>
<path class="Note" d="M1998.94,1232.58 C1989.68,1232.58 1983.38,1229.93 1979.08,1221.66 C1974.77,1213.38 1968.82,1192.19 1968.49,1183.26 C1967.83,1174.32 1971.13,1169.02 1979.08,1166.38 C1983.05,1165.05 1988.35,1164.4 1993.32,1164.4 C2002.58,1164.4 2008.53,1166.38 2013.18,1175.32 C2017.8,1184.26 2023.77,1205.44 2023.77,1213.71 C2023.77,1229.93 2012.5,1232.58 1998.94,1232.58 M1996.28,1153.8 C1950.61,1153.8 1934.39,1176.98 1934.39,1198.49 C1934.39,1220.01 1950.61,1243.18 1996.28,1243.18 C2041.97,1243.18 2057.85,1220.01 2057.85,1198.49 C2057.85,1176.98 2041.97,1153.8 1996.28,1153.8"/>
<path class="Note" d="M4829.01,1273.92 C4819.74,1273.92 4813.44,1271.27 4809.15,1263 C4804.83,1254.72 4798.88,1233.53 4798.55,1224.59 C4797.9,1215.66 4801.19,1210.36 4809.15,1207.72 C4813.12,1206.39 4818.41,1205.74 4823.38,1205.74 C4832.65,1205.74 4838.6,1207.72 4843.24,1216.66 C4847.87,1225.59 4853.83,1246.78 4853.83,1255.05 C4853.83,1271.27 4842.57,1273.92 4829.01,1273.92 M4826.35,1195.14 C4780.68,1195.14 4764.46,1218.31 4764.46,1239.83 C4764.46,1261.34 4780.68,1284.52 4826.35,1284.52 C4872.04,1284.52 4887.91,1261.34 4887.91,1239.83 C4887.91,1218.31 4872.04,1195.14 4826.35,1195.14"/>
<path class="Note" d="M4829.01,1108.57 C4819.74,1108.57 4813.44,1105.91 4809.15,1097.65 C4804.83,1089.37 4798.88,1068.18 4798.55,1059.24 C4797.9,1050.3 4801.19,1045.01 4809.15,1042.37 C4813.12,1041.04 4818.41,1040.38 4823.38,1040.38 C4832.65,1040.38 4838.6,1042.37 4843.24,1051.3 C4847.87,1060.24 4853.83,1081.43 4853.83,1089.69 C4853.83,1105.91 4842.57,1108.57 4829.01,1108.57 M4826.35,1029.79 C4780.68,1029.79 4764.46,1052.96 4764.46,1074.48 C4764.46,1095.99 4780.68,1119.16 4826.35,1119.16 C4872.04,1119.16 4887.91,1095.99 4887.91,1074.48 C4887.91,1052.96 4872.04,1029.79 4826.35,1029.79"/>
<path class="Note" d="M3847.28,1149.91 C3838.02,1149.91 3831.72,1147.25 3827.42,1138.99 C3823.11,1130.7 3817.16,1109.52 3816.83,1100.58 C3816.17,1091.64 3819.47,1086.34 3827.42,1083.7 C3831.39,1082.38 3836.69,1081.72 3841.66,1081.72 C3850.92,1081.72 3856.88,1083.7 3861.52,1092.64 C3866.14,1101.58 3872.11,1122.77 3872.11,1131.03 C3872.11,1147.25 3860.85,1149.91 3847.28,1149.91 M3844.63,1071.13 C3798.96,1071.13 3782.74,1094.3 3782.74,1115.81 C3782.74,1137.33 3798.96,1160.5 3844.63,1160.5 C3890.31,1160.5 3906.19,1137.33 3906.19,1115.81 C3906.19,1094.3 3890.31,1071.13 3844.63,1071.13"/>
<path class="Note" d="M3847.28,1273.92 C3838.02,1273.92 3831.72,1271.27 3827.42,1263 C3823.11,1254.72 3817.16,1233.53 3816.83,1224.59 C3816.17,1215.66 3819.47,1210.36 3827.42,1207.72 C3831.39,1206.39 3836.69,1205.74 3841.66,1205.74 C3850.92,1205.74 3856.88,1207.72 3861.52,1216.66 C3866.14,1225.59 3872.11,1246.78 3872.11,1255.05 C3872.11,1271.27 3860.85,1273.92 3847.28,1273.92 M3844.63,1195.14 C3798.96,1195.14 3782.74,1218.31 3782.74,1239.83 C3782.74,1261.34 3798.96,1284.52 3844.63,1284.52 C3890.31,1284.52 3906.19,1261.34 3906.19,1239.83 C3906.19,1218.31 3890.31,1195.14 3844.63,1195.14"/>
<path class="Note" d="M7774.18,1273.92 C7764.91,1273.92 7758.61,1271.27 7754.32,1263 C7750,1254.72 7744.05,1233.53 7743.72,1224.59 C7743.07,1215.66 7746.36,1210.36 7754.32,1207.72 C7758.29,1206.39 7763.58,1205.74 7768.55,1205.74 C7777.82,1205.74 7783.77,1207.72 7788.41,1216.66 C7793.04,1225.59 7799,1246.78 7799,1255.05 C7799,1271.27 7787.74,1273.92 7774.18,1273.92 M7771.52,1195.14 C7725.85,1195.14 7709.63,1218.31 7709.63,1239.83 C7709.63,1261.34 7725.85,1284.52 7771.52,1284.52 C7817.21,1284.52 7833.08,1261.34 7833.08,1239.83 C7833.08,1218.31 7817.21,1195.14 7771.52,1195.14"/>
<path class="Note" d="M6792.45,1025.89 C6783.19,1025.89 6776.89,1023.24 6772.59,1014.97 C6768.28,1006.69 6762.33,985.501 6762,976.563 C6761.34,967.626 6764.64,962.329 6772.59,959.688 C6776.56,958.36 6781.86,957.704 6786.83,957.704 C6796.09,957.704 6802.05,959.688 6806.69,968.626 C6811.31,977.563 6817.28,998.751 6817.28,1007.02 C6817.28,1023.24 6806.02,1025.89 6792.45,1025.89 M6789.8,947.11 C6744.12,947.11 6727.91,970.282 6727.91,991.798 C6727.91,1013.31 6744.12,1036.49 6789.8,1036.49 C6835.48,1036.49 6851.36,1013.31 6851.36,991.798 C6851.36,970.282 6835.48,947.11 6789.8,947.11"/>
<path class="Note" d="M5810.73,1273.92 C5801.46,1273.92 5795.17,1271.27 5790.87,1263 C5786.56,1254.72 5780.6,1233.53 5780.28,1224.59 C5779.62,1215.66 5782.92,1210.36 5790.87,1207.72 C5794.84,1206.39 5800.14,1205.74 5805.1,1205.74 C5814.37,1205.74 5820.32,1207.72 5824.96,1216.66 C5829.59,1225.59 5835.56,1246.78 5835.56,1255.05 C5835.56,1271.27 5824.29,1273.92 5810.73,1273.92 M5808.07,1195.14 C5762.4,1195.14 5746.18,1218.31 5746.18,1239.83 C5746.18,1261.34 5762.4,1284.52 5808.07,1284.52 C5853.76,1284.52 5869.64,1261.34 5869.64,1239.83 C5869.64,1218.31 5853.76,1195.14 5808.07,1195.14"/>
<path class="Note" d="M5810.73,1067.23 C5801.46,1067.23 5795.17,1064.57 5790.87,1056.31 C5786.56,1048.03 5780.6,1026.84 5780.28,1017.9 C5779.62,1008.96 5782.92,1003.67 5790.87,1001.03 C5794.84,999.699 5800.14,999.043 5805.1,999.043 C5814.37,999.043 5820.32,1001.03 5824.96,1009.96 C5829.59,1018.9 5835.56,1040.09 5835.56,1048.36 C5835.56,1064.57 5824.29,1067.23 5810.73,1067.23 M5808.07,988.449 C5762.4,988.449 5746.18,1011.62 5746.18,1033.14 C5746.18,1054.65 5762.4,1077.82 5808.07,1077.82 C5853.76,1077.82 5869.64,1054.65 5869.64,1033.14 C5869.64,1011.62 5853.76,988.449 5808.07,988.449"/>
<path class="Note" d="M2865.56,1273.92 C2856.3,1273.92 2850,1271.27 2845.7,1263 C2841.39,1254.72 2835.44,1233.53 2835.11,1224.59 C2834.45,1215.66 2837.75,1210.36 2845.7,1207.72 C2849.67,1206.39 2854.97,1205.74 2859.94,1205.74 C2869.2,1205.74 2875.15,1207.72 2879.8,1216.66 C2884.42,1225.59 2890.39,1246.78 2890.39,1255.05 C2890.39,1271.27 2879.12,1273.92 2865.56,1273.92 M2862.9,1195.14 C2817.23,1195.14 2801.01,1218.31 2801.01,1239.83 C2801.01,1261.34 2817.23,1284.52 2862.9,1284.52 C2908.59,1284.52 2924.47,1261.34 2924.47,1239.83 C2924.47,1218.31 2908.59,1195.14 2862.9,1195.14"/>
<path class="Note" d="M2865.56,1191.25 C2856.3,1191.25 2850,1188.59 2845.7,1180.32 C2841.39,1172.04 2835.44,1150.86 2835.11,1141.92 C2834.45,1132.98 2837.75,1127.68 2845.7,1125.04 C2849.67,1123.71 2854.97,1123.06 2859.94,1123.06 C2869.2,1123.06 2875.15,1125.04 2879.8,1133.98 C2884.42,1142.92 2890.39,1164.11 2890.39,1172.37 C2890.39,1188.59 2879.12,1191.25 2865.56,1191.25 M2862.9,1112.46 C2817.23,1112.46 2801.01,1135.64 2801.01,1157.15 C2801.01,1178.67 2817.23,1201.84 2862.9,1201.84 C2908.59,1201.84 2924.47,1178.67 2924.47,1157.15 C2924.47,1135.64 2908.59,1112.46 2862.9,1112.46"/>
<path class="Note" d="M7774.18,984.553 C7764.91,984.553 7758.61,981.897 7754.32,973.631 C7750,965.35 7744.05,944.162 7743.72,935.225 C7743.07,926.287 7746.36,920.991 7754.32,918.35 C7758.29,917.022 7763.58,916.366 7768.55,916.366 C7777.82,916.366 7783.77,918.35 7788.41,927.287 C7793.04,936.225 7799,957.412 7799,965.678 C7799,981.897 7787.74,984.553 7774.18,984.553 M7771.52,905.772 C7725.85,905.772 7709.63,928.944 7709.63,950.459 C7709.63,971.975 7725.85,995.147 7771.52,995.147 C7817.21,995.147 7833.08,971.975 7833.08,950.459 C7833.08,928.944 7817.21,905.772 7771.52,905.772"/>
<path class="Note" d="M6792.45,1273.92 C6783.19,1273.92 6776.89,1271.27 6772.59,1263 C6768.28,1254.72 6762.33,1233.53 6762,1224.59 C6761.34,1215.66 6764.64,1210.36 6772.59,1207.72 C6776.56,1206.39 6781.86,1205.74 6786.83,1205.74 C6796.09,1205.74 6802.05,1207.72 6806.69,1216.66 C6811.31,1225.59 6817.28,1246.78 6817.28,1255.05 C6817.28,1271.27 6806.02,1273.92 6792.45,1273.92 M6789.8,1195.14 C6744.12,1195.14 6727.91,1218.31 6727.91,1239.83 C6727.91,1261.34 6744.12,1284.52 6789.8,1284.52 C6835.48,1284.52 6851.36,1261.34 6851.36,1239.83 C6851.36,1218.31 6835.48,1195.14 6789.8,1195.14"/>
<path class="Clef" d="M339.921,481.573 C333.296,482.901 327.015,483.558 320.718,483.558 C273.39,483.558 233.015,450.464 233.015,400.48 C233.015,360.089 261.484,324.011 290.609,298.855 C296.234,293.901 301.531,289.261 306.499,284.292 C309.468,302.167 311.796,317.73 314.109,331.292 C283.984,340.23 263.468,372.011 263.468,403.12 C263.468,426.292 281.671,458.073 308.14,458.073 C310.796,458.073 313.781,456.745 313.781,453.761 C313.781,450.792 310.468,449.136 306.499,446.48 C293.577,438.542 286.296,429.933 286.296,413.714 C286.296,393.526 301.202,377.308 320.718,372.667 L339.921,481.573 M310.796,141.308 C313.781,128.073 328.999,93.3077 346.218,93.3077 C351.171,93.3077 359.124,109.526 359.124,132.37 C359.124,166.792 333.64,192.62 310.796,215.12 C308.812,201.886 307.156,188.98 307.156,175.073 C307.156,162.823 308.14,151.573 310.796,141.308 M386.921,420.339 C386.921,443.839 377.327,467.995 353.827,477.605 C346.874,437.886 337.937,385.245 335.624,370.683 C365.406,370.683 386.921,390.886 386.921,420.339 M241.281,583.183 C241.281,605.026 258.171,633.823 302.859,633.823 C318.406,633.823 331.984,629.855 343.89,622.573 C361.765,609.995 366.406,588.151 366.406,567.292 C366.406,554.386 364.421,539.495 361.109,520.62 C360.109,514.011 358.124,504.073 356.14,491.167 C388.577,480.573 412.749,446.823 412.749,412.73 C412.749,362.745 377.327,328.98 328.999,328.98 C325.687,309.12 322.374,289.589 319.406,271.058 C354.484,234.323 378.656,192.948 378.656,140.323 C378.656,110.198 369.374,85.6983 364.093,73.7921 C356.14,56.9015 346.546,45.3233 340.577,45.3233 C338.265,45.3233 328.015,49.2921 317.077,62.1983 C295.906,87.3546 289.937,129.73 289.937,157.526 C289.937,175.401 291.593,191.62 297.218,228.698 C296.89,229.026 279.687,246.558 272.734,252.198 C242.609,280.323 200.906,320.37 200.906,386.573 C200.906,448.464 254.859,497.12 316.421,497.12 C326.015,497.12 334.952,496.136 342.577,494.808 C348.859,526.589 352.499,549.761 352.499,567.292 C352.499,601.714 334.952,619.933 301.531,619.933 C293.577,619.933 286.64,618.276 285.968,618.276 C285.64,617.933 284.984,617.605 284.984,617.276 C284.984,616.62 285.64,616.292 286.64,615.948 C302.187,613.636 317.749,600.401 317.749,579.214 C317.749,561.339 304.171,542.48 279.359,542.48 C256.187,542.48 241.281,561.339 241.281,583.183"/>
<path class="Clef" d="M388.906,1075.09 C388.906,1084.36 396.187,1091.64 404.796,1091.64 C413.406,1091.64 420.687,1084.36 420.687,1075.09 C420.687,1065.83 413.406,1058.22 404.796,1058.22 C396.187,1058.22 388.906,1065.83 388.906,1075.09 M284.984,1033.06 C259.827,1033.06 239.624,1047.63 239.296,1047.63 C219.765,1061.86 207.187,1083.7 207.187,1107.86 C207.187,1132.03 221.093,1149.91 245.593,1149.91 C266.781,1149.91 283.327,1135.67 283.327,1113.83 C283.327,1094.95 266.781,1079.41 248.234,1079.41 C244.265,1079.41 240.624,1080.06 237.64,1081.06 C234.343,1082.38 228.702,1085.69 226.062,1088 C228.374,1073.44 238.312,1058.88 251.218,1051.92 C259.484,1047.3 270.077,1045.31 281.671,1045.31 C315.437,1045.31 331.984,1072.45 331.984,1128.06 C331.984,1171.08 304.499,1232.99 272.062,1262.11 C237.64,1293.55 205.202,1308.45 204.874,1308.45 C204.874,1308.45 200.906,1310.77 200.906,1314.74 C200.906,1315.41 201.234,1315.74 201.234,1316.39 C202.234,1319.7 205.202,1320.36 207.187,1320.36 C207.531,1320.36 208.515,1320.03 208.843,1320.03 C209.187,1320.03 246.921,1304.47 277.031,1280.97 C323.374,1247.55 375.671,1188.63 375.671,1127.72 C375.671,1070.13 344.562,1033.06 284.984,1033.06 M388.906,1156.86 C388.906,1166.13 396.187,1173.74 404.796,1173.74 C413.406,1173.74 420.687,1166.13 420.687,1156.86 C420.687,1147.58 413.406,1139.97 404.796,1139.97 C396.187,1139.97 388.906,1147.58 388.906,1156.86"/>
<path class="TimeSig" transform="matrix(1.25,0,0,1,497.414,248.517)" d="M68.8438,42.0313 L68.8438,66.5313 L41.375,66.5313 C39.0625,66.5313 36.7344,68.5156 36.7344,71.1563 L36.7344,77.4531 C36.7344,80.0938 39.0625,82.0938 41.375,82.0938 L141.672,82.0938 C144.313,82.0938 146.297,80.0938 146.297,77.4531 L146.297,71.1563 C146.297,68.5156 144.313,66.5313 141.672,66.5313 L111.875,66.5313 L111.875,42.0313 L141.672,42.0313 C144.313,42.0313 146.297,39.7188 146.297,37.0781 L146.297,30.7813 C146.297,28.4688 144.313,26.1563 141.672,26.1563 L111.875,26.1563 L111.875,-26.4844 C111.875,-28.4688 110.891,-30.125 109.563,-30.7813 L105.594,-32.7656 C104.922,-33.0938 104.594,-33.0938 103.938,-33.0938 C102.609,-33.0938 101.281,-33.0938 100.297,-32.1094 L70.1719,-4.64063 C69.1719,-3.64063 68.8438,-2.3125 68.8438,-1 L68.8438,26.1563 L30.4531,26.1563 C30.4531,26.1563 67.5156,-13.5781 106.578,-65.875 C107.906,-67.5156 108.234,-69.1719 108.234,-70.5 C108.234,-72.1563 107.578,-73.4844 107.234,-73.8125 L99.9531,-81.0938 C98.9688,-81.75 97.9688,-82.4219 96.6563,-82.4219 C94.6719,-82.4219 49.9844,-82.4219 47.3281,-82.4219 C45.0156,-82.4219 43.3594,-80.4375 43.0313,-78.4531 C43.0313,-78.4531 41.375,-53.9531 32.7656,-27.1406 C24.1563,-0.328125 14.2344,16.2188 5.625,28.4688 C5.625,28.4688 4.64063,30.125 4.64063,32.1094 C4.64063,32.7656 4.64063,33.4375 4.96875,34.0938 C5.95313,36.4063 8.28125,40.0469 8.28125,40.0469 C8.28125,40.0469 8.9375,42.0313 11.9219,42.0313 L68.8438,42.0313 "/>
<path class="TimeSig" transform="matrix(1.25,0,0,1,497.414,412.9)" d="M68.8438,42.0313 L68.8438,66.5313 L41.375,66.5313 C39.0625,66.5313 36.7344,68.5156 36.7344,71.1563 L36.7344,77.4531 C36.7344,80.0938 39.0625,82.0938 41.375,82.0938 L141.672,82.0938 C144.313,82.0938 146.297,80.0938 146.297,77.4531 L146.297,71.1563 C146.297,68.5156 144.313,66.5313 141.672,66.5313 L111.875,66.5313 L111.875,42.0313 L141.672,42.0313 C144.313,42.0313 146.297,39.7188 146.297,37.0781 L146.297,30.7813 C146.297,28.4688 144.313,26.1563 141.672,26.1563 L111.875,26.1563 L111.875,-26.4844 C111.875,-28.4688 110.891,-30.125 109.563,-30.7813 L105.594,-32.7656 C104.922,-33.0938 104.594,-33.0938 103.938,-33.0938 C102.609,-33.0938 101.281,-33.0938 100.297,-32.1094 L70.1719,-4.64063 C69.1719,-3.64063 68.8438,-2.3125 68.8438,-1 L68.8438,26.1563 L30.4531,26.1563 C30.4531,26.1563 67.5156,-13.5781 106.578,-65.875 C107.906,-67.5156 108.234,-69.1719 108.234,-70.5 C108.234,-72.1563 107.578,-73.4844 107.234,-73.8125 L99.9531,-81.0938 C98.9688,-81.75 97.9688,-82.4219 96.6563,-82.4219 C94.6719,-82.4219 49.9844,-82.4219 47.3281,-82.4219 C45.0156,-82.4219 43.3594,-80.4375 43.0313,-78.4531 C43.0313,-78.4531 41.375,-53.9531 32.7656,-27.1406 C24.1563,-0.328125 14.2344,16.2188 5.625,28.4688 C5.625,28.4688 4.64063,30.125 4.64063,32.1094 C4.64063,32.7656 4.64063,33.4375 4.96875,34.0938 C5.95313,36.4063 8.28125,40.0469 8.28125,40.0469 C8.28125,40.0469 8.9375,42.0313 11.9219,42.0313 L68.8438,42.0313 "/>
<path class="TimeSig" transform="matrix(1.25,0,0,1,497.414,1116.63)" d="M68.8438,42.0313 L68.8438,66.5313 L41.375,66.5313 C39.0625,66.5313 36.7344,68.5156 36.7344,71.1563 L36.7344,77.4531 C36.7344,80.0938 39.0625,82.0938 41.375,82.0938 L141.672,82.0938 C144.313,82.0938 146.297,80.0938 146.297,77.4531 L146.297,71.1563 C146.297,68.5156 144.313,66.5313 141.672,66.5313 L111.875,66.5313 L111.875,42.0313 L141.672,42.0313 C144.313,42.0313 146.297,39.7188 146.297,37.0781 L146.297,30.7813 C146.297,28.4688 144.313,26.1563 141.672,26.1563 L111.875,26.1563 L111.875,-26.4844 C111.875,-28.4688 110.891,-30.125 109.563,-30.7813 L105.594,-32.7656 C104.922,-33.0938 104.594,-33.0938 103.938,-33.0938 C102.609,-33.0938 101.281,-33.0938 100.297,-32.1094 L70.1719,-4.64063 C69.1719,-3.64063 68.8438,-2.3125 68.8438,-1 L68.8438,26.1563 L30.4531,26.1563 C30.4531,26.1563 67.5156,-13.5781 106.578,-65.875 C107.906,-67.5156 108.234,-69.1719 108.234,-70.5 C108.234,-72.1563 107.578,-73.4844 107.234,-73.8125 L99.9531,-81.0938 C98.9688,-81.75 97.9688,-82.4219 96.6563,-82.4219 C94.6719,-82.4219 49.9844,-82.4219 47.3281,-82.4219 C45.0156,-82.4219 43.3594,-80.4375 43.0313,-78.4531 C43.0313,-78.4531 41.375,-53.9531 32.7656,-27.1406 C24.1563,-0.328125 14.2344,16.2188 5.625,28.4688 C5.625,28.4688 4.64063,30.125 4.64063,32.1094 C4.64063,32.7656 4.64063,33.4375 4.96875,34.0938 C5.95313,36.4063 8.28125,40.0469 8.28125,40.0469 C8.28125,40.0469 8.9375,42.0313 11.9219,42.0313 L68.8438,42.0313 "/>
<path class="TimeSig" transform="matrix(1.25,0,0,1,497.414,1281.01)" d="M68.8438,42.0313 L68.8438,66.5313 L41.375,66.5313 C39.0625,66.5313 36.7344,68.5156 36.7344,71.1563 L36.7344,77.4531 C36.7344,80.0938 39.0625,82.0938 41.375,82.0938 L141.672,82.0938 C144.313,82.0938 146.297,80.0938 146.297,77.4531 L146.297,71.1563 C146.297,68.5156 144.313,66.5313 141.672,66.5313 L111.875,66.5313 L111.875,42.0313 L141.672,42.0313 C144.313,42.0313 146.297,39.7188 146.297,37.0781 L146.297,30.7813 C146.297,28.4688 144.313,26.1563 141.672,26.1563 L111.875,26.1563 L111.875,-26.4844 C111.875,-28.4688 110.891,-30.125 109.563,-30.7813 L105.594,-32.7656 C104.922,-33.0938 104.594,-33.0938 103.938,-33.0938 C102.609,-33.0938 101.281,-33.0938 100.297,-32.1094 L70.1719,-4.64063 C69.1719,-3.64063 68.8438,-2.3125 68.8438,-1 L68.8438,26.1563 L30.4531,26.1563 C30.4531,26.1563 67.5156,-13.5781 106.578,-65.875 C107.906,-67.5156 108.234,-69.1719 108.234,-70.5 C108.234,-72.1563 107.578,-73.4844 107.234,-73.8125 L99.9531,-81.0938 C98.9688,-81.75 97.9688,-82.4219 96.6563,-82.4219 C94.6719,-82.4219 49.9844,-82.4219 47.3281,-82.4219 C45.0156,-82.4219 43.3594,-80.4375 43.0313,-78.4531 C43.0313,-78.4531 41.375,-53.9531 32.7656,-27.1406 C24.1563,-0.328125 14.2344,16.2188 5.625,28.4688 C5.625,28.4688 4.64063,30.125 4.64063,32.1094 C4.64063,32.7656 4.64063,33.4375 4.96875,34.0938 C5.95313,36.4063 8.28125,40.0469 8.28125,40.0469 C8.28125,40.0469 8.9375,42.0313 11.9219,42.0313 L68.8438,42.0313 "/>
<path class="StaffText" d="M4792.79,754.379 C4801.81,756.551 4806.32,757.223 4812.99,757.223 C4827.2,757.223 4837.54,752.379 4843.06,743.02 C4844.9,740.02 4845.56,738.348 4845.56,737.02 C4845.56,736.004 4845.23,735.504 4844.23,735.504 C4843.73,735.504 4843.06,735.676 4842.06,736.176 C4833.87,739.692 4829.52,740.52 4819.84,740.52 C4809.15,740.52 4802.48,739.52 4785.45,735.504 C4784.77,749.536 4783.27,767.411 4780.93,788.114 C4777.43,791.786 4776.26,793.957 4776.26,796.629 C4776.26,800.145 4778.43,802.317 4781.6,802.317 C4785.95,802.317 4788.45,798.801 4789.12,792.129 C4794.96,787.942 4800.48,786.114 4807.15,786.114 C4822.18,786.114 4831.04,797.473 4831.04,816.676 C4831.04,834.051 4825.52,848.411 4806.15,848.411 C4796.13,848.411 4785.77,843.223 4785.77,838.051 C4785.77,836.879 4786.77,835.551 4788.77,834.379 C4793.96,831.207 4795.46,829.036 4795.46,824.52 C4795.46,818.676 4790.95,814.176 4784.95,814.176 C4778.26,814.176 4772.91,820.348 4772.91,828.192 C4772.91,836.551 4777.76,844.895 4785.27,850.082 C4790.95,853.754 4797.63,855.582 4806.48,855.582 C4832.7,855.582 4849.24,840.223 4849.24,815.676 C4849.24,792.957 4834.21,777.754 4811.49,777.754 C4804.31,777.754 4799.13,778.926 4789.95,782.77 L4792.79,754.379 M4890.81,775.254 L4890.81,742.192 L4883.95,742.192 C4882.27,763.895 4874.93,774.926 4861.4,775.926 L4861.4,782.442 L4875.1,782.442 L4875.1,825.02 C4875.1,836.723 4875.43,840.895 4877.1,844.739 C4879.77,851.739 4886.46,855.582 4896.15,855.582 C4911.18,855.582 4920.85,844.239 4920.85,826.536 C4920.85,825.52 4920.85,824.364 4920.7,822.692 L4913.68,822.692 C4913.18,837.723 4908.84,845.395 4900.65,845.395 C4896.81,845.395 4893.48,843.395 4892.31,840.551 C4891.31,838.223 4890.81,834.051 4890.81,828.036 L4890.81,782.442 L4915.35,782.442 L4915.35,775.254 L4890.81,775.254 M4956.81,730.004 L4925.9,731.832 L4925.9,739.02 L4933.91,739.02 C4940.27,739.176 4941.1,740.192 4941.1,747.364 L4941.1,840.551 C4940.93,842.895 4940.77,843.895 4940.1,844.739 C4938.93,846.239 4935.76,846.911 4928.57,847.067 L4927.91,847.067 L4927.91,853.082 L4970.16,853.082 L4970.16,847.067 L4969.49,847.067 C4958.31,846.739 4956.81,845.895 4956.81,839.895 L4956.81,815.176 C4956.81,806.989 4957.98,799.473 4959.81,795.629 C4963.48,788.114 4970.84,782.942 4978.01,782.942 C4982.35,782.942 4987.37,785.442 4989.7,788.786 C4992.37,792.457 4993.54,797.473 4993.54,805.645 L4993.54,840.551 C4993.37,842.895 4993.21,843.895 4992.54,844.739 C4991.37,846.239 4988.02,846.911 4980.85,847.067 L4980.18,847.067 L4980.18,853.082 L5022.43,853.082 L5022.43,847.067 L5021.77,847.067 C5010.74,846.739 5009.24,845.895 5009.24,839.895 L5009.24,806.317 C5009.24,794.301 5008.74,791.286 5005.73,785.614 C5001.56,777.426 4993.21,772.754 4983.18,772.754 C4972.34,772.754 4964.32,777.598 4956.81,788.786 L4956.81,730.004 "/>
<path class="StaffText" d="M5772.67,798.848 C5774.34,777.973 5775.18,772.457 5778.86,763.941 C5783.7,752.082 5792.54,745.238 5803.08,745.238 C5808.92,745.238 5812.42,747.066 5812.42,750.082 C5812.42,750.754 5812.26,751.254 5811.59,752.426 C5809.92,755.598 5809.08,758.098 5809.08,760.441 C5809.08,765.941 5813.42,770.113 5819.26,770.113 C5825.78,770.113 5830.29,765.113 5830.29,758.098 C5830.29,746.566 5818.76,738.051 5802.9,738.051 C5768.17,738.051 5754.14,774.629 5754.14,804.191 C5754.14,836.926 5770.17,858.129 5794.89,858.129 C5817.26,858.129 5833.29,840.27 5833.29,818.223 C5833.29,798.52 5819.26,783.816 5800.23,783.816 C5788.87,783.816 5780.53,788.332 5772.67,798.848 M5795.56,794.004 C5807.75,794.004 5815.09,803.52 5815.09,819.395 C5815.09,838.754 5807.42,850.957 5795.22,850.957 C5780.36,850.957 5773.67,834.426 5773.67,821.723 C5773.67,804.52 5782.03,794.004 5795.56,794.004 M5872.53,777.801 L5872.53,744.738 L5865.67,744.738 C5864,766.441 5856.65,777.473 5843.12,778.473 L5843.12,784.988 L5856.83,784.988 L5856.83,827.566 C5856.83,839.27 5857.15,843.441 5858.83,847.285 C5861.5,854.285 5868.18,858.129 5877.87,858.129 C5892.9,858.129 5902.58,846.785 5902.58,829.082 C5902.58,828.066 5902.58,826.91 5902.42,825.238 L5895.4,825.238 C5894.9,840.27 5890.56,847.941 5882.37,847.941 C5878.53,847.941 5875.2,845.941 5874.03,843.098 C5873.03,840.77 5872.53,836.598 5872.53,830.582 L5872.53,784.988 L5897.08,784.988 L5897.08,777.801 L5872.53,777.801 M5938.53,732.551 L5907.62,734.379 L5907.62,741.566 L5915.64,741.566 C5922,741.723 5922.83,742.738 5922.83,749.91 L5922.83,843.098 C5922.65,845.441 5922.5,846.441 5921.83,847.285 C5920.65,848.785 5917.48,849.457 5910.29,849.613 L5909.64,849.613 L5909.64,855.629 L5951.89,855.629 L5951.89,849.613 L5951.22,849.613 C5940.03,849.285 5938.53,848.441 5938.53,842.441 L5938.53,817.723 C5938.53,809.535 5939.7,802.02 5941.53,798.176 C5945.2,790.66 5952.56,785.488 5959.73,785.488 C5964.08,785.488 5969.09,787.988 5971.42,791.332 C5974.09,795.004 5975.26,800.02 5975.26,808.191 L5975.26,843.098 C5975.09,845.441 5974.93,846.441 5974.26,847.285 C5973.09,848.785 5969.75,849.457 5962.58,849.613 L5961.9,849.613 L5961.9,855.629 L6004.15,855.629 L6004.15,849.613 L6003.5,849.613 C5992.47,849.285 5990.97,848.441 5990.97,842.441 L5990.97,808.863 C5990.97,796.848 5990.47,793.832 5987.45,788.16 C5983.28,779.973 5974.93,775.301 5964.9,775.301 C5954.06,775.301 5946.04,780.145 5938.53,791.332 L5938.53,732.551 "/>
<path class="StaffText" d="M2859.73,791.629 C2874.94,786.114 2881.95,777.598 2881.95,764.239 C2881.95,746.692 2868.59,735.504 2847.88,735.504 C2828.34,735.504 2813.48,747.036 2813.48,762.223 C2813.48,769.082 2817.98,773.926 2824.5,773.926 C2830.34,773.926 2834.36,769.911 2834.36,763.895 C2834.36,760.223 2833.02,758.051 2829.17,755.379 C2827.5,754.207 2827,753.551 2827,752.379 C2827,747.707 2836.69,742.692 2846.2,742.692 C2858.23,742.692 2864.58,750.207 2864.58,764.395 C2864.58,779.926 2858.23,788.114 2846.38,788.114 C2844.88,788.114 2842.03,787.942 2839.53,787.786 C2838.19,787.614 2836.86,787.614 2835.86,787.614 C2832.34,787.614 2830.52,789.114 2830.52,792.129 C2830.52,794.957 2832.19,796.301 2835.86,796.301 C2836.86,796.301 2838.19,796.301 2839.7,796.129 C2843.03,795.973 2845.7,795.973 2847.55,795.973 C2859.91,795.973 2866.58,804.817 2866.58,821.348 C2866.58,838.723 2858.23,848.411 2843.2,848.411 C2832.69,848.411 2821.33,842.723 2821.33,837.551 C2821.33,836.051 2821.66,835.707 2824.83,833.879 C2829.52,831.036 2831.34,828.192 2831.34,824.02 C2831.34,818.004 2826.84,813.504 2820.83,813.504 C2813.64,813.504 2808.97,819.348 2808.97,828.192 C2808.97,844.395 2823.83,855.582 2845.2,855.582 C2869.42,855.582 2885.13,842.223 2885.13,821.692 C2885.13,805.989 2877.11,796.473 2859.73,791.629 M2928.02,775.254 L2898.45,777.098 L2898.45,784.27 L2905.31,784.27 C2911.66,784.442 2912.48,785.442 2912.48,792.629 L2912.48,840.395 C2912.33,842.895 2912.16,843.895 2911.48,844.739 C2910.31,846.239 2906.98,846.911 2899.8,847.067 L2899.13,847.067 L2899.13,853.082 L2943.72,853.082 L2943.72,847.067 L2940.72,847.067 C2929.53,846.739 2928.02,845.895 2928.02,839.895 L2928.02,830.864 C2928.19,802.817 2938.2,781.442 2951.23,780.77 C2948.89,783.442 2948.23,785.114 2948.23,788.286 C2948.23,793.629 2952.06,797.473 2957.41,797.473 C2963.59,797.473 2967.59,792.957 2967.59,786.286 C2967.59,778.098 2961.92,772.754 2953.08,772.754 C2942.55,772.754 2933.53,781.098 2928.02,795.973 L2928.02,775.254 M3031.42,854.254 L3060.47,853.082 L3060.47,845.895 L3057.47,845.895 C3047.95,845.395 3047.11,844.395 3047.11,833.707 L3047.11,730.004 L3014.38,731.832 L3014.38,739.02 L3024.23,739.02 C3030.58,739.176 3031.42,740.192 3031.42,747.364 L3031.42,785.114 C3025.23,776.598 3018.06,772.754 3008.38,772.754 C2989.5,772.754 2975.14,790.957 2975.14,815.004 C2975.14,838.723 2989,855.582 3008.38,855.582 C3018.89,855.582 3026.08,851.082 3031.42,841.051 L3031.42,854.254 M3011.7,781.77 C3018.56,781.77 3025.06,786.786 3028.08,794.457 C3030.25,799.473 3031.25,806.317 3031.25,814.504 C3031.25,834.051 3023.56,846.567 3011.55,846.567 C2999.69,846.567 2992.67,835.551 2992.67,817.004 C2992.67,806.989 2993.67,799.473 2995.84,793.957 C2998.69,786.442 3004.86,781.77 3011.7,781.77"/>
<path class="StaffText" d="M3848.13,735.504 L3791.35,814.504 L3791.35,823.864 L3838.29,823.864 L3838.29,832.536 C3838.29,841.051 3838.29,841.395 3837.29,842.895 C3835.94,844.739 3832.77,845.239 3823.25,845.239 L3821.41,845.239 L3821.41,853.082 L3870.18,853.082 L3870.18,845.239 L3869.5,845.239 C3859.99,845.239 3856.82,844.739 3855.49,842.895 C3854.49,841.395 3854.49,841.223 3854.49,832.536 L3854.49,823.864 L3874.69,823.864 L3874.69,814.504 L3854.49,814.504 L3854.49,768.911 C3854.49,748.036 3854.49,747.536 3855.32,735.504 L3848.13,735.504 M3838.29,814.504 L3801.54,814.504 L3838.29,763.895 L3838.29,814.504 M3912.08,775.254 L3912.08,742.192 L3905.22,742.192 C3903.55,763.895 3896.21,774.926 3882.68,775.926 L3882.68,782.442 L3896.38,782.442 L3896.38,825.02 C3896.38,836.723 3896.71,840.895 3898.38,844.739 C3901.05,851.739 3907.74,855.582 3917.43,855.582 C3932.46,855.582 3942.13,844.239 3942.13,826.536 C3942.13,825.52 3942.13,824.364 3941.97,822.692 L3934.96,822.692 C3934.46,837.723 3930.11,845.395 3921.93,845.395 C3918.08,845.395 3914.75,843.395 3913.58,840.551 C3912.58,838.223 3912.08,834.051 3912.08,828.036 L3912.08,782.442 L3936.63,782.442 L3936.63,775.254 L3912.08,775.254 M3978.08,730.004 L3947.18,731.832 L3947.18,739.02 L3955.19,739.02 C3961.55,739.176 3962.38,740.192 3962.38,747.364 L3962.38,840.551 C3962.21,842.895 3962.05,843.895 3961.38,844.739 C3960.21,846.239 3957.04,846.911 3949.85,847.067 L3949.19,847.067 L3949.19,853.082 L3991.44,853.082 L3991.44,847.067 L3990.77,847.067 C3979.58,846.739 3978.08,845.895 3978.08,839.895 L3978.08,815.176 C3978.08,806.989 3979.25,799.473 3981.08,795.629 C3984.75,788.114 3992.11,782.942 3999.29,782.942 C4003.63,782.942 4008.65,785.442 4010.97,788.786 C4013.65,792.457 4014.82,797.473 4014.82,805.645 L4014.82,840.551 C4014.65,842.895 4014.49,843.895 4013.82,844.739 C4012.65,846.239 4009.3,846.911 4002.13,847.067 L4001.46,847.067 L4001.46,853.082 L4043.71,853.082 L4043.71,847.067 L4043.05,847.067 C4032.02,846.739 4030.52,845.895 4030.52,839.895 L4030.52,806.317 C4030.52,794.301 4030.02,791.286 4027,785.614 C4022.83,777.426 4014.49,772.754 4004.46,772.754 C3993.61,772.754 3985.6,777.598 3978.08,788.786 L3978.08,730.004 "/>
<path class="StaffText" d="M883.289,730.362 C877.601,737.221 862.242,742.393 846.882,742.721 L846.882,749.909 L861.57,749.909 C871.257,750.081 872.257,751.081 871.929,760.425 L871.929,827.393 C871.929,835.909 871.929,836.253 870.929,837.753 C869.585,839.425 866.414,840.096 857.07,840.096 L846.21,840.096 L846.21,847.94 L912.335,847.94 L912.335,840.096 L903.164,840.096 C893.804,840.096 890.632,839.425 889.289,837.753 C888.132,836.253 888.132,836.081 888.132,827.393 L888.132,758.425 C888.132,749.065 888.46,741.221 889.289,730.362 L883.289,730.362 "/>
<path class="StaffText" d="M7774.02,796.328 C7786.38,789.656 7792.4,781.312 7792.4,770.453 C7792.4,755.078 7778.54,743.89 7759.16,743.89 C7738.79,743.89 7723.93,757.25 7723.93,775.796 C7723.93,782.968 7726.6,790.484 7731.27,795.671 C7734.12,799.015 7736.79,800.843 7742.8,804.015 C7729.1,809.359 7718.41,816.875 7718.41,833.406 C7718.41,842.593 7722.93,851.609 7729.94,856.796 C7736.46,861.468 7745.47,863.968 7756.16,863.968 C7768.52,863.968 7778.87,860.64 7785.88,854.625 C7792.9,848.281 7797.24,838.093 7797.24,827.906 C7797.24,818.375 7793.57,809.859 7786.72,803.843 C7783.38,800.843 7780.38,799.171 7774.02,796.328 M7756.16,789.656 C7742.63,784.812 7736.79,778.468 7736.79,768.781 C7736.79,758.093 7745.47,751.078 7758.66,751.078 C7771.52,751.078 7780.04,759.265 7780.04,771.453 C7780.04,780.14 7776.71,785.812 7767.18,793.828 L7756.16,789.656 M7765.85,812.875 C7778.54,817.375 7783.88,823.89 7783.88,834.921 C7783.88,848.281 7773.37,856.796 7756.99,856.796 C7741.3,856.796 7732.27,848.281 7732.27,833.406 C7732.27,820.89 7737.46,813.375 7750.47,807.359 L7765.85,812.875 M7836.97,783.64 L7836.97,750.578 L7830.12,750.578 C7828.44,772.281 7821.1,783.312 7807.57,784.312 L7807.57,790.828 L7821.27,790.828 L7821.27,833.406 C7821.27,845.109 7821.6,849.281 7823.27,853.125 C7825.94,860.125 7832.63,863.968 7842.32,863.968 C7857.35,863.968 7867.02,852.625 7867.02,834.921 C7867.02,833.906 7867.02,832.75 7866.87,831.078 L7859.85,831.078 C7859.35,846.109 7855.01,853.781 7846.82,853.781 C7842.97,853.781 7839.65,851.781 7838.47,848.937 C7837.47,846.609 7836.97,842.437 7836.97,836.421 L7836.97,790.828 L7861.52,790.828 L7861.52,783.64 L7836.97,783.64 M7902.97,738.39 L7872.07,740.218 L7872.07,747.406 L7880.08,747.406 C7886.44,747.562 7887.27,748.578 7887.27,755.75 L7887.27,848.937 C7887.1,851.281 7886.94,852.281 7886.27,853.125 C7885.1,854.625 7881.93,855.296 7874.74,855.453 L7874.08,855.453 L7874.08,861.468 L7916.33,861.468 L7916.33,855.453 L7915.66,855.453 C7904.47,855.125 7902.97,854.281 7902.97,848.281 L7902.97,823.562 C7902.97,815.375 7904.15,807.859 7905.97,804.015 C7909.65,796.5 7917.01,791.328 7924.18,791.328 C7928.52,791.328 7933.54,793.828 7935.87,797.171 C7938.54,800.843 7939.71,805.859 7939.71,814.031 L7939.71,848.937 C7939.54,851.281 7939.38,852.281 7938.71,853.125 C7937.54,854.625 7934.19,855.296 7927.02,855.453 L7926.35,855.453 L7926.35,861.468 L7968.6,861.468 L7968.6,855.453 L7967.94,855.453 C7956.91,855.125 7955.41,854.281 7955.41,848.281 L7955.41,814.703 C7955.41,802.687 7954.91,799.671 7951.9,794 C7947.72,785.812 7939.38,781.14 7929.35,781.14 C7918.51,781.14 7910.49,785.984 7902.97,797.171 L7902.97,738.39 "/>
<path class="StaffText" d="M6741.85,779.004 L6749.19,780.176 L6752.19,766.973 C6754.71,755.957 6755.86,754.285 6760.71,754.285 C6761.55,754.285 6762.88,754.285 6764.39,754.457 C6784.93,755.457 6784.93,755.457 6792.61,755.457 C6794.78,755.457 6798.63,755.457 6803.3,755.285 L6791.94,778.16 C6779.58,802.723 6778.08,805.723 6773.91,816.082 C6768.72,828.598 6766.05,839.129 6766.05,846.145 C6766.05,853.816 6770.07,858.504 6776.58,858.504 C6784.6,858.504 6787.77,853.16 6787.6,838.629 C6786.77,814.582 6789.77,802.879 6807.64,763.801 C6810.64,757.285 6813.82,750.613 6816.83,744.098 L6816.83,739.254 C6806.8,740.098 6801.46,740.426 6791.11,740.426 C6776.58,740.426 6765.05,739.926 6747.02,738.582 L6741.85,779.004 M6857.39,778.332 L6857.39,745.27 L6850.53,745.27 C6848.86,766.973 6841.52,778.004 6827.99,779.004 L6827.99,785.52 L6841.69,785.52 L6841.69,828.098 C6841.69,839.801 6842.02,843.973 6843.69,847.816 C6846.36,854.816 6853.05,858.66 6862.74,858.66 C6877.77,858.66 6887.44,847.316 6887.44,829.613 C6887.44,828.598 6887.44,827.441 6887.28,825.77 L6880.27,825.77 C6879.77,840.801 6875.43,848.473 6867.24,848.473 C6863.39,848.473 6860.07,846.473 6858.89,843.629 C6857.89,841.301 6857.39,837.129 6857.39,831.113 L6857.39,785.52 L6881.94,785.52 L6881.94,778.332 L6857.39,778.332 M6923.39,733.082 L6892.49,734.91 L6892.49,742.098 L6900.5,742.098 C6906.86,742.254 6907.69,743.27 6907.69,750.441 L6907.69,843.629 C6907.52,845.973 6907.36,846.973 6906.69,847.816 C6905.52,849.316 6902.35,849.988 6895.16,850.145 L6894.5,850.145 L6894.5,856.16 L6936.75,856.16 L6936.75,850.145 L6936.08,850.145 C6924.89,849.816 6923.39,848.973 6923.39,842.973 L6923.39,818.254 C6923.39,810.066 6924.57,802.551 6926.39,798.707 C6930.07,791.191 6937.43,786.02 6944.6,786.02 C6948.94,786.02 6953.96,788.52 6956.28,791.863 C6958.96,795.535 6960.13,800.551 6960.13,808.723 L6960.13,843.629 C6959.96,845.973 6959.8,846.973 6959.13,847.816 C6957.96,849.316 6954.61,849.988 6947.44,850.145 L6946.77,850.145 L6946.77,856.16 L6989.02,856.16 L6989.02,850.145 L6988.36,850.145 C6977.33,849.816 6975.83,848.973 6975.83,842.973 L6975.83,809.395 C6975.83,797.379 6975.33,794.363 6972.32,788.691 C6968.14,780.504 6959.8,775.832 6949.77,775.832 C6938.93,775.832 6930.91,780.676 6923.39,791.863 L6923.39,733.082 "/>
<path class="StaffText" d="M1906.57,811.862 L1899.21,811.862 L1897.56,820.378 C1895.39,831.237 1894.04,832.237 1883.68,832.237 L1846.28,832.237 C1857.81,820.221 1861.64,816.706 1872.34,808.362 C1887.53,796.675 1894.04,790.831 1897.89,785.815 C1903.23,778.471 1905.9,771.112 1905.9,762.94 C1905.9,743.893 1890.2,730.362 1868.32,730.362 C1847.12,730.362 1830.92,743.893 1830.92,761.768 C1830.92,772.284 1836.26,779.471 1844.11,779.471 C1850.29,779.471 1854.46,775.3 1854.46,769.284 C1854.46,765.112 1852.12,761.268 1848.62,759.753 C1842.43,757.253 1842.11,756.925 1842.11,754.753 C1842.11,752.253 1843.78,748.409 1846.11,745.565 C1850.29,740.393 1857.14,737.55 1864.98,737.55 C1878.84,737.55 1887.03,746.065 1887.03,760.096 C1887.03,772.456 1881.18,783.643 1867.32,798.346 C1854.96,811.362 1847.28,819.55 1844.45,822.721 C1838.43,829.737 1835.42,833.581 1828.07,843.268 L1828.07,847.94 L1903.4,847.94 L1906.57,811.862 M1948.64,770.112 L1919.75,771.956 L1919.75,779.128 L1925.75,779.128 C1932.11,779.3 1932.93,780.3 1932.93,787.487 L1932.93,835.253 C1932.76,837.753 1932.61,838.753 1931.93,839.596 C1930.76,841.096 1927.59,841.768 1920.4,841.925 L1919.75,841.925 L1919.75,847.94 L1962,847.94 L1962,841.925 L1961.32,841.925 C1950.14,841.596 1948.64,840.753 1948.64,834.753 L1948.64,810.034 C1948.64,801.846 1949.81,794.331 1951.64,790.487 C1955.15,782.971 1962.67,777.8 1969.84,777.8 C1974.18,777.8 1979.2,780.128 1981.7,783.643 C1984.2,787.315 1985.37,792.331 1985.37,800.346 L1985.37,835.253 C1985.2,837.753 1985.04,838.753 1984.37,839.596 C1983.2,841.096 1979.86,841.768 1972.68,841.925 L1972.01,841.925 L1972.01,847.94 L2014.26,847.94 L2014.26,841.925 L2013.61,841.925 C2002.57,841.596 2001.07,840.753 2001.07,834.753 L2001.07,801.175 C2001.07,789.159 2000.57,786.143 1997.56,780.471 C1993.39,772.456 1985.04,767.612 1975.01,767.612 C1964.17,767.612 1955.98,772.612 1948.64,783.643 L1948.64,770.112 M2080.7,849.112 L2109.75,847.94 L2109.75,840.753 L2106.75,840.753 C2097.23,840.253 2096.39,839.253 2096.39,828.565 L2096.39,724.862 L2063.65,726.69 L2063.65,733.878 L2073.51,733.878 C2079.86,734.034 2080.7,735.05 2080.7,742.221 L2080.7,779.971 C2074.51,771.456 2067.34,767.612 2057.65,767.612 C2038.78,767.612 2024.42,785.815 2024.42,809.862 C2024.42,833.581 2038.28,850.44 2057.65,850.44 C2068.17,850.44 2075.36,845.94 2080.7,835.909 L2080.7,849.112 M2060.98,776.628 C2067.84,776.628 2074.34,781.643 2077.36,789.315 C2079.53,794.331 2080.53,801.175 2080.53,809.362 C2080.53,828.909 2072.84,841.425 2060.82,841.425 C2048.96,841.425 2041.95,830.409 2041.95,811.862 C2041.95,801.846 2042.95,794.331 2045.12,788.815 C2047.96,781.3 2054.14,776.628 2060.98,776.628"/>
<path class="Bracket" transform="matrix(3.625,0,0,3.65969,20.2394,1364.17)" d="M2.98438,-165.5 C8.9375,-171.781 20.5156,-184.688 20.5156,-208.531 C20.5156,-238.641 7.60938,-269.094 7.60938,-287.969 C7.60938,-308.156 19.2031,-327.016 19.8594,-327.688 C19.8594,-328.016 19.8594,-328.016 19.8594,-328.344 C19.8594,-328.672 19.8594,-329 19.5313,-329.344 C19.2031,-329.344 18.5313,-329.344 18.2031,-328.672 C17.875,-328.344 0,-310.469 0,-283.328 C0,-254.203 11.5781,-233.688 11.5781,-195.625 C11.5781,-188.328 8.60938,-176.75 0.328125,-166.484 C0,-166.484 0,-165.828 0,-165.5 C-0.328125,-165.172 0,-164.828 0.328125,-164.5 C8.60938,-154.25 11.5781,-142.656 11.5781,-135.375 C11.5781,-97.3125 0,-76.7969 0,-47.6563 C0,-20.8594 17.875,-2.64063 18.2031,-2.3125 C18.5313,-1.65625 19.2031,-1.32813 19.5313,-1.65625 C19.8594,-1.98438 20.1875,-2.3125 19.8594,-2.64063 C19.8594,-2.64063 19.8594,-2.98438 19.8594,-3.3125 C19.2031,-3.96875 7.60938,-22.8438 7.60938,-43.0313 C7.60938,-61.8906 20.5156,-92.3438 20.5156,-122.469 C20.5156,-146.625 8.9375,-159.203 2.98438,-165.5"/>
</svg>
</div>

<img src="x" onerror="
  window.FREQS = { 'C4': 261.63, 'D4': 293.66, 'E4': 329.63, 'F4': 349.23, 'G4': 392.00, 'A4': 440.00, 'B4': 493.88, 'C5': 523.25 };
  window.audioCtx = null;
  window.playNotes = function(notes) {
    if (!window.audioCtx) {
      window.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (window.audioCtx.state === 'suspended') {
      window.audioCtx.resume();
    }
    var now = window.audioCtx.currentTime;
    notes.forEach(function(note) {
      var osc = window.audioCtx.createOscillator();
      var gain = window.audioCtx.createGain();
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(window.FREQS[note], now);
      gain.gain.setValueAtTime(0, now);
      gain.gain.linearRampToValueAtTime(0.25 / notes.length, now + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.0001, now + 1.7);
      osc.connect(gain);
      gain.connect(window.audioCtx.destination);
      osc.start(now);
      osc.stop(now + 1.7);
    });
  };
" style="display:none;">

Try them on the keyboard and see how they sound.

</div>

---

<h2 style="color: white !important;">Melodic Devices</h2>

There are various techniques and devices used within melodies that you might be expected to recognise when listening to a piece of music:
- **Balanced phrases**: where all the phrases are two, four or eight bars long (even numbers).
- **Question and answer phrases**: where there are two balanced phrases that complement each other.
- **Repetition**: Where parts of the melody repeat, perhaps at the beginning of two phrases.
- **Sequence**: a short pattern of notes in a melody that is immediately repeated at a different pitch, getting higher and higher or lower and lower.
- **Imitation**: where a melodic idea is copied by another part.
- **Countermelody**: another melody is played at the same time as the main melody.
- **Ornament**: a note that decorates the melody.

</div>

-v-

<h2 style="color: white !important;">Ornament</h2>

- **Trill**: where two notes that are next to one another alternate very quickly.
- **Mordent**: where there is just one quick alternation of notes that are next to one another (a mini trill).
- **Acciaccatura**: a grace note or crushed note where a note is played really quickly before the main note.
- **Appoggiatura**: similar to an acciaccatura but not as quick.
- **Turn**: notes literally turn around the main note very quickly.

</div>

-v-

<h2 style="color: white !important;">Ornaments</h2>

-v-

#### <span style="text-align: left; display: block; line-height: 1;">Mozart:<br>Clarinet Concerto in A Major</span>
<div style="font-size: 0.75em; text-align: left;">
<p style="margin-bottom: 10px;">Listen to the opening of each movement; you will hear examples of all the melodic techniques and devices:</p>
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>All the movements have melodies with <strong class="has-tooltip" data-tooltip="Phrases typically two, four, or eight bars long (even numbers)">balanced</strong> <strong class="has-tooltip" data-tooltip="Two balanced phrases that complement each other">question and answer style phrases</strong>.</li>
<li>The main melodies that open the first and third movements are eight bars long.</li>
<li>There is an <strong class="has-tooltip" data-tooltip="Chord I, II or IV to V; sounds incomplete">imperfect cadence</strong> after four bars and a <strong class="has-tooltip" data-tooltip="Chord V to chord I; sounds complete and finished">perfect cadence</strong> after eight bars.</li>
<li>The melody of the second movement is in two-bar phrases.</li>
<li>As this melody progress, you will hear some <strong class="has-tooltip" data-tooltip="Short pattern of notes immediately repeated at a different pitch">sequences</strong> and there is <strong class="has-tooltip" data-tooltip="Melodic idea copied by another part">imitation</strong> between the orchestra and clarinet.</li>
</ul>
<div style="display: flex; gap: 10px; margin-top: 15px; justify-content: space-between; align-items: center;">
<audio controls src="audio/mozart-clarinet_concerto-1.mp3" style="flex: 1; min-width: 0; height: 35px;"></audio>
<audio controls src="audio/mozart-clarinet_concerto-2.mp3" style="flex: 1; min-width: 0; height: 35px;"></audio>
<audio controls src="audio/mozart-clarinet_concerto-3.mp3" style="flex: 1; min-width: 0; height: 35px;"></audio>
</div>
</div>

---

<h2 style="color: white !important;">Time Signatures (metre)</h2>

- In a time signature, the top figure tells you how many beats there are in a bar and the bottom figure tells you what type of beats they are.
- Simple time signatures are usually based on crotchet and minim beats.
- Compound time signatures are more complex because every beat is a dotted note meaning each beat is divided into three.

<table style="border: none !important; border-collapse: collapse; background: transparent; margin: 40px auto; text-align: left;">
  <tr style="border: none !important; background: transparent !important;">
    <td style="border: none !important; padding: 0 15px; vertical-align: middle; text-align: center;">
      <span class="music-time-digit"></span>
    </td>
    <td style="border: none !important; vertical-align: middle; padding: 0 20px;">
      <svg width="120" height="24" viewBox="0 0 120 24" fill="none" stroke="currentColor" stroke-width="3" style="display: block;">
        <line x1="120" y1="12" x2="10" y2="12" stroke-linecap="round"/>
        <polyline points="25,4 10,12 25,20" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </td>
    <td style="border: none !important; vertical-align: middle; font-size: 1.6rem; padding: 0 10px; white-space: nowrap;">
      Top: how many beats
    </td>
  </tr>
  <tr style="border: none !important; background: transparent !important;">
    <td style="border: none !important; padding: 0 15px; vertical-align: middle; text-align: center;">
      <span class="music-time-digit"></span>
    </td>
    <td style="border: none !important; vertical-align: middle; padding: 0 20px;">
      <svg width="120" height="24" viewBox="0 0 120 24" fill="none" stroke="currentColor" stroke-width="3" style="display: block;">
        <line x1="120" y1="12" x2="10" y2="12" stroke-linecap="round"/>
        <polyline points="25,4 10,12 25,20" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </td>
    <td style="border: none !important; vertical-align: middle; font-size: 1.6rem; padding: 0 10px; white-space: nowrap;">
      Bottom: type of beat e.g. crotchet
    </td>
  </tr>
</table>

</div>

-v-

<style>

.time-sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 20px auto;
  }

.time-sig-grid h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
  }

.ts-table {
  border: none !important;
  border-collapse: collapse;
  background: transparent !important;
  width: calc(100% - 25px); 
  margin-left: 75px !important;
  margin-bottom: 25px;
}

.ts-table tr, 
  .ts-table td {
    border: none !important;
    background: transparent !important;
    padding: 12px 5px;
    vertical-align: middle;
  }

.ts-num-cell {
    width: 30px;
    text-align: right;
    padding-right: 0px !important;
    padding-left: 15px !important;
  }

/* Moves the entire stacked pair up as one unit */
  .ts-stack {
    display: inline-block;
    position: relative;
    top: -0.53em; 
  }

/* Controls digit styling and gap between top and bottom numbers */
  .ts-digit {
    font-family: 'BravuraText', sans-serif;
    font-size: 4rem;
    line-height: 0.5; 
    display: block;
    text-align: center;
  }

.ts-text-cell {
    font-size: 1.2rem;
    line-height: 1.4;
  }
</style>

<div class="time-sig-grid">
  
  <div>
    <h2 style="color: white !important; align-text: left !important;">Simple time signatures</h2>
    <table class="ts-table">
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          Two beats in each bar<br>
          The beats are crotchets
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          Three beats in each bar<br>
          The beats are crotchets
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          Four beats in each bar<br>
          The beats are crotchets
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          Three beats in each bar<br>
          The beats are quavers
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          Two beats in each bar<br>
          The beats are minims
        </td>
      </tr>
    </table>
  </div>

<div>
    <h2 style="color: white !important; align-text: left !important;">Compound time signatures</h2>
    <table class="ts-table">
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          There are six quavers in a bar<br>
          There are two dotted crotchet beats in each bar.
        </td>
      </tr>
    </table>
    <h2 style="margin-top: 35px; color: white !important; align-text: left !important;">Irregular time signatures</h2>
    <table class="ts-table">
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          There are five quavers in a bar.
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          There are seven quavers in a bar.
        </td>
      </tr>
      <tr>
        <td class="ts-num-cell">
          <div class="ts-stack">
            <span class="ts-digit"></span>
            <span class="ts-digit"></span>
          </div>
        </td>
        <td class="ts-text-cell">
          There are eight quavers in a bar.
        </td>
      </tr>
    </table>
  </div>
</div>

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1; color: white !important;">Mozart:<br>Clarinet Concerto in A Major</span>

- The first movement is in **4/4**
- The second movement is in a slow **3/4**
- The third movement is in **6/8**

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1; color: white !important;">Klaus Badelt:<br>'Swords Crossed' from <i>Pirates of the Caribbean</i></span>
<div style="font-size: 0.75em; text-align: left;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>This starts with free rhythm and continues like this for some time.</li>
<li><span id="badelt-time1-hint" class="flash-target">At 0:21, the music moves into a slow <strong>4/4</strong>.</span></li>
<li><span id="badelt-time2-hint" class="flash-target">Later in the track (0:50), the music moves into a slightly faster (tempo) section that is in <strong>2/4</strong>.</span></li>
<li><span id="badelt-time3-hint" class="flash-target">At 1:16, the music gets faster again but remains in <strong>2/4</strong>.</span></li>
</ul>
</div>
<div style="text-align: centre;">
<audio id="badelt-audio" controls src="audio/badelt-swords_crossed.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=21&&c<23&&this.dataset.t21!=='1'){this.dataset.t21='1';var e1=document.getElementById('badelt-time1-hint');if(e1){e1.classList.remove('animate-pulse');void e1.offsetWidth;e1.classList.add('animate-pulse');}}else if(c<21||c>=23){this.dataset.t21='0';} if(c>=50&&c<52&&this.dataset.t50!=='1'){this.dataset.t50='1';var e2=document.getElementById('badelt-time2-hint');if(e2){e2.classList.remove('animate-pulse');void e2.offsetWidth;e2.classList.add('animate-pulse');}}else if(c<50||c>=52){this.dataset.t50='0';} if(c>=76&&c<78&&this.dataset.t76!=='1'){this.dataset.t76='1';var e3=document.getElementById('badelt-time3-hint');if(e3){e3.classList.remove('animate-pulse');void e3.offsetWidth;e3.classList.add('animate-pulse');}}else if(c<76||c>=78){this.dataset.t76='0';}"></audio>
</div>

---

<h2 style="color: white !important;">Pitch</h2>

You are expected to know the notes on the stave.

You are only expected to know the treble clef.

</div>

-v-

<h2 style="color: white !important;">Range</h2>

This is determined by the **highest** and **lowest** notes of a melody or a whole piece or section.

Different instruments have different ranges. Some are **high** like a flute or violin and some are **low** like a cello or trombone.

Voices have a range within which they sing:
- Soprano: high female
- Alto: low female
- Tenor: high male
- Bass: low male

</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1; color: white !important;">Howard Shore:<br>'The White Tree' from <i>Return of the King</i></span>
<div style="font-size: 0.75em; text-align: left;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>The music starts very low. While there are still some low notes under the melodic line, the upper part gradually gets higher and higher.</li>
<li><span id="shore-hint-1" class="flash-target">Later in the track (1:08), the really low notes drop out and the whole piece becomes higher for a while.</span></li>
<li><span id="shore-hint-2" class="flash-target">When the bass comes in (1:29), again the range is very wide.</span></li>
<li><span id="shore-hint-3" class="flash-target">Later (1:33), the main melody is in the middle pitch range with a higher part above and low notes below.</span></li>
<li><span id="shore-hint-4" class="flash-target">A 1:57, the melody is very low in the basses.</span></li>
<li><span id="shore-hint-5" class="flash-target">At 2:25, the upper parts rise gradually and lead to the main melody in the lower parts with a counter melody above in the trumpets.</span></li>
<li>The violins play very fast notes up high in their register.</li>
</ul>
<div style="text-align: center;">
<audio id="shore-audio" controls src="audio/howard_shore-the_white_tree.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=68&&c<70&&this.dataset.t68!=='1'){this.dataset.t68='1';var e1=document.getElementById('shore-hint-1');if(e1){e1.classList.remove('animate-pulse');void e1.offsetWidth;e1.classList.add('animate-pulse');}}else if(c<68||c>=70){this.dataset.t68='0';} if(c>=89&&c<91&&this.dataset.t89!=='1'){this.dataset.t89='1';var e2=document.getElementById('shore-hint-2');if(e2){e2.classList.remove('animate-pulse');void e2.offsetWidth;e2.classList.add('animate-pulse');}}else if(c<89||c>=91){this.dataset.t89='0';} if(c>=93&&c<95&&this.dataset.t93!=='1'){this.dataset.t93='1';var e3=document.getElementById('shore-hint-3');if(e3){e3.classList.remove('animate-pulse');void e3.offsetWidth;e3.classList.add('animate-pulse');}}else if(c<93||c>=95){this.dataset.t93='0';} if(c>=117&&c<119&&this.dataset.t117!=='1'){this.dataset.t117='1';var e4=document.getElementById('shore-hint-4');if(e4){e4.classList.remove('animate-pulse');void e4.offsetWidth;e4.classList.add('animate-pulse');}}else if(c<117||c>=119){this.dataset.t117='0';} if(c>=145&&c<147&&this.dataset.t145!=='1'){this.dataset.t145='1';var e5=document.getElementById('shore-hint-5');if(e5){e5.classList.remove('animate-pulse');void e5.offsetWidth;e5.classList.add('animate-pulse');}}else if(c<145||c>=147){this.dataset.t145='0';}"></audio>
</div>
</div>
---

<h2 style="color: white !important;">Rhythm</h2>

.music-ref-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    font-size: 1.3rem;
    margin: 15px auto;
  }

.music-ref-table th,
  .music-ref-table td {
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 20px 10px !important;
    vertical-align: middle !important;
  }

/* Restores side borders while keeping top/bottom gap open */
  .spacer-col {
    width: 25px;
    padding: 0 !important;
    background: transparent !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    border-left: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-right: 2px solid rgba(255, 255, 255, 0.25) !important;
  }

.music-ref-table th {
    font-weight: bold;
    text-align: left;
    font-size: 1.3rem;
    opacity: 0.9;
  }

.music-glyph-cell {
    text-align: center !important;
    width: 60px;
  }

.music-glyph {
    font-family: 'BravuraText', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle !important;
    transform: translateY(0.18em);
  }

/* Fixed container for staff-line rests */
  .rest-wrapper {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 30px;
    vertical-align: middle;
  }

.rest-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    top: 14px;
  }

.rest-wrapper .music-glyph {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    white-space: nowrap;
  }

.rest-wrapper.whole .music-glyph { top: 15px; }
  .rest-wrapper.half .music-glyph { top: 14px; }

.beats-cell {
    white-space: nowrap;
    font-size: 1.3rem;
  }

/* --- DOT ADJUSTMENT CLASSES --- */
  .dot-whole {
    display: inline-block;
    transform: translate(0.1em, 0.09em);
  }

.dot-half {
    display: inline-block;
    transform: translate(0.1em, -0.09em);
  }

.dot-tail {
    display: inline-block;
    transform: translate(-0.15em, 0.06em);
  }
</style>

<table class="music-ref-table">
  <thead>
    <tr>
      <th class="music-glyph-cell">Note</th>
      <th>Name</th>
      <th>Beats</th>
      <th class="music-glyph-cell">Rest</th>
      <th class="spacer-col"></th>
      <th class="music-glyph-cell">Note</th>
      <th>Name</th>
      <th>Beats</th>
      <th class="music-glyph-cell">Rest</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td>Semibreve, <br>Whole Note</td>
      <td class="beats-cell">4 beats</td>
      <td class="music-glyph-cell">
        <div class="rest-wrapper whole">
          <div class="rest-line"></div>
          <span class="music-glyph"></span>
        </div>
      </td>
      <td class="spacer-col"></td>
      <td class="music-glyph-cell"><span class="music-glyph"><span class="dot-whole"></span></span></td>
      <td>Dotted Semibreve, <br>Dotted Whole Note</td>
      <td class="beats-cell">6 beats</td>
      <td class="music-glyph-cell">
        <div class="rest-wrapper whole">
          <div class="rest-line"></div>
          <span class="music-glyph"><span class="dot-whole"></span></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td>Minim, <br>Half Note</td>
      <td class="beats-cell">2 beats</td>
      <td class="music-glyph-cell">
        <div class="rest-wrapper half">
          <div class="rest-line"></div>
          <span class="music-glyph"></span>
        </div>
      </td>
      <td class="spacer-col"></td>
      <td class="music-glyph-cell"><span class="music-glyph"><span class="dot-half"></span></span></td>
      <td>Dotted Minim, <br>Dotted Half Note</td>
      <td class="beats-cell">3 beats</td>
      <td class="music-glyph-cell">
        <div class="rest-wrapper half">
          <div class="rest-line"></div>
          <span class="music-glyph"><span class="dot-half"></span></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td>Crotchet, <br>Quarter Note</td>
      <td class="beats-cell">1 beat</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td class="spacer-col"></td>
      <td class="music-glyph-cell"><span class="music-glyph"><span style="margin-left: 0.1em;"></span></span></td>
      <td>Dotted Crotchet, <br>Dotted Quarter Note</td>
      <td class="beats-cell">1 ½ beats</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
    </tr>
    <tr>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td>Quaver, <br>Eighth Note</td>
      <td class="beats-cell">1/2 beat</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td class="spacer-col"></td>
      <td class="music-glyph-cell"><span class="music-glyph"><span class="dot-tail"></span></span></td>
      <td>Dotted Quaver, <br>Dotted Eighth Note</td>
      <td class="beats-cell">3/4 beat</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
    </tr>
    <tr>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td>Semiquaver, <br>Sixteenth Note</td>
      <td class="beats-cell">1/4 beat</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
      <td class="spacer-col"></td>
      <td class="music-glyph-cell"><span class="music-glyph"><span class="dot-tail"></span></span></td>
      <td>Dotted Semiquaver, <br>Dotted Sixteenth Note</td>
      <td class="beats-cell">3/8 beat</td>
      <td class="music-glyph-cell"><span class="music-glyph"></span></td>
    </tr>
  </tbody>
</table>

</div>

-v-

<h2 style="color: white !important;">Rhythmic features</h2>

- **Syncopation**: where the music plays off the beat rather than on the beat.
- **Dotted rhythms**: where the rhythms are uneven, creating a 'long-short' feel.
- **Cross rhythms**: where two or more contrasting rhythms are played at the same time.
- **Anacrusis**: an upbeat where one note or a group of notes occur before the first main beat of the bar.
- **Ostinato**: a pattern that is repeated over and over again.
- **Triplets**: where a crotchet beat is split into three.

</div>

---

<h2 style="color: white !important;">Structure</h2>

<h4 style="text-align: center; color: white !important;"><strong class="has-tooltip" data-tooltip="Three or four movements">Large</strong>:
</h4>

- **Concerto**: a work for solo instrument accompanied by an orchestra.
- **Concerto Grosso**: a work for two or more solo instruments accompanied by an orchestra.
- **Symphony**: a piece for orchestra alone.
- **Sonata**: a piece for solo instrument and piano accompaniment.

</div>

-v-

<h2 style="color: white !important;">Structure</h2>

<h4 style="text-align: center; color: white !important;">Small:</h4>

.form-table tr,
  .form-table td {
    border: none !important;
    background: transparent !important;
    padding: 0px 0px 0px 0;
    vertical-align: top;
    height: 2.8em; /* Forces minimum row height to match 2 lines of text */
  }

.form-name {
    font-weight: bold;
    white-space: nowrap;
    width: 7% !important;
  }

.form-sections {
    white-space: nowrap;
    width: 25% !important;
  }

.form-letters {
    width: 68% !important;
  }

.structure-bold {
    font-weight: bold;
  }
</style>

<table class="form-table">
  <tr>
    <td class="form-name">Binary</td>
    <td class="form-sections">2 sections</td>
    <td class="form-letters"><span class="structure-bold">AB</span></td>
  </tr>
  <tr>
    <td class="form-name">Ternary</td>
    <td class="form-sections">3 sections</td>
    <td class="form-letters"><span class="structure-bold">ABA</span></td>
  </tr>
  <tr>
    <td class="form-name">Rondo</td>
    <td class="form-sections">5 or more sections</td>
    <td class="form-letters"><span class="structure-bold">ABACA</span> or <span class="structure-bold">ABACADA</span><br><i>where it keeps going back to A</i></td>
  </tr>
  <tr>
    <td class="form-name">Verse/chorus structure</td>
    <td class="form-letters" colspan="2">Where there are similar verses with contrasting chorus. There might also be an instrumental middle 8, break or bridge.</td>
  </tr>
</table>

---

<h2 style="color: white !important;">Tempo</h2>

.tempo-table th,
  .tempo-table td {
    background: transparent !important;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
    padding: 10px 16px;
    vertical-align: middle;
  }

.tempo-table th {
    font-weight: bold;
    text-align: left;
    font-size: 1.6rem;
  }

.tempo-term {
    font-weight: bold;
    width: 50%;
    white-space: nowrap;
  }

.tempo-meaning {
    width: 50%;
  }
</style>

<table class="tempo-table">
  <thead>
    <tr>
      <th>Italian Term</th>
      <th>Meaning</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tempo-term">Largo</td>
      <td class="tempo-meaning">Very slow</td>
    </tr>
    <tr>
      <td class="tempo-term">Andante</td>
      <td class="tempo-meaning">At a walking pace</td>
    </tr>
    <tr>
      <td class="tempo-term">Moderato</td>
      <td class="tempo-meaning">At a moderate speed</td>
    </tr>
    <tr>
      <td class="tempo-term">Allegro</td>
      <td class="tempo-meaning">Fast</td>
    </tr>
    <tr>
      <td class="tempo-term">Vivace</td>
      <td class="tempo-meaning">Fast and lively</td>
    </tr>
    <tr>
      <td class="tempo-term">Presto</td>
      <td class="tempo-meaning">Very fast</td>
    </tr>
    <tr>
      <td class="tempo-term">Accelerando</td>
      <td class="tempo-meaning">Getting faster</td>
    </tr>
    <tr>
      <td class="tempo-term">Ritardando/rallentando</td>
      <td class="tempo-meaning">Getting slower</td>
    </tr>
    <tr>
      <td class="tempo-term">Rubato</td>
      <td class="tempo-meaning">Flexible tempo</td>
    </tr>
    <tr>
      <td class="tempo-term">Free</td>
      <td class="tempo-meaning">Where there is no obvious tempo or pulse</td>
    </tr>
  </tbody>
</table>

---

<h2 style="color: white !important;">Texture</h2>
<div style="font-size: 0.75em;">

- **Monophonic** is single line texture - e.g. an unaccompanied melody.
- **Unison** is similar to monophonic where everyone plays the same line, however the music might be in octaves.
- **Homophonic** is where all parts play different notes, but in the same rhythm.
- **Polyrhythmic** is where there are different layers or melodies that weave in and out of one another. Also known as **contrapuntal**.
- **Melody and accompaniment** is where there is a melody with an independent accompaniment.
</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1; color: white !important;">Tchaikovsky:<br>Piano Concerto No. 1 in B flat Minor, Op. 23</span>
<div style="font-size: 0.75em; text-align: left;">
- The first four notes are in <strong class="has-tooltip" data-tooltip="Everyone plays the same line">unison</strong> and followed by a chord.
- This is repeated twice more and then there are a series of chords that are <strong class="has-tooltip" data-tooltip="Different notes played in the same rhythm">homophonic</strong> in texture.
- There is a <strong class="has-tooltip" data-tooltip="Melody with an independent accompaniment">melody and accompaniment</strong> section.
<br>
<div style="text-align: center">
<audio controls src="audio/tchaikovsky-piano_concerto_no.1.mp3" style="flex: 1; margin-top: 15px; width: 100%; max-width: 500px;"></audio>
</div>
</div>

-v-

#### <span style="text-align: left; display: block; line-height: 1; color: white !important;">J. S. Bach:<br>Brandenburg Concerto No.4 - 3rd movement</span>
<div style="font-size: 0.75em; text-align: left;">
<ul style="margin-left: 1.2em; padding-left: 0;">
<li>The opening is a good example of <strong class="has-tooltip" data-tooltip="Multiple independent melodies weaving together">polyphonic</strong> or <strong class="has-tooltip" data-tooltip="Multiple independent melodies weaving together">contrapuntal</strong> texture, where the main melody is passed around the instruments.</li>
<li><span id="bach-mono-hint" class="flash-target">At 0:45, a violin plays alone for a while (<strong class="has-tooltip" data-tooltip="Single line texture (unaccompanied)">monophonic</strong>) and then two solo recorders come in and interweave with the violin using a <strong class="has-tooltip" data-tooltip="Multiple independent melodies weaving together">polyphonic</strong> texture.</span></li>
</ul>
<div style="text-align: center">
<audio id="bach-audio" controls src="audio/j.s.bach-brandenburg_concerto-3.mp3" style="margin-top: 15px; width: 100%; max-width: 500px;" ontimeupdate="var c=this.currentTime; if(c>=45&&c<47&&this.dataset.t45!=='1'){this.dataset.t45='1';var e1=document.getElementById('bach-mono-hint');if(e1){e1.classList.remove('animate-pulse');void e1.offsetWidth;e1.classList.add('animate-pulse');}}else if(c<45||c>=47){this.dataset.t45='0';}"></audio>
</div>
</div>

---

<h2 style="color: white !important;">Timbre</h2>

Every musical instrument has its own particular sound. You might need to be able to describe this sound when listening to an extract of music in an exam.

</div>

</div>