: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:.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:.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:.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 .1s}.status{font-size:12px;opacity:.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{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:.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:.04em;opacity:.55;text-transform:uppercase}.status.bad{color:#b03030}@media(prefers-color-scheme:dark){.status.bad{color:#ff8b8b}}.ready{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.ready-text{flex:1;min-width:180px;font-size:12.5px;white-space:pre-wrap}.ready .progress{flex-basis:100%;margin:0}button.primary{font-weight:600;padding:6px 14px;background:var(--accent);color:#fff;border:1px solid transparent;border-radius:4px;cursor:pointer}button.primary:disabled{opacity:.5;cursor:default}button.recording{background:#b03030}code{font-size:11.5px;background:#80808026;padding:0 3px;border-radius:3px}