/* Ocarina header and the controls specific to this edition. The player and
   paper below use the original Compatura stylesheet cascade. */
[hidden] { display: none !important; }
.skip-link { position: absolute; top: 0; left: 1rem; padding: .6rem; background: white; transform: translateY(-110%); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
.music-heading {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) minmax(0, 4fr) minmax(76px, 1fr);
  grid-template-areas: "instrument title credit";
  gap: 20px;
  align-items: center;
  padding: 32px 34px 22px;
}
#score-ocarina { grid-area: instrument; width: min(100%, 112px); }
.fingering-label { display: block; min-height: 1.6em; line-height: 1.6; white-space: nowrap; text-align: center; font-weight: 750; paint-order: stroke fill; -webkit-text-stroke: 1.25px #252a2d; }
.music-title { grid-area: title; min-width: 0; text-align: center; }
.music-title h1 {
  margin: 0;
  white-space: nowrap;
  color: #38324b;
  font: 750 clamp(24px, 3.1vw, 43px)/1.28 Playpen, "Comic Sans MS", sans-serif;
  paint-order: stroke fill;
  -webkit-text-stroke: 2px #e7cc74;
}
.music-title h1 > span { display: inline-block; }
.music-heading #melody-unit { color: #795091; }
.melody-page { margin: 3px 0 0; color: #194d79; font-size: .9em; font-weight: 650; }
.music-heading #melody-credit { color: #a14a22; }
.melody-unit { margin: 8px 0 0; color: #606954; font-weight: 650; }
.melody-credit { margin: 0; color: #514766; font-weight: 650; text-align: center; }
.music-heading > .ocarina-credit { grid-area: credit; order: 0; align-self: center; align-items: center; justify-content: center; }
.ocarina-credit .score-artwork {
  display: block;
  width: 100%;
  height: clamp(62px, 10vw, 98px);
  object-fit: contain;
  background: transparent;
  border: 0;
}

body .topbar.score-tools { justify-content: space-between; height: auto; min-height: 0; padding: 6px 0; margin: 0; }
.ocarina-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #264a67;
  font: 750 clamp(14px, 2.9vw, 24px)/1.2 Playpen, "Comic Sans MS", sans-serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.ocarina-brand img { display: block; width: clamp(36px, 5vw, 56px); height: auto; }
:is(.topbar.score-tools .ocarina-brand, .welcome-dialog) > .app-version {
  display: inline-block;
  padding: 3px 6px;
  border: 1.5px solid #607c84;
  border-radius: 5px 7px 5px 6px;
  background: #fff1bb;
  color: #355765;
  font-size: clamp(10px, 1.7vw, 14px);
  line-height: 1.2;
  letter-spacing: .02em;
  transform: rotate(-7deg);
  box-shadow: 1px 2px 0 #d9decf;
}
.ocarina-wordmark > span:nth-child(1) { color: #194d79; }
.ocarina-wordmark > span:nth-child(2) { color: #795091; }
.ocarina-wordmark > span:nth-child(3) { color: #a14a22; }
.welcome-dialog {
  box-sizing: border-box;
  width: min(330px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 24px 24px 28px;
  overflow: auto;
  text-align: center;
  color: #355765;
  border: 2px solid #aabfb2;
  border-radius: 24px 28px 25px 23px;
  background: #fffdf4;
  box-shadow: 0 18px 54px #2f4b3f35;
}
.welcome-dialog::backdrop {
  background: #e5ece15c;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.welcome-dialog > .app-version {
  position: absolute;
  inset: 17px 17px auto auto;
}
.welcome-dialog h2 {
  margin: 9px 0 16px;
  font: 800 clamp(17px, 6.2vw, 27px)/1.2 Playpen, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
#welcomeMascot {
  display: inline-grid;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 5px;
  background: #e6eedf;
  border: 1px solid #d1dfce;
  border-radius: 49% 51% 46% 54%;
  box-shadow: none;
}
#welcomeMascot img { width: 100%; height: 100%; object-fit: contain; }
#welcomeMascot:hover { background: #e1ecd9; }
.welcome-dialog [hidden] { display: none !important; }
#welcomeLoading {
  width: min(100%, 210px);
  margin: 0 auto;
  min-height: 43px;
}
#welcomeLoading p {
  margin: 0 0 6px;
  color: #496354;
  font: 650 13px/1.3 Playpen, sans-serif;
}
#welcomeLoading progress {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 10px;
}
#welcomeLoading progress { accent-color: #679381; }
#welcomeLoading progress::-webkit-progress-bar { background: #e1e9e2; border-radius: 10px; }
#welcomeLoading progress::-webkit-progress-value { background: #729980; border-radius: 10px; }
#welcomeLoading output {
  display: block;
  margin-top: 5px;
  color: #496354;
  font: 650 12px/1.25 Playpen, sans-serif;
  font-variant-numeric: tabular-nums;
}
#welcomeStart, #welcomeRetry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 19px;
  min-height: 43px;
  border: 1.5px solid #9b8e5b;
  border-radius: 11px 13px 12px 10px;
  background: #f7df79;
  color: #405848;
  box-shadow: 0 3px #cab96b46;
  font: 750 15px/1.25 Playpen, sans-serif;
  cursor: pointer;
}
:is(#welcomeStart, #welcomeRetry):hover { background: #f9e69e; }
#welcomeStart img { width: 22px; height: 22px; }
.ocarina-credit .score-artwork {
  transform: scale(var(--artwork-scale, 1));
  transition: transform .5s ease-out;
}
.ocarina-credit [data-artwork-active] .score-artwork { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ocarina-credit .score-artwork { transform: none; transition: none; }
}
@media print {
  .welcome-dialog { display: none !important; }
}
.topbar.score-tools nav { display: flex; align-items: center; gap: 5px; }
.topbar.score-tools nav > button:is(#libraryButton, #scoreSettingsButton) {
  gap: 5px;
  width: auto;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: #59675e;
}
.topbar.score-tools nav > button:is(#libraryButton, #scoreSettingsButton):is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: #aabbb0;
  background: #eef4f1;
  color: #344739;
}
.library-category > h3 { margin: 10px 0; color: #455e51; font-size: 14px; }
.library-category-items { display: grid; gap: 8px; }
.library-category .local-note { margin: 4px 0 0; color: #657361; font-size: 11px; }
#score-frame { display: block; width: 100%; border: 0; }
#score-status { margin: 24px; color: #526354; }
#exercise-instructions { margin: 0 20px 10px; color: #514766; line-height: 1.55; }
#playback-dock .play-button:disabled, #stopButton:disabled { opacity: .58; cursor: default; }
#playback-dock > .paper-outline path { fill: #f4f4ec; }
.playback-dock .transport { display: flex; flex-wrap: wrap; }
#playback-dock :is(.transport-playback-divider, .transport-repeat-divider, .transport-fullscreen-divider) { display: block !important; }
.playback-dock .transport-section { width: auto; }
#playback-dock { --playback-mode-width: 214px; }
#playback-dock .playback-mode-control { flex: 0 1 var(--playback-mode-width); width: var(--playback-mode-width); min-width: 0; max-width: 100%; }
#playback-dock .playback-mode-control .select-trigger { font-size: 10px; }
#playback-dock .playback-mode-control .selected-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.2; }
.playback-status { margin: 10px 0 0; color: #526354; text-align: center; }
.playback-status:empty { display: none; }
/* Preserve the original count-in card without dimming or blurring the score. */
#countInOverlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#countInOverlay .count-in-card {
  box-sizing: border-box;
  max-width: calc(100% - 20px);
}
#countInBeats {
  display: grid;
  grid-template-columns: repeat(var(--count-in-pulses, 4), minmax(0, 1fr));
  width: min(calc(var(--count-in-pulses, 4) * 66px), calc(100vw - 84px));
  gap: clamp(3px, 1.25vw, 8px);
  container-type: inline-size;
}
#countInBeats > span {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: .88;
  border-radius: clamp(6px, 2vw, 14px);
  font-size: clamp(10px, calc(64cqw / var(--count-in-pulses, 4)), 36px);
}
@media (max-width: 650px) {
  #countInBeats { width: min(calc(var(--count-in-pulses, 4) * 52px), calc(100vw - 60px)); }
}
#countInBeats > span[data-strength="2"],
#countInBeats > span[data-strength="1"] {
  background: #e4f1f7;
  border-color: #a5c6d6;
  color: #426c80;
}
#countInBeats > span[data-strength="2"] { border-color: #77aec5; }
#countInBeats > span:is([data-strength="2"], [data-strength="1"]).counted {
  background: #deedf2;
  color: #557d8e;
}
#countInBeats > span:is([data-strength="2"], [data-strength="1"]).current {
  background: #9cd4ed;
  border-color: #5f9fbd;
  color: #244d61;
  box-shadow: 0 3px #5494ab28;
}
#audioPreparationDialog h2 { flex-direction: column; }
#audioPreparationDialog h2 img { width: 96px; height: 68px; object-fit: contain; }
#audioPreparationDialog :is(output, button)[hidden] { display: none; }
#audioPreparationDialog progress:indeterminate {
  margin-bottom: 5px;
  background: #e1e9e2 linear-gradient(90deg, #e1e9e2, #729980, #e1e9e2) 0 / 50% 100% no-repeat;
  animation: preparation-progress 1.35s ease-in-out infinite alternate;
}
#audioPreparationDialog progress:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes preparation-progress { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  #audioPreparationDialog progress:indeterminate { animation: none; background-position: center; }
}
.ocarina-footer { padding: 8px 0 14px; margin: 0; justify-content: center; }
.ocarina-footer small { font-size: 12px; color: #69776e; }
.score-sources { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.score-sources a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) {
  #playback-dock { --playback-mode-width: 180px; }
  .music-heading { padding: 16px 3px 12px; gap: 8px; grid-template-columns: 48px minmax(0, 1fr) 58px; }
  .music-title h1 { font-size: clamp(17px, 4.6vw, 26px); -webkit-text-stroke-width: 1px; }
  .melody-unit, .melody-page, .melody-credit { font-size: 10px; }
  #exercise-instructions { margin-inline: 6px; }
  #playback-dock .transport-bank { display: flex; }
  .playback-dock .transport-bank .playback-mode-control { flex: 0 1 180px; min-width: 0; }
}
@media (max-width: 620px) {
  #playback-dock .transport {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #playback-dock .transport-section { width: 100%; flex-wrap: nowrap; gap: 4px; }
  #playback-dock .transport-bank > .playback-mode-control { flex: 1 1 0; max-width: 214px; }
  #playback-dock .transport-section > .transport-divider { display: block !important; margin-inline: 1px; }
  #playback-dock .master-volume-control { flex: 0 1 104px; min-width: 67px; padding-inline: 5px; gap: 4px; }
  #playback-dock .master-volume-control input { width: 100%; min-width: 26px; }
  #playback-dock .master-volume-control output { display: none; }
  #playback-dock .transport-bank > #classroomViewButton { flex: 0 0 36px; min-width: 36px; padding: 0; }
}
@media (max-width: 360px) {
  .ocarina-brand { gap: 4px; font-size: 13px; }
  .ocarina-brand img { width: 32px; }
}
/* Let the score use the available screen width when more measures fit. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { width: 100%; max-width: none; flex: 1 0 auto; }
.ocarina-footer { flex: 0 0 auto; }

.score-voices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block: 0 12px;
  color: #594469;
  font: 650 12px Playpen, sans-serif;
}
.score-voices-label { display: inline-flex; align-items: center; gap: 5px; }
.score-voices-label img { display: block; object-fit: contain; }
.score-voices button {
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #c9bdce;
  border-radius: 7px;
  color: inherit;
  background: #fbf9f4;
  font: inherit;
  cursor: pointer;
}
.score-voices button[aria-pressed="true"] { background: #eae0ef; border-color: #977ea5; }