/* The staff under the pointer: a page of a made-up piano school, Sostenuto, on black. Five warm white lines, round
   notes, the names of the notes in Newsreader (a variable serif, optical size 6 to 72 and weight 200 to 800), one
   orange for the note in hand. The script draws everything inside the SVG. */
:root {
  --night: #0f0e0d;               /* the page */
  --paper: #eee8dc;               /* the lines, the notes and the letters */
  --grey: #77726a;                /* the small texts and the names of the lines */
  --accent: #ff7a1a;              /* the note under the pointer */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100svh;
  background: var(--night);
  color: var(--paper);
  font-family: 'Newsreader Variable', 'Newsreader', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 6vw, 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  padding: clamp(18px, 3.4vw, 40px) var(--pad) clamp(18px, 3vw, 36px);
  user-select: none;
  -webkit-user-select: none;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 16px;
  font-variation-settings: 'opsz' 16;
}

.top__name {
  font-style: italic;
  font-weight: 560;
}

.top__note {
  color: var(--grey);
  font-weight: 400;
  text-align: right;
}

.hint {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: var(--grey);
  text-align: center;
}

/* ---------------------------------------------------------------- the score */
.score {
  position: relative;
  min-height: 0;
  touch-action: none;
}

.staff {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.staff__line,
.staff__ledger,
.staff__stem,
.staff__bar {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
}

.staff__line {
  stroke-width: 1.1;
}

.staff__bar {
  stroke-width: 1.1;
}

.staff__ledger {
  stroke-width: 1.1;
}

.staff__stem {
  stroke-width: 1.4;
}

.staff__head {
  fill: var(--paper);
}

/* the names of the lines and spaces, standing in for the clef */
.staff__key {
  fill: var(--grey);
  font-size: 11px;
  font-style: italic;
  text-anchor: end;
  dominant-baseline: central;
}

/* the letters under the notes */
.staff__name {
  fill: var(--paper);
  text-anchor: middle;
  font-variation-settings: 'opsz' 72;
}

@media (max-width: 640px) {
  .top {
    font-size: 14px;
  }

  .hint {
    font-size: 13px;
  }

  .staff__key {
    font-size: 9px;
  }
}