@font-face {
  font-family: "Academico";
  src: url("academico.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1b1b1b;
  background: #f7f7f4;
}

body {
  margin: 0;
  background: #f7f7f4;
}

#score {
  padding: 26px;
}

.empty-state {
  margin: 40px auto;
  max-width: 520px;
  color: #716c66;
  text-align: center;
}

/* One line (system) of measures: JS sizes each measure to what its own
   notes need (not an equal share) and lists them here with no gap, so the
   staff reads as one continuous line broken only by each stave's own
   barline, as engraved sheet music does. */
.staff-line {
  display: flex;
  align-items: flex-start;
}

.staff-line + .staff-line {
  margin-top: 32px;
}

.measure {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

.measure.active {
  background: #fff3ea;
}

body.selectable .measure,
.maestro-surface.selectable .measure {
  cursor: pointer;
}

.measure.selected {
  background: #eaf2fb;
}

.measure.changed {
  outline: 2px solid #e0a526;
  outline-offset: -2px;
}

.measure.changed .bar::after {
  content: " · changed";
  color: #a86a00;
  font-weight: 600;
}

.measure.selected.active {
  background: #ffe4cc;
}

.bar {
  margin: 4px 8px 0;
  color: #716c66;
  font-size: 12px;
}

.notation {
  min-height: 120px;
  overflow-x: auto;
}

#web-transport {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 26px;
  border-top: 1px solid #ddd9cf;
  background: #f7f7f4e8;
  backdrop-filter: blur(12px);
}

#web-transport[hidden] {
  display: none;
}

#web-transport button {
  padding: 8px 14px;
  border: 1px solid #b9b3a8;
  border-radius: 8px;
  background: white;
  font: inherit;
}

#web-transport input {
  width: 140px;
}

@media (max-width: 600px) {
  #score {
    padding: 12px;
  }

  #web-transport {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
}

body.editable .vf-stavenote,
.maestro-surface.editable .vf-stavenote {
  cursor: pointer;
}

.maestro-selected path {
  fill: #d86631;
  stroke: #d86631;
}

.maestro-selected text {
  fill: #d86631;
}