2 color-scheme: light dark;
3 --bg: #f4f2ec;
4 --fg: #222;
5 --panel: #fff;
6 --line: #d8d3c6;
7 --accent: #2a5db0;
8 font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
9 font-size: 14px;
10}
11@media (prefers-color-scheme: dark) {
12 :root { --bg: #1d1c19; --fg: #e8e4da; --panel: #27251f; --line: #3d3a32; --accent: #7fa6ea; }
13}
14* { box-sizing: border-box; }
15body { margin: 0; background: var(--bg); color: var(--fg); height: 100vh; display: flex; flex-direction: column; }
16header { display: flex; align-items: baseline; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
17header h1 { font-size: 18px; margin: 0; }
18header .sub { opacity: 0.7; }
19main { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 520px); gap: 12px; padding: 12px 16px; min-height: 0; }
20.left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
21#cymbal { flex: 1; width: 100%; min-height: 0; aspect-ratio: 1; max-height: calc(100vh - 160px); touch-action: none; cursor: crosshair; }
22.keys { font-family: ui-monospace, monospace; font-size: 12px; opacity: 0.8; white-space: pre-wrap; }
23.right { overflow: auto; display: flex; flex-direction: column; gap: 10px; }
24details { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
25summary { cursor: pointer; font-weight: 600; }
26.row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; }
27.row.small { font-size: 12px; opacity: 0.8; }
28label { display: inline-flex; align-items: center; gap: 6px; }
29label.file { cursor: pointer; }
30input[type="number"] { width: 80px; }
31button { padding: 4px 10px; }
32.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 4px 0; }
33#progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.1s; }
34.status { font-size: 12px; opacity: 0.85; white-space: pre-wrap; }
35table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
36th, td { text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--line); }
37th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { text-align: left; }
38@media (max-width: 800px) { main { grid-template-columns: 1fr; } #cymbal { max-height: 60vh; } }
40/* design panel */
41#design { display: flex; flex-direction: column; gap: 6px; }
42details.group { background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; }
43details.group > summary { font-weight: 500; font-size: 13px; }
44details.group .note { font-size: 11px; opacity: 0.65; margin: 2px 0 6px; }
45.field { display: grid; grid-template-columns: minmax(140px, 1.4fr) 2fr 84px; gap: 8px; align-items: center; margin: 3px 0; }
46.field > label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
47.field input[type="range"] { width: 100%; min-width: 60px; }
48.field input[type="number"] { width: 100%; font-variant-numeric: tabular-nums; }
49.field.live > label::after { content: " live"; font-size: 9px; letter-spacing: 0.04em; opacity: 0.55; text-transform: uppercase; }
50.status.bad { color: #b03030; }
51@media (prefers-color-scheme: dark) { .status.bad { color: #ff8b8b; } }