:root {
  color-scheme: light dark;
  --bg: #f4f2ec;
  --fg: #222;
  --panel: #fff;
  --line: #d8d3c6;
  --accent: #2a5db0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1c19; --fg: #e8e4da; --panel: #27251f; --line: #3d3a32; --accent: #7fa6ea; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); height: 100vh; display: flex; flex-direction: column; }
header { display: flex; align-items: baseline; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 18px; margin: 0; }
header .sub { opacity: 0.7; }
main { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 520px); gap: 12px; padding: 12px 16px; min-height: 0; }
.left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#cymbal { flex: 1; width: 100%; min-height: 0; aspect-ratio: 1; max-height: calc(100vh - 160px); touch-action: none; cursor: crosshair; }
.keys { font-family: ui-monospace, monospace; font-size: 12px; opacity: 0.8; white-space: pre-wrap; }
.right { overflow: auto; display: flex; flex-direction: column; gap: 10px; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
summary { cursor: pointer; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; }
.row.small { font-size: 12px; opacity: 0.8; }
label { display: inline-flex; align-items: center; gap: 6px; }
label.file { cursor: pointer; }
input[type="number"] { width: 80px; }
button { padding: 4px 10px; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 4px 0; }
#progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.1s; }
.status { font-size: 12px; opacity: 0.85; white-space: pre-wrap; }
table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--line); }
th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { text-align: left; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; } #cymbal { max-height: 60vh; } }

/* design panel */
#design { display: flex; flex-direction: column; gap: 6px; }
details.group { background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; }
details.group > summary { font-weight: 500; font-size: 13px; }
details.group .note { font-size: 11px; opacity: 0.65; margin: 2px 0 6px; }
.field { display: grid; grid-template-columns: minmax(140px, 1.4fr) 2fr 84px; gap: 8px; align-items: center; margin: 3px 0; }
.field > label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.field input[type="range"] { width: 100%; min-width: 60px; }
.field input[type="number"] { width: 100%; font-variant-numeric: tabular-nums; }
.field.live > label::after { content: " live"; font-size: 9px; letter-spacing: 0.04em; opacity: 0.55; text-transform: uppercase; }
.status.bad { color: #b03030; }
@media (prefers-color-scheme: dark) { .status.bad { color: #ff8b8b; } }