:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #14161c; color: #e8e8ec;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column;
  overscroll-behavior: none; user-select: none;
}
header {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 14px 6px;
}
#title { font-size: 18px; font-weight: 600; }
#title .sub { font-size: 11px; font-weight: 400; opacity: .5; }
#status { font-size: 12px; opacity: .8; flex: 1; }
#midi-status { font-size: 11px; opacity: .5; max-width: 40%; text-align: right; }
#meterwrap {
  height: 4px; background: #22252d; margin: 0 14px; border-radius: 2px; overflow: hidden;
}
#level { height: 100%; width: 0; background: #39c46a; transition: width 60ms linear; }
#stage { flex: 1 1 0; min-height: 0; width: 100%; display: block; touch-action: none; }
footer { padding: 8px 14px 12px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; }
.row.small { font-size: 11px; opacity: .45; margin-top: 6px; }
label { display: flex; align-items: center; gap: 6px; }
button {
  background: #39c46a; color: #08130c; border: 0; border-radius: 8px;
  padding: 8px 22px; font-size: 15px; font-weight: 600;
}
button#stop { background: #e0483e; color: #fff; }
select, input[type=range] { accent-color: #39c46a; }