@font-face { font-family: Andika; src: url(fonts/Andika-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Andika; src: url(fonts/Andika-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Bravura; src: url(fonts/Bravura.otf); }
:root { --bg:#FBF3E4; --card:#fff; --edge:#E8D5B5; --ink:#131C44; --sub:#5B6478; --faint:#CFC6B4; --accent:#2559E8; --deep:#1B3FA8; --soft:#E6EDFF; --amber-soft:#FFE9C2; --on:#fff; --green:#22A35A; --amber:#EE9A0B; --coral:#EF4E4E; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: Andika, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
#app { display: flex; flex-direction: column; height: 100%; max-width: 1100px; margin: 0 auto; }
#top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; margin-right: auto; }
.brand { color: inherit; text-decoration: none; }
.brand img { border-radius: 8px; }
.modes { display: flex; background: var(--card); border: 1.5px solid var(--edge); border-radius: 999px; padding: 3px; }
.modes button { padding: 7px 16px; border-radius: 999px; font-weight: 700; color: var(--sub); }
.modes button.on { background: var(--accent); color: var(--on); }
.chipbtn { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--edge); border-radius: 999px; padding: 4px 14px 4px 5px; font-weight: 700; }
.chipbtn img { background: var(--soft); border-radius: 50%; padding: 2px; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--edge); font-size: 20px; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 12px; }
section { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#tuner { overflow: auto; justify-content: safe flex-start; }
#stage { flex: 1 1 260px; -webkit-flex: 1 1 260px; min-height: 260px; width: 100%; }
#tuneBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
#tc { width: 100%; height: 100%; display: block; }
#status { text-align: center; min-height: 64px; }
#stTitle { font-size: 24px; font-weight: 700; }
#stHint { color: var(--sub); font-size: 15px; min-height: 22px; }
.primary { background: var(--accent); color: var(--on); font-weight: 700; padding: 14px 34px; border-radius: 999px; font-size: 17px; min-width: 150px; }
.secondary { background: var(--card); border: 1.5px solid var(--edge); font-weight: 700; padding: 13px 26px; border-radius: 999px; }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 4px; }
#metro { justify-content: safe center; overflow: auto; }
#tempoRow { display: flex; align-items: center; gap: 22px; }
#tempoBox { text-align: center; min-width: 170px; }
#bpmNum { font-size: 76px; font-weight: 700; line-height: 1; }
#bpmName { color: var(--sub); font-style: italic; font-size: 18px; }
.round { width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--edge); font-size: 30px; font-weight: 700; color: var(--accent); }
/* Sliders are built from plain divs (no native range input), so they also show on old smartboard browsers.
   They use dark outlines and plain hex colors first, so the bar and the knob stay easy to see on washed-out or glary big screens. */
