/* A quieter music sheet: warm paper, handwritten ink and flat instrument art. */
body {
  background-color: #f7f6ef;
  background-image: linear-gradient(#c8cdbc24 1px, transparent 1px), linear-gradient(90deg, #c8cdbc24 1px, transparent 1px);
  color: #3d423d;
}
.topbar { position: relative; z-index: 20; border-bottom-color: #cbd0c1; }
.topbar nav > button, #editMenuButton { border-radius: 7px; transition: background .15s, color .15s; }
.topbar nav > button:hover, #editMenuButton:hover, #editMenuButton[aria-expanded="true"] { background: #e9ecdf; color: #344739; }
.nav-separator { border-color: #d4d7ca; }
.stage-brand { color: #343747; }
.sheet-heading, .class-view .sheet-heading { grid-template-columns: 198px minmax(0, 1fr) 160px; grid-template-areas: 'instrument title credit'; padding: 24px 24px 22px; gap: 20px; }
.sheet-heading > .metallophone { grid-area: instrument; }
.sheet-heading > .song-info { grid-area: title; min-width: 0; }
.sheet-heading > .song-credit { grid-area: credit; }
.song-credit { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: flex-end; gap: 8px; min-width: 0; }
.song-info h2, .class-view .song-info h2 {
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.28;
  color: #38324b;
  -webkit-text-stroke: 5px #ffe16c;
  paint-order: stroke fill;
  text-shadow: none;
  letter-spacing: -1.6px;
}
.song-info .difficulty { font-size: 22px; letter-spacing: 3px; margin-top: 8px; color: #b94d58; }
.song-credit > p {
  font-size: 14px;
  line-height: 1.7;
  color: #bb3547;
  font-weight: 700;
  -webkit-text-stroke: .14em #ffdf7c;
  paint-order: stroke fill;
  text-shadow: none;
  margin: 0;
}
.artwork-wrap { position: relative; width: 96px; max-width: 100%; }
.score-artwork { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: #f5f4eb; border: 1.5px solid #bac2ad; border-radius: 8px 10px 8px 9px; }
.score-artwork:hover { border-color: #718261; }
.score-artwork:focus-visible { outline: 3px solid #e2c65d; outline-offset: 3px; }
.score-artwork:disabled { opacity: 1; cursor: default; }
.score-artwork img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.artwork-placeholder { min-height: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #97a08a; }
.artwork-placeholder svg { width: 26px; height: 26px; }
.artwork-placeholder > span { font-family: Playpen, sans-serif; font-size: 10px; font-weight: 550; }
.artwork-remove { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid #c2cbb5; border-radius: 50%; background: #fffef6; color: #69785a; opacity: 0; }
.artwork-remove svg { width: 13px; height: 13px; }
.artwork-wrap:hover .artwork-remove, .artwork-wrap:focus-within .artwork-remove { opacity: 1; }
.artwork-remove:hover { background: #e9eddf; }
.score-meta { padding: 0 25px 15px; }
.mode-tabs { gap: 22px; }
.mode-tabs button { color: #8b907f; }
.mode-tabs button.selected { color: #444c3e; }
.mode-tabs button.selected::after { height: 3px; border-radius: 5px 2px 4px 3px; }
.score-paper::before { background: #c4c7be; }
#score .note-block { border-width: 2px; border-color: #5c625c; box-shadow: inset 0 1px #ffffff2b; }
#score .note-block.active { box-shadow: 0 3px #4c4f4e30; }
#score .beat-row { color: #626c5a; }
.play-button { border-radius: 11px 15px 12px 14px; border-color: #59604e; box-shadow: 0 3px #5f68531a; }
.tempo-control label, .transport .class-button { color: #7b826f; }
.settings-panel { border-radius: 10px 13px 11px 12px; background: #f3f4eada; border-color: #cbd0bf; }
.settings-panel select, .settings-panel button { border-radius: 7px; border-color: #c8cfbb; }
.app-footer { opacity: .65; padding-bottom: 16px; }
dialog { border-color: #d0d5c4; box-shadow: 0 16px 70px #394b3426; }
dialog h2 { color: #454b3b; }

/* Editing lives in one disclosure in the main menu. */
.edit-menu-wrap { position: relative; }
.menu-chevron { font-family: sans-serif; font-size: 14px; color: #929b83; margin-left: 2px; }
.edit-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: -7px;
  width: 234px;
  padding: 7px;
  background: #fffef7;
  border: 1px solid #cbd1be;
  border-radius: 12px 10px 13px 11px;
  box-shadow: 0 8px 28px #49573e1a, 0 2px 0 #c8cfb733;
  z-index: 30;
}
.edit-menu[hidden] { display: none; }
.topbar nav .edit-menu .edit-action, .topbar nav .edit-menu #stageNew {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 12px 11px;
  font-family: Playpen, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: #59634c;
  border: 0;
  border-radius: 7px;
  background: none;
}
.topbar nav .edit-menu .edit-action svg { width: 17px; height: 17px; color: #8f9b7c; flex-shrink: 0; }
.topbar nav .edit-menu .edit-action:hover, .topbar nav .edit-menu .edit-action:focus-visible { background: #eff2e6; outline: none; }
.topbar nav .edit-menu .new-score { margin-top: 5px; border-top: 1px dashed #d8ddcc; border-radius: 0 0 7px 7px; }

/* Interactive SVG bars share the paper's hand-drawn lines and note palette. */
.metallophone { width: 198px; max-width: 100%; align-self: center; margin: 0; }
.metallo-scroll { width: 100%; padding: 0; overflow: visible; }
.metallo-illustration { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.instrument-frame { fill: #a8a8a8; stroke: #111; stroke-width: 2px; stroke-linejoin: round; }
.metallo-illustration .metallo-bar,
.metallo-illustration .metallo-bar.sharp,
.metallo-illustration .metallo-bar.sharp.sounding,
.metallophone.chord-focus .metallo-illustration .metallo-bar.muted,
.metallophone.chord-focus .metallo-illustration .metallo-bar.chord-tone {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
  outline: none;
  filter: none;
  transform: none;
  cursor: pointer;
}
.bar-face { fill: #fff; stroke: #111; stroke-width: 2.2px; stroke-linejoin: round; }
.shown-note .bar-face { fill: var(--bar-color); }
.bar-rivet { fill: #b8b8b8; stroke: #111; stroke-width: 1.4px; pointer-events: none; }
.bar-halo { fill: none; stroke: #ffe368; stroke-width: 8px; opacity: 0; pointer-events: none; }
.metallo-illustration .metallo-bar:hover .bar-face, .metallo-illustration .metallo-bar:focus-visible .bar-face { stroke: #111; stroke-width: 3.2px; }
.metallophone.chord-focus .metallo-illustration .muted .bar-face { fill: #dedede; stroke: #555; }
.metallophone.chord-focus .metallo-illustration .chord-tone .bar-face { fill: var(--bar-color); stroke: #111; stroke-width: 2.2px; }
.metallo-illustration .metallo-bar.sounding .bar-face { stroke: #111; stroke-width: 2.2px; }
.metallo-illustration .metallo-bar.sounding .bar-halo, .metallo-illustration .metallo-bar:focus-visible .bar-halo { opacity: 1; }

@media (min-width:1550px) {
  .sheet-heading { padding-top: 35px; padding-bottom: 26px; }
  .song-info h2 { font-size: 64px; }
}
@media (max-width:1050px) and (min-width:651px) {
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 176px minmax(0, 1fr) 120px; gap: 15px; padding-left: 14px; padding-right: 14px; }
  .metallophone { width: 176px; }
  .artwork-wrap { width: 82px; }
  .song-info h2 { font-size: 40px; }
  .song-credit > p { font-size: 12px; }
  .topbar nav { gap: 9px; }
}
@media (max-width:800px) and (min-width:651px) {
  .topbar nav { gap: 6px; }
  .topbar nav > button, #editMenuButton { font-size: 0; gap: 0; padding: 8px; }
  .topbar .menu-chevron, .topbar nav b { display: none; }
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 154px minmax(0, 1fr) 96px; gap: 10px; }
  .metallophone { width: 154px; }
  .song-info h2 { font-size: 32px; }
}
@media (max-width:650px) {
  .topbar .menu-chevron { display: none; }
  .topbar nav { gap: 5px; }
  .topbar nav > button, #editMenuButton { gap: 0; padding: 7px; }
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 123.2px minmax(0, 1fr) 72px; grid-template-areas: 'instrument title credit'; padding: 18px 8px 16px; gap: 8px; }
  .song-info h2, .class-view .song-info h2 { font-size: clamp(20px, 5vw, 29px); line-height: 1.3; -webkit-text-stroke-width: 3.5px; letter-spacing: -.7px; overflow-wrap: normal; }
  .song-info .difficulty { font-size: 15px; letter-spacing: 1px; margin-top: 5px; }
  .song-credit { gap: 6px; }
  .song-credit > p { font-size: 10px; line-height: 1.5; margin: 0; }
  .metallophone { width: 123.2px; margin: 0; }
  .artwork-wrap { width: 68px; }
  .artwork-placeholder svg { width: 21px; height: 21px; }
  .artwork-placeholder > span { font-size: 9px; }
  .transport { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .transport-left { min-width: 0; max-width: 100%; }
  .score-meta { padding: 5px 10px 10px; }
  .mode-tabs { gap: 18px; }
  .mode-tabs button { font-size: 10px; }
  .edit-menu { right: -42px; }
}
@media (max-width:360px) {
  .stage-brand .brand-name { display: none; }
  .topbar nav { gap: 7px; }
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 105.6px minmax(0, 1fr) 64px; gap: 6px; }
  .metallophone { width: 105.6px; }
  .artwork-wrap { width: 60px; }
}
@media (any-hover:none) { .artwork-remove { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .topbar nav button { transition: none; } }
/* The felt head marks the exact sounding bar; no sweep through other pitches. */
.metallo-guide { pointer-events: none; }
.metallo-mallet { display: none; }
.metallo-mallet.pointing { display: inline; }
.mallet-shaft { fill: #d8ac72; stroke: #594737; stroke-width: 1.5px; }
.mallet-shine { fill: none; stroke: #f6dfb5; stroke-width: 1.2px; stroke-linecap: round; }
.mallet-head { fill: #fffaf0; stroke: #34473f; stroke-width: 2.3px; paint-order: stroke fill; }
.mallet-felt { fill: none; stroke: #c8cebd; stroke-width: 1.7px; stroke-linecap: round; }
@media print {
  .metallo-guide { display: none !important; }
  body { background: #fff; }
  .sheet-heading, .class-view .sheet-heading { grid-template-columns: 140px minmax(0, 1fr) 140px; padding: 0 0 12px; gap: 12px; }
  .song-info h2, .class-view .song-info h2 { font-size: 38px; }
  .song-credit > p { font-size: 13px; }
  .metallophone { width: 140px; margin: 0; }
  .metallo-scroll { overflow: visible; }
  .metallo-illustration { width: 140px; height: auto; }
  .artwork-wrap { width: 72px; }
  .artwork-wrap:not(.has-image), .artwork-remove { display: none !important; }
  .score-artwork { border: 0; }
  .score-paper::before { background: #c4c7be; }
}

.settings-audio{padding-top:18px;border-top:1px solid #d7ded7}.settings-audio .setting-field{max-width:100%}

.sound-library-estimate{font-size:.76rem;line-height:1.6;margin:7px 0 0;color:#758277}

.audio-preparation-dialog{position:fixed}.audio-loading-close{position:absolute;top:12px;right:12px;width:34px;min-height:34px;padding:6px}.audio-loading-close svg{width:20px;height:20px}.audio-preparation-dialog output{font-variant-numeric:tabular-nums;white-space:nowrap}