/* Rounded note tiles and clear, consistent note lettering. */
#score .note-block {
  border-radius: 9px 12px 10px 11px;
  color: #fff;
  text-shadow: none;
}
.pitch-label {
  position: relative;
  display: inline-block;
  padding: 0 .1em;
  white-space: nowrap;
  line-height: 1.3;
  font-weight: inherit;
  letter-spacing: inherit;
}
#score .tile-names {
  font-family: Playpen, sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
}
.pitch-name, .octave-mark, #score .rest-label {
  color: #fff;
  -webkit-text-stroke: .085em #282832;
  paint-order: stroke fill;
  text-shadow: none;
}
.octave-mark {
  position: absolute;
  font-size: .62em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.08em;
  -webkit-text-stroke-width: .09em;
}
.octave-mark.high { top: -.13em; right: -.24em; }
.octave-mark.low { bottom: -.12em; left: -.24em; }
.pitch-label.has-octave.high { padding-right: .38em; }
.pitch-label.has-octave.low { padding-left: .32em; }
.has-octave > .octave-mark.high { right: 0; }
.has-octave > .octave-mark.low { left: 0; }

/* The note name has one size throughout a score, including short values. */
.score-paper { --tile-font-size: 28px; --tile-base-height: 104px; overflow-x: auto; }
#score .note-block { font-size: var(--uniform-note-font, 28px); }
#score .measure-notes, #score .note-block { height: var(--uniform-note-height, 104px); }
#score .note-block .stack-note, #score .note-block .pitch-label, #score .note-block .pitch-name { font-size: inherit; }
#score .note-block .pitch-label { flex-shrink: 0; transform-origin: center; }
.class-view .score-paper { --tile-font-size: 34px; --tile-base-height: 130px; }
.piano-key, .piano-key:nth-child(3), .class-view .piano-key { color: #fff; border-radius: 7px 9px 8px 7px; }
.entry-key, .entry-key:nth-child(3) { color: #fff; border-radius: 7px; -webkit-text-stroke: 1px #282832; paint-order: stroke fill; }

/* Real barline elements share the note row's exact vertical bounds. */
#score {
  --measure-gutter: 7px;
  --stage-columns: var(--effective-columns, 4) !important;
  grid-template-columns: repeat(var(--effective-columns, 4), minmax(0, 1fr));
}
#score .measure { padding: 0 var(--measure-gutter); }
#score .measure::before, #score .measure::after { content: none !important; display: none !important; }
#score .measure-notes { overflow: visible; }
.barline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #4e5352;
  border-radius: 0;
  pointer-events: none;
  z-index: 2;
}
.barline-start { left: calc(-1 * var(--measure-gutter) - 2px); display: none; }
.measure.row-start .barline-start { display: block; }
.barline-end { right: calc(-1 * var(--measure-gutter) - 2px); }
.barline.double { width: 13px; background: none; border-left: 3px solid #4e5352; border-right: 6px solid #4e5352; }
#score .time-mark {
  left: calc(-1 * var(--measure-gutter) - 49px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 43px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 0;
  color: #414848;
}
.measure.repeat-end .measure-notes::after { top: 50%; transform: translateY(-50%); }

/* A playable two-bank metallophone, with pitch-specific bars. */
.sheet-heading { grid-template-columns: 205px minmax(0, 1fr) 180px; }
.metallophone { width: 200px; max-width: 100%; min-width: 0; align-self: center; }
.metallo-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #b3a98c transparent; padding: 3px 3px 4px; }
.metallo-body {
  height: 105px;
  position: relative;
  padding: 0 6px;
  background: none;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.metallo-body::after { content: none; }
.metallo-rail { position: absolute; left: 1px; right: 1px; height: 7px; background: linear-gradient(#bda078,#9d8057); border: 1px solid #8e7656; border-radius: 3px; box-shadow: 0 2px #65553e20; z-index: -1; }
.rail-top { top: 17px; transform: rotate(-1deg); }
.rail-bottom { bottom: 20px; transform: rotate(-3deg); }
.metallo-naturals { position: absolute; left: 6px; right: 6px; bottom: 0; height: 65px; display: flex; gap: 3px; align-items: center; }
.metallo-sharps { position: absolute; left: 6px; right: 6px; top: 0; height: 38px; }
.metallo-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--bar-height);
  padding: 0;
  border: 1px solid #858a82;
  border-radius: 3px;
  background: linear-gradient(100deg,#fff3,transparent 40%,#0001),var(--bar-color);
  box-shadow: 1px 2px 0 #3d44354d, inset 2px 0 #ffffff6b, inset -2px 0 #0000000d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 1;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.metallo-bar.in-score, .metallo-bar.chord-tone { background: linear-gradient(100deg,#fff3,transparent 40%,#0001),var(--bar-color); border-color: #586059; }
.metallo-bar.sharp { position: absolute; top: 0; transform: translateX(-50%); width: calc(100% / var(--key-count) - 3px); background: linear-gradient(100deg,#fff3,transparent 40%,#0001),var(--bar-color); border-color: #717b72; }
.metallo-bar.sharp.in-score, .metallo-bar.sharp.chord-tone { background: linear-gradient(100deg,#fff3,transparent 40%,#0001),var(--bar-color); }
.metallo-bar .pitch-label { transform: rotate(-90deg); font-family: Playpen, sans-serif; font-size: 11px; font-weight: 750; letter-spacing: -.7px; }
.metallo-bar.sharp .pitch-label { font-size: 9px; }
.bar-pin { position: absolute; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; border: 1px solid #62695e; background: #eff2e5; pointer-events: none; }
.pin-top { top: 4px; }
.pin-bottom { bottom: 4px; }
.metallo-bar:hover { filter: brightness(1.1); box-shadow: 1px 3px #3d44354d, inset 0 0 0 1px #fff9; }
.metallo-bar.sounding { outline: 2px solid #fff4a0; outline-offset: 1px; filter: brightness(1.24); box-shadow: 0 0 0 3px #5c6947, 1px 4px #4d58484d; transform: translateY(2px); z-index: 4; }
.metallo-bar.sharp.sounding { transform: translate(-50%, 2px); }
.metallophone.chord-focus .metallo-bar.muted { background: linear-gradient(100deg,#e5e6e0,#c5c9c0); border-color: #a4aaa0; box-shadow: 1px 2px #3d443520; filter: none; }
.metallophone.chord-focus .metallo-bar.muted .pitch-label { opacity: .48; }
.metallophone.chord-focus .metallo-bar.chord-tone { box-shadow: 0 0 0 1px #596053,1px 2px #3d44354d; }
.chord-mark.selected { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.metallo-caption { min-height: 19px; padding: 1px 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 8px; color: #96927d; }
.metallo-caption strong { font-size: 9px; font-weight: 650; color: #8b856e; }
.metallo-caption .pitch-label { font-size: 10px; font-weight: 700; }
.metallo-caption .range-dash { margin: 0 3px; }

/* Row numbers sit directly above the opening barline, starting on row two. */
#score .measure-number {
  display: none;
  position: absolute;
  left: calc(-1 * var(--measure-gutter));
  top: auto;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  width: max-content;
  height: auto;
  font-family: Playpen, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #555c54;
  z-index: 3;
}
#score .measure.row-start:not(:first-child) .measure-number { display: block; }
#score .beat-row {
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  font-weight: 600;
  color: #626a60;
  font-variant-numeric: tabular-nums;
}
.class-view #score .beat-row { height: 40px; line-height: 40px; font-size: 20px; }
.class-view #score .measure-number { font-size: 20px; }

/* Supporting text uses a readable scale alongside the handwritten score. */
.song-info p { font-size: 12px; color: #838779; }
.song-credit #editTitle { font-size: 11px; color: #7e806f; }
.mode-tabs button { font-size: 13px; color: #777b6c; }
.chord-edit-button { font-size: 12px; color: #797d6c; }
.tempo-control label { font-size: 11px; color: #7e826e; }
.tempo-control strong { font-size: 15px; }
.tempo-control small { font-size: 10px; }
.transport .class-button, .edit-notes { font-size: 12px; color: #7c806d; }
.export-actions button { font-size: 11px; color: #81846f; }
.metallo-caption { min-height: 22px; font-size: 9px; padding: 1px 3px 0; }
.metallo-caption strong { font-size: 10px; color: #6a705f; }
.metallo-caption .pitch-label { font-size: 10px; }
.piano-key small { font-size: 10px; opacity: .7; }
.score-footer, .score-footer > span:first-child, .score-footer > span:last-child { font-size: 11px; color: #747c6d; }
.score-footer { padding-top: 6px; padding-bottom: 12px; gap: 18px; line-height: 1.6; }
.app-footer > span:last-child { font-size: 10px; }
.settings-panel label, .settings-panel select, .settings-panel button, .transpose-control { font-size: 12px; }
.dialog-top p, .format-info p, .privacy-note, .library-card p { font-size: 12px; line-height: 1.8; }
.library-card small, .level-badge, .format-tag { font-size: 10px; }
.editor-form label, .editor-form input, .editor-form select, .note-entry label { font-size: 12px; }
.editor-form textarea { font-size: 14px; }
.field-help { font-size: 11px; }
.help-steps p { font-size: 13px; }
.help-steps strong { font-size: 14px; }
@media (min-width:651px) { .topbar nav button { font-size: 12px; } }

@media (min-width:1550px) {
  .score-paper { --tile-font-size: 32px; --tile-base-height: 124px; }
  .sheet-heading { grid-template-columns: 205px minmax(0,1fr) 220px; }
  #score .time-mark { font-size: 49px; left: calc(-1 * var(--measure-gutter) - 53px); }
  #score .beat-row { height: 38px; line-height: 38px; font-size: 18px; }
}
@media (max-width:1050px) {
  .score-paper { --tile-font-size: 28px; --tile-base-height: 97px; }
  .sheet-heading { grid-template-columns: 190px minmax(0,1fr) 140px; gap: 12px; }
  .song-info h2 { font-size: clamp(29px, 4.4vw, 43px); }
  .metallo-bar .pitch-label { font-size: 10px; }
  .metallo-bar.sharp .pitch-label { font-size: 8px; }
  #score .time-mark { font-size: 39px; left: calc(-1 * var(--measure-gutter) - 43px); }
}
@media (min-width:651px) and (max-width:1050px) {
  .topbar nav button { font-size: 11px; }
  .score-footer > span:first-child, .score-footer > span:last-child { font-size: 10px; }
}
@media (max-width:800px) and (min-width:651px) {
  .sheet-heading { grid-template-columns: 180px minmax(0,1fr) 110px; gap: 9px; }
  .song-info h2 { font-size: 32px; }
  .metallo-scroll { padding-left: 0; padding-right: 0; }
}
@media (max-width:650px) {
  .score-paper { --tile-font-size: 24px; --tile-base-height: 83px; }
  .class-view .score-paper { --tile-font-size: 24px; --tile-base-height: 105px; }
  .sheet-heading { grid-template-columns: 1fr; grid-template-areas: 'title' 'credit' 'instrument'; gap: 0; padding-top: 14px; }
  .song-info { grid-area: title; }
  .song-credit { grid-area: credit; }
  .song-info h2 { font-size: 35px; }
  .metallophone { grid-area: instrument; width: 200px; margin: 8px auto 0; }
  .metallo-bar .pitch-label { font-size: 11px; }
  .metallo-bar.sharp .pitch-label { font-size: 9px; }
  .metallo-caption { padding-top: 0; }
  #score { --measure-gutter: 4px; }
  #score .note-block { border-radius: 6px 8px 7px 8px; }
  #score .time-mark { font-size: 33px; left: calc(-1 * var(--measure-gutter) - 31px); }
  .barline { width: 3px; }
  .barline.double { width: 11px; border-left-width: 2px; border-right-width: 5px; }
  #score .measure-number { font-size: 15px; left: calc(-1 * var(--measure-gutter) - .5px); }
  #score .beat-row { height: 30px; line-height: 30px; font-size: 14px; }
  .song-info p { font-size: 10px; }
  .song-credit #editTitle { font-size: 0; }
  .mode-tabs { gap: 11px; }
  .mode-tabs button { font-size: 10px; }
  .chord-edit-button { font-size: 10px; }
  .tempo-control label { font-size: 9px; }
  .tempo-control strong { font-size: 12px; }
  .tempo-control small { font-size: 8px; }
  .transport .class-button, .edit-notes { font-size: 0; }
  .export-actions button { font-size: 10px; }
  .score-footer > span:first-child { display: none; }
  .score-footer > span:last-child { font-size: 10px; }
  .score-footer { justify-content: flex-end; }
  .settings-panel label, .settings-panel select, .settings-panel .check-label, .transpose-control { font-size: 11px; }
  .dialog-top p, .format-info p, .privacy-note, .library-card p { font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) { .metallo-bar { transition: none; } }

/* A quiet, tactile progress track with a moving bead. */
.studio .play-progress {
  height: 8px;
  margin: 15px 58px 22px;
  overflow: visible;
  border-radius: 20px;
  background: #e0e2d5;
  box-shadow: inset 0 1px 2px #56604424, 0 1px #fff;
}
.studio .play-progress #progressFill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#8ba564,#bac873 65%,#efcb62);
  box-shadow: inset 0 1px #ffffff70;
}
.progress-head {
  position: absolute;
  right: -6px;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f2d478;
  border: 2px solid #fffdf1;
  box-shadow: 0 1px 4px #67754755;
  opacity: 0;
}
.has-progress .progress-head { opacity: 1; }
@media (max-width:650px) { .studio .play-progress { margin: 14px 26px 20px; } }

@media print {
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 180px minmax(0,1fr) 150px; grid-template-areas: none; }
  .song-info, .song-credit, .metallophone { grid-area: auto; }
  .metallophone { width: 175px; margin: 0; }
  .metallo-scroll { overflow: hidden; }
  .metallo-body { transform: none; margin-bottom: 0; }
  .metallo-caption { display: none; }
  .metallo-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .metallo-bar.sounding { filter: none; outline: none; transform: none; }
  .metallo-bar.sharp.sounding { transform: translateX(-50%); }
  #score { --measure-gutter: 7px; grid-template-columns: repeat(var(--effective-columns,4),minmax(0,1fr)) !important; }
  #score .measure .barline-start { display: none; }
  #score .measure.row-start .barline-start { display: block; }
  #score .time-mark { font-size: 32px; left: calc(-1 * var(--measure-gutter) - 32px); }
  #score .measure:not(.row-start) .measure-number, #score .measure:first-child .measure-number { display: none; }
  #score .measure.row-start:not(:first-child) .measure-number { display: block; }
  #score .measure-number, .class-view #score .measure-number { font-size: 14px; }
  #score .beat-row, .class-view #score .beat-row { height: 27px; line-height: 27px; font-size: 13px; }
  .score-footer > span:first-child, .score-footer > span:last-child { font-size: 9px; }
}