:root { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #e6e6e6; color: #171717; font: 14px/1.45 Arial, Helvetica, sans-serif; }
.scale-app { max-width: 1240px; padding: 20px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 18px; text-align: center; }
.guitar-grid { --nut: 52px; --board-height: 260px; --marker: 40px; --above: calc(var(--marker) / 2 + 3px); --below: calc(var(--marker) / 2 + 28px); padding: var(--above) 2px var(--below); }
.fretboard-row { display: flex; height: var(--board-height); }
.open-strings { position: relative; z-index: 3; flex: 0 0 var(--nut); border-right: 6px solid #222; }
.guitar-grid.scrolled .open-strings { border-right: 4px double #555; }
/* The window shows part of the 22-fret neck; padding keeps edge markers and fret numbers from being clipped. */
.neck-window { position: relative; flex: 1; min-width: 0; overflow: hidden; margin: calc(-1 * var(--above)) 0 calc(-1 * var(--below)); padding: var(--above) 0 var(--below); }
.neck { position: relative; height: 100%; }
.neck.animate { transition: transform .18s ease-out; }
.fretboard { position: absolute; inset: 0; background: #f4f1e8; }
.fret-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -2px; background: #777; }
.inlay { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #c9c3b4; transform: translate(-50%, -50%); }
.string-line { position: absolute; left: 0; right: 0; height: var(--string-weight); background: #222; transform: translateY(-50%); z-index: 1; }
.fret-numbers { position: absolute; left: 0; right: 0; top: calc(100% + var(--marker) / 2 + 4px); display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); }
.fret-number { text-align: center; font-size: 13px; font-weight: bold; color: #333; }
.guitar-grid .note-marker { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.open-strings .note-marker { left: 50%; }
.note-marker { position: relative; z-index: 1; width: var(--marker, 40px); height: var(--marker, 40px); display: inline-flex; align-items: center; justify-content: center; border: 2px solid #555; border-radius: 50%; background: #777; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; letter-spacing: -.02em; }
.note-marker.root { background: #171717; border-color: #171717; }
.note-marker.open { background: #e6e6e6; color: #222; border-color: #555; }
.note-marker.open.root { border-color: #171717; border-width: 3px; }
.note-marker.selectable { cursor: pointer; }
.note-marker.start { outline: 3px solid #d08a17; outline-offset: 2px; }
.run-active .note-marker:not(.in-run) { opacity: .2; }
.note-marker.playing { background: #236ca5; border-color: #123d60; color: #fff; box-shadow: 0 0 0 3px #aacfe9; }
.controls { margin-top: 20px; padding: 14px; border: 1px solid #222; box-shadow: 2px 2px #777; background: #eee; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
label { display: flex; flex-direction: column; gap: 4px; }
label.check { flex-direction: row; align-items: center; min-height: 32px; }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: #222; }
#start-select { width: 210px; }
.hint { color: #555; font-size: 12px; }
#position { width: 150px; }
select, input, button { font: inherit; }
select, input[type=number] { background: #fff; color: #171717; border: 1px solid #777; min-height: 32px; padding: 3px 6px; max-width: 100%; }
#scale-select { width: 270px; }
#tempo { width: 75px; }
input[type=range] { width: 120px; height: 32px; accent-color: #222; }
button { padding: 5px 12px; min-height: 32px; border: 1px solid #222; border-radius: 3px; background: #ddd; box-shadow: inset 1px 1px #fff, inset -1px -1px #999; color: #171717; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.play-controls { display: flex; gap: 8px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px dashed #222; outline-offset: 2px; }
.scale-notes { font-weight: bold; margin: 16px 0 8px; }
.harmony { margin: 0 0 8px; }
.caption { color: #444; font-size: 12px; margin: 6px 0; }
#status { margin: 12px 0 0; }
#status.error { color: #8a1515; }
.piano-keyboard { display: flex; position: relative; height: 235px; border: 3px solid #222; border-radius: 5px; background: #222; }
.piano-key { display: flex; align-items: end; justify-content: center; padding-bottom: 10px; border: 1px solid #777; background: #fff; position: relative; min-width: 0; }
.piano-key.white { flex: 1; }
.piano-key.black { position: absolute; top: 0; width: calc(100% / var(--whites, 28) * .62); height: 62%; z-index: 2; background: #171717; border-color: #000; border-radius: 0 0 3px 3px; padding-bottom: 7px; }
.piano-key .note-marker { width: 30px; height: 30px; font-size: 11px; }
.piano-key.black .note-marker { width: 24px; height: 24px; font-size: 9px; }
.piano-label { position: absolute; z-index: 1; right: 0; bottom: 5px; left: 0; overflow: hidden; color: #222; font-size: 9px; line-height: 1; text-align: center; white-space: nowrap; }
.piano-key.black .piano-label { color: #fff; font-size: 7px; }
.piano-key .note-marker { position: absolute; bottom: 28px; }
@media (max-width: 640px) {
  .scale-app { padding: 14px 6px; }
  .guitar-grid { --nut: 30px; --board-height: 180px; --marker: clamp(18px, 5.4vw, 30px); }
  .open-strings { border-right-width: 4px; }
  .guitar-grid { --below: calc(var(--marker) / 2 + 22px); }
  .fret-number { font-size: 11px; }
  .inlay { width: 9px; height: 9px; }
  .note-marker { font-size: clamp(7px, 2vw, 11px); border-width: 1px; }
  .controls { gap: 10px; padding: 10px; }
  label { max-width: 100%; }
  .piano-keyboard { height: 180px; }
  .piano-key .note-marker, .piano-key.black .note-marker { width: 100%; height: auto; aspect-ratio: 1; font-size: 6px; border-width: 1px; }
  .piano-label { font-size: 7px; }
  .piano-key.black .piano-label { font-size: 6px; }
  .piano-key .note-marker { bottom: 22px; }
}
.piano-key .played-note-label {
  position: absolute;
  z-index: 6;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  background: #174d76;
  color: #fff;
  padding: 2px;
  border-radius: 2px;
  font-size: 10px;
  pointer-events: none;
  white-space: nowrap;
}