#bpmSlider, #volSlider { flex: 0 0 auto; -webkit-flex: 0 0 auto; width: 520px; max-width: 100%; height: 64px; position: relative; cursor: pointer; touch-action: none; -ms-touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#bpmTrack, #volTrack { position: absolute; left: 32px; right: 32px; top: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; background: var(--card); border: 2px solid #131C44; border: 2px solid var(--ink); overflow: visible; }
#bpmFill, #volFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: #2559E8; background: var(--accent); }
#bpmThumb, #volThumb { position: absolute; top: -16px; left: 0; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; background: #2559E8; background: var(--accent); border: 5px solid #fff; border: 5px solid var(--card); box-shadow: 0 0 0 3px #131C44, 0 2px 6px rgba(0,0,0,.4); box-shadow: 0 0 0 3px var(--ink), 0 2px 6px rgba(0,0,0,.4); box-sizing: border-box; }
#bpmSlider:focus, #volSlider:focus { outline: none; }
#bpmSlider:focus #bpmThumb, #volSlider:focus #volThumb { box-shadow: 0 0 0 3px #131C44, 0 0 0 7px #2559E8; box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--accent); }
/* The smallest and biggest tempo, printed under the ends of the bar */
.slEnd { position: absolute; top: 46px; font-size: 14px; font-weight: 700; color: #5B6478; color: var(--sub); }
#slMin { left: 20px; } #slMax { right: 20px; }
#volRow, #refRow, #metroRow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.round.small { width: 44px; height: 44px; font-size: 24px; }
#volSlider { width: 280px; }
#volNum { font-size: 20px; font-weight: 700; min-width: 28px; text-align: left; }
#refNote { font-size: 24px; font-weight: 700; width: 88px; text-align: center; }
/* Same width for "Hear note" and "Start" so the two rows line up. */
#refBtn, #metroQuick { width: 108px; padding: 10px 0; }
#lights { display: flex; gap: 8px; min-height: 80px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.light { width: 54px; height: 54px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--edge); display: grid; place-items: center; font-weight: 700; color: var(--sub); position: relative; }
.light { cursor: pointer; }
.light.muted { background: #F5F0E6; background: color-mix(in srgb, var(--card) 50%, var(--bg)); border: 1.5px dashed var(--faint); color: var(--faint); }
.light.muted::after { content: ""; position: absolute; width: 60%; height: 3px; border-radius: 2px; background: var(--faint); transform: rotate(-45deg); }
.light.muted.lit { background: #A0A6B2; background: color-mix(in srgb, var(--card) 65%, var(--sub)); transform: scale(1.1); box-shadow: none; }
#soundSel { font: inherit; font-weight: 700; font-size: 17px; color: var(--ink); background: var(--card); border: 1.5px solid var(--edge); border-radius: 14px; padding: 10px 14px; min-height: 48px; min-width: 220px; max-width: 100%; cursor: pointer; }
/* Tap tempo and Start / Stop stay pinned in front of the scrolling controls */
#metro .row { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 5; margin: auto -20px 0; align-self: stretch; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -10px 12px -2px var(--bg); }
#volSlider { max-width: calc(100vw - 150px); }
/* On very short screens (a smartboard with big display scaling) the pinned Start / Tap tempo row would sit on top of the tempo slider and hide it.
   Here the row scrolls with the page instead, so the slider is always visible. */
@media (max-height: 400px) { #metro .row { position: static; margin: 4px 0 0; padding: 4px 0; box-shadow: none; } }
.seglabel.hint { font-weight: 400; margin-top: 0; }
.light.first { border: 2.5px solid var(--accent); color: var(--accent); }
.light.lit { background: var(--accent); color: var(--on); border-color: var(--accent); transform: scale(1.1); }
.light.lit:not(.first) { background: #1B3FA8; background: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.dots { position: absolute; bottom: -14px; display: flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.dots i.on { background: var(--accent); transform: scale(1.35); }
.sigcard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--edge); border-radius: 22px; padding: 12px 12px; }
.sigcol { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.sigcol .cap { color: var(--sub); font-weight: 700; font-size: 13px; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; line-height: 1.1; }
.notesym { font-family: Bravura; font-size: 34px; line-height: 1; height: 34px; width: 100%; text-align: center; color: var(--ink); margin-top: 8px; }
.sigdigits { font-weight: 700; font-size: 30px; }
.arrow { width: 52px; height: 36px; border-radius: 12px; background: var(--soft); color: var(--accent); font-size: 16px; }
.sigmid { position: relative; width: 96px; height: 90px; display: grid; place-items: center; }
.staff { position: absolute; left: 0; right: 0; top: 17px; bottom: 17px; background: repeating-linear-gradient(to bottom, var(--ink) 0 1.5px, transparent 1.5px 18.5px); background-size: 100% 18.5px; height: 74px; top: 8px; opacity: .85; border-bottom: 1.5px solid var(--ink); }
#sigNums { position: relative; display: flex; flex-direction: column; font-family: Bravura; font-size: 74px; line-height: 0; }
#sigNums .big { font-family: Bravura; font-weight: 400; font-size: 74px; height: 37px; display: flex; align-items: center; justify-content: center; line-height: 1; background: var(--card); }
.seglabel { color: var(--sub); font-weight: 700; font-size: 14px; margin-top: 4px; }
.seg { display: flex; background: var(--card); border: 1.5px solid var(--edge); border-radius: 999px; padding: 3px; flex-wrap: wrap; justify-content: center; }
.seg button { padding: 9px 18px; border-radius: 999px; font-weight: 700; color: var(--sub); }
.seg button[aria-checked=true] { background: var(--accent); color: var(--on); }
#adslot { height: 62px; overflow: hidden; border-top: 1px solid var(--edge); text-align: center; flex: none; }
@media (max-height: 480px) { #adslot { display: none; } }
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: 100vw; max-height: 100vh; }
dialog::backdrop { background: rgba(10,15,30,.5); }
.sheet { background: var(--bg); width: min(760px, 94vw); max-height: 90vh; overflow: auto; border-radius: 24px; padding: 18px 20px 22px; }
.sheet.small { width: min(380px, 92vw); text-align: center; }
.sheethead { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { margin: 0 0 8px; font-size: 22px; }
.x { font-size: 30px; width: 40px; height: 40px; border-radius: 50%; }
.legend { display: flex; gap: 8px; margin: 4px 0; }
.pill { background: color-mix(in srgb, var(--c) 18%, white); color: color-mix(in srgb, var(--c) 70%, black); font-weight: 700; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.info { color: var(--sub); font-size: 14px; margin: 6px 0 12px; }
.fam { font-weight: 700; color: var(--sub); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; margin: 14px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { background: var(--card); border: 2px solid var(--edge); border-radius: 18px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.card.sel { border-color: var(--accent); background: var(--soft); }
.card .tile { width: 64px; height: 64px; }
.card .tile img { width: 64px; height: 64px; display: block; }
.card b { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.card small { color: var(--sub); }
.card .pill { align-self: flex-start; font-size: 12px; padding: 1px 9px; }
.opt { background: var(--card); border: 1.5px solid var(--edge); border-radius: 18px; padding: 12px 14px; margin: 10px 0; }
.opt h3 { margin: 0 0 8px; font-size: 14px; color: var(--sub); text-transform: uppercase; letter-spacing: .05em; }
.opt .seg { justify-content: flex-start; }
.opt .seg button { padding: 9px 12px; } /* tighter, so Band, Strings, Choir, All fit on one line */
.check { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 600; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.theme { border: 2px solid var(--edge); border-radius: 14px; padding: 6px; background: var(--card); font-size: 13px; font-weight: 700; text-align: center; position: relative; }
.theme.sel { border-color: var(--accent); }
.theme .sw { height: 34px; border-radius: 8px; margin-bottom: 4px; display: flex; align-items: flex-end; gap: 3px; padding: 4px; }
.theme .sw i { flex: 1; height: 100%; border-radius: 4px; }
.theme.locked::after { content: "\1F512"; position: absolute; top: 4px; right: 6px; font-size: 13px; }
.plus { background: var(--soft); border-color: var(--accent); }
.plus p { margin: 4px 0 10px; color: var(--sub); }
.sum { font-size: 34px; font-weight: 700; margin: 6px 0; }
#gateA { font-size: 24px; text-align: center; width: 120px; padding: 8px; border-radius: 12px; border: 2px solid var(--edge); background: var(--card); color: var(--ink); }
.err { color: var(--coral); font-weight: 700; }
@media (max-height: 520px) { #bpmNum { font-size: 52px; } .light { width: 40px; height: 40px; } .sigcard { padding: 6px 14px; } }

/* ---- pass 2: tactile surfaces, calmer spacing ---- */
:root { --lip: color-mix(in srgb, var(--edge) 100%, black 6%); --deep: color-mix(in srgb, var(--accent) 72%, black); --gap: 16px; }
.modes, .chipbtn, .iconbtn, .secondary, .round, .light, .sigcard, .opt, .card, .theme { border-width: 2px; box-shadow: 0 3px 0 var(--edge); }
.primary { box-shadow: 0 4px 0 var(--deep); transition: transform .12s, box-shadow .12s; padding: 16px 38px; font-size: 18px; }
.primary:active, .secondary:active, .round:active { transform: translateY(3px); box-shadow: none; }
.modes button.on, .seg button[aria-checked=true] { box-shadow: 0 2px 0 var(--deep); }
.light.lit { box-shadow: 0 3px 0 var(--deep); }
#top { padding: 14px 20px 10px; gap: 12px; }
main { padding: 0 20px 14px; }
section { gap: var(--gap); }
#stTitle { font-size: 28px; letter-spacing: -.01em; }
#stHint { font-size: 17px; }
#bpmNum { font-size: 88px; letter-spacing: -.02em; }
.sheet { border-radius: 28px; padding: 22px 24px 26px; background: var(--bg); box-shadow: 0 24px 60px -20px rgba(10,15,30,.5); }
.opt { border-radius: 20px; padding: 14px 16px; margin: 14px 0; }
.card.sel, .theme.sel { box-shadow: 0 3px 0 var(--accent); }
.fam { margin: 22px 0 10px; }
.fam::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #F2A23A; margin-right: 8px; }
.pill { border: 1.5px solid color-mix(in srgb, var(--c) 45%, white); }
@media (prefers-reduced-motion: reduce) { .primary { transition: none; } }

.opt .hint { margin: 8px 0 0; color: var(--sub); font-size: 13px; line-height: 1.35; }
.keygrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 10px; }
.keycard { align-items: center; text-align: center; gap: 2px; padding: 8px 6px; }
.keycard canvas { width: 100%; height: 66px; display: block; }
.keycard b { font-size: 15px; }
.keycard small { font-size: 12px; }

.advnote { color: var(--sub); font-size: 14px; margin: 18px 4px 10px; }
#tuneStrip { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0 8px; }
#tuneStrip .seg { justify-content: center; flex-wrap: nowrap; }
#tuneStrip .seg button { padding: 8px 22px; min-height: 44px; }
.keybtn { min-height: 44px; padding: 8px 16px; font-weight: 700; }

/* Quick switch between "my instruments" */
#quick { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 8px; flex: none; }
#quick[hidden] { display: none; }
#quick button { flex: none; background: var(--card); color: var(--accent); border: 2px solid var(--accent); border-radius: 999px; min-height: 44px; padding: 0 16px; font: 700 16px Andika, sans-serif; white-space: nowrap; }
#quick button.on { background: var(--soft); color: var(--ink); border-color: var(--ink); }

/* ---- motion (Android parity): sheets rise and fade, pages fade between Tuner and Metronome, taps dip.
   Everything is off for people who ask their device for reduced motion. ---- */
@keyframes sheetIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheetOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
dialog[open] .sheet { animation: sheetIn .24s cubic-bezier(.2, .8, .2, 1) both; }
dialog[open]::backdrop { animation: fadeIn .2s ease-out both; }
dialog.closing .sheet { animation: sheetOut .16s cubic-bezier(.4, 0, 1, 1) both; }
dialog.closing::backdrop { animation: fadeIn .16s ease-in reverse both; }
section.pageIn { animation: pageIn .2s cubic-bezier(.2, .8, .2, 1) both; }
#pickerList .card { animation: rowIn .22s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 12) * 18ms); }
.primary, .secondary, .round, .chipbtn, .iconbtn, .card, .theme, .seg button, .modes button { transition: transform .12s cubic-bezier(.2, .8, .2, 1), box-shadow .12s, background-color .15s, border-color .15s, color .15s; }
.chipbtn:active, .iconbtn:active, .card:active, .theme:active, .seg button:active, .modes button:active { transform: scale(.96); }
.light { transition: background-color .08s, box-shadow .12s, transform .12s; }
.light.lit { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
#startRow { margin-top: 0; flex-wrap: wrap; align-items: center; }
#startRow .primary { min-width: 0; padding: 14px 26px; }
#metroQuick { padding: 13px 20px; }

/* ---- Settings: every row of choices fills its box evenly, same text size, one line each ---- */
#optBody .seg { flex-wrap: nowrap; justify-content: stretch; gap: 2px; }
#optBody .seg button { flex: 1 1 0; min-width: 0; padding: 9px 6px; font-size: 15px; line-height: 1.2; white-space: nowrap; text-align: center; }
#optBody .check { gap: 14px; line-height: 1.3; }
#optBody .check input { flex: none; }
#optBody .opt .secondary { width: 100%; text-align: center; box-sizing: border-box; }
#optBody .seg.a4 button:nth-child(2) { flex: 3 1 0; }


#qBpm { font-size: 20px; font-weight: 700; width: 88px; white-space: nowrap; text-align: center; }

/* ---- Phone held sideways: use two columns so nothing falls off the bottom ----
   The needle gauge goes on the left. Tuning choice, note name and buttons go on the right.
   The top bar gets thinner so it keeps to one line. */
@media (orientation: landscape) and (max-height: 520px) {
  #top { padding: 6px 12px 4px; gap: 8px; flex-wrap: nowrap; }
  .brand span, .brand b { display: none; }
  #tuner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "stage strip" "stage status" "stage bar"; column-gap: 14px; row-gap: 4px; align-items: center; justify-items: center; overflow: auto; }
  #tuneStrip { grid-area: strip; }
  #stage { grid-area: stage; min-height: 0; height: 100%; }
  #status { grid-area: status; min-height: 0; align-self: center; }
  #tuneBar { grid-area: bar; flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  #stTitle { font-size: 20px; }
  #stHint { font-size: 14px; min-height: 0; }
  #tuneBar .round.small { width: 38px; height: 38px; font-size: 20px; }
  #refRow, #metroRow { gap: 6px; }
  #refNote, #qBpm { width: 72px; font-size: 18px; white-space: nowrap; }
  #refBtn, #metroQuick { width: 88px; padding: 8px 0; }
  #startRow .primary { padding: 10px 26px; }
}

/* Short tall-ish phones (about 360x720): give the staff a little less height so the Start tuner button stays on screen. */
@media (max-height: 760px) and (orientation: portrait) {
  #stage { min-height: 190px; flex-basis: 190px; }
}

/* Short phone screens: shrink the Metronome tab a little so the whole 4/4 time signature card shows above Start without scrolling. */
@media (max-height: 760px) and (orientation: portrait) {
  #metro { gap: 8px; }
  #bpmNum { font-size: 56px; }
  #bpmName { font-size: 15px; }
  #tempoRow .round { width: 52px; height: 52px; }
  #bpmSlider { height: 44px; }
  #metro > * { flex-shrink: 0; }
  #lights { min-height: 56px; }
  .light { width: 44px; height: 44px; }
  .sigcol .cap { min-height: 0; }
  .sigcard { padding: 8px 12px; }
}

/* Drone options: small pill buttons for the sound and the chord (shown while the drone plays). */
#droneOpts { margin: 8px auto 0; max-width: 420px; text-align: center; }
.dlabel { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--sub); margin: 4px 0 3px; }
.dlabel::before { content: "\25CF "; color: #F2A23A; }
.dpills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dpills button { padding: 4px 9px; border: 2px solid var(--edge); border-radius: 999px; background: var(--card); font-weight: 700; font-size: 13px; box-shadow: 0 2px 0 var(--edge); }
.dpills button[aria-pressed=true] { background: #FFE9C2; border-color: #F2A23A; color: #131C44; }
#droneNotes { font-size: 13px; color: var(--sub); margin-top: 4px; }
body.droning #stage, body.droning #status { display: none; } /* the tuner is muted while droning, so make room for the drone choices */