:root {
  --bg: #16141f; --card: #221f2e; --line: #353047; --text: #f2eee6; --dim: #a59fb4;
  --accent: #e6c88c; --accent-ink: #1d1a14; --good: #7fd19b; --warn: #f0a868;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
main { max-width: 560px; margin: 0 auto; padding: 12px 16px 32px; }
header h1 { font-size: 1.15rem; margin: 8px 0 12px; font-weight: 650; }
header h1 span { color: var(--dim); font-weight: 400; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 0 0 10px; font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.hint { color: var(--dim); font-size: .85rem; margin: 8px 0 0; }
footer.hint { padding: 0 4px; }
.ver { display: block; margin-top: 8px; opacity: .7; }

.readout { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 8px; }
.readout label { display: block; color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.readout output { font-size: 2.2rem; font-variant-numeric: tabular-nums; font-weight: 600; }
#status { text-align: center; min-height: 1.4em; margin: 6px 0 10px; }
#status.warn { color: var(--warn); }
.meter { position: relative; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
#level { height: 100%; width: 0; background: var(--good); transition: width .08s; }
#heard { position: absolute; right: 0; top: -1px; width: 8px; height: 8px; border-radius: 50%; }
#heard.on { background: var(--accent); }

button {
  font: inherit; color: var(--text); background: #2e2a3d; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer;
}
button:disabled { opacity: .5; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
button.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; margin-top: 10px; }
.transport { display: flex; gap: 10px; }
.transport button { flex: 1; font-size: 1.15rem; min-height: 56px; }

.stepper { display: flex; gap: 6px; }
.stepper input { flex: 1; min-width: 0; text-align: center; }
input[type=number] {
  font: inherit; font-size: 1.2rem; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; min-height: 44px;
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1 1 140px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.row input[type=range] { flex: 1; min-width: 0; }
.row output { min-width: 4.5em; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

.section { border-top: 1px solid var(--line); padding: 10px 0; }
.section:first-child { border-top: 0; padding-top: 0; }
.section .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.section .head b { font-weight: 600; }
.section .tempi { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.section .tempo { display: flex; align-items: center; gap: 8px; }
.section .tempo span { flex: 1; color: var(--dim); font-size: .9rem; }
.section .tempo input { width: 5.5em; }
.section .tempo input.changed { border-color: var(--accent); }
.section select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.section.keep .tempi { opacity: .45; }

details summary { cursor: pointer; color: var(--dim); margin-top: 6px; min-height: 32px; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.parts label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }

/* the performance screen: big targets, nothing else */
#perf {
  position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y: auto;
}
#perf[hidden] { display: none; }
.pread { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.pread label { display: block; color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.pread output { font-size: 3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#pStatus { text-align: center; margin: 0; color: var(--dim); min-height: 1.4em; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 260px; }
.pgrid button { font-size: 1.35rem; font-weight: 650; min-height: 110px; border-radius: 18px; }
#pSlower, #pFaster { background: #2f3b4d; }
#pSection { text-align: center; margin: 0; }
.pstop { min-height: 76px; font-size: 1.4rem; font-weight: 700; background: #7a2f35; border-color: transparent; border-radius: 18px; }