:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0d1016;color:#eef2f8;font-synthesis:none;--muted:#a0adbf;--line:#2b3442;--surface:#151b24;--pad:#1c2430;--active:#9be6cd}
*{box-sizing:border-box}body{margin:0 auto;padding:18px;max-width:760px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--pad);border-radius:9px;touch-action:manipulation;user-select:none;-webkit-user-select:none}button:hover:not(:disabled){background:#273242;border-color:#61728b}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,summary:focus-visible{outline:2px solid #a8c4ff;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}kbd{font-family:inherit;white-space:nowrap}button b{font-size:12px;font-weight:600}button em{font-size:10px;font-style:normal;font-weight:650;letter-spacing:.04em;color:var(--muted)}button em::before{content:"";display:inline-block;width:5px;height:5px;background:#708095;border-radius:50%;margin:0 5px 1px 0}button[aria-pressed=true]{background:#1e3835;border-color:#6db8a0}button[aria-pressed=true] em{color:var(--active)}button[aria-pressed=true] em::before{background:var(--active)}button[aria-pressed=true]:hover{background:#294a43;border-color:var(--active)}[hidden]{display:none!important}
.board-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.brand{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--active);margin:0 0 4px}.brand span{color:#8592a7;font-size:9px;letter-spacing:.12em;margin-left:8px;font-weight:600}h1{font-size:20px;line-height:1.2;letter-spacing:-.03em;margin:0;font-weight:650}.header-actions{display:flex;align-items:center;gap:12px}#connection{font-size:11px;color:#e9bf7a;margin:0;white-space:nowrap}#connection::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:currentColor}#connection.connected{color:var(--active)}.clear-button{display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 10px;border-color:#66434a;background:#281e26;color:#f0bcc2;font-size:12px;font-weight:600}.clear-button kbd{font-size:22px;line-height:1}.clear-button:hover:not(:disabled){background:#442b35;border-color:#bb737e}#version-notice{color:#ffdb94;background:#332b1d;padding:10px;border:1px solid #6b5534;border-radius:8px;font-size:12px;margin:0 0 12px}
main{display:grid;grid-template-columns:1fr 1fr;gap:10px}.panel{min-width:0;background:var(--surface);border:1px solid #252e3b;border-radius:12px;padding:11px}.backgrounds,.layers,.effects{grid-column:1/-1}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-bottom:8px}h2{display:flex;align-items:baseline;gap:9px;font-size:12px;line-height:1.3;margin:0;font-weight:650}.section-heading span{font-size:10px;line-height:1.4;color:var(--muted);font-weight:400}#effects-count{font-variant-numeric:tabular-nums}
.background-switch{width:100%;padding:10px 12px;text-align:left}.background-current{display:flex;align-items:center;gap:12px}.background-current>kbd{font-size:23px;font-weight:650;line-height:1;border-right:1px solid #405063;padding:5px 14px 5px 0}.background-current>span{display:flex;flex-direction:column;gap:2px}.background-current b{font-size:16px;line-height:1.15;font-weight:650}.eyebrow{font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--muted)}.background-current em{margin-left:auto;font-size:9px;color:var(--active)}.background-current em::before{background:var(--active)}.background-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.background-options>span{font-size:11px;color:#b1bdd0;padding-top:7px;border-top:2px solid #354151}.background-options strong{font-weight:750;margin-right:5px;font-size:12px}.background-options>span.is-current{border-color:var(--active);color:#d0f6e8}.background-options>span.is-pending{border-color:#efd198;color:#efd198}.section-help{font-size:10px;line-height:1.5;color:var(--muted);margin:7px 0 0}#camera-status{font-size:11px;line-height:1.4;color:#f2cf90;margin:7px 0 0}
.pad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.pad{min-height:82px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px 3px}.pad kbd{font-size:28px;line-height:1.05;font-weight:500;display:flex;align-items:center;gap:6px}.pad kbd small{font-size:12px;font-weight:650;background:#ffffff09;border-radius:4px;padding:3px 4px;color:#bac7d9}.inline-control{display:flex;align-items:center;gap:6px;border-radius:6px;padding:2px 8px;min-height:24px;background:transparent}.inline-control kbd{font-size:19px;line-height:1}.inline-control b{font-size:10px}.tempo{display:flex;align-items:center;gap:6px;margin-top:9px}.tempo>span{font-size:10px;color:var(--muted)}.tempo strong{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;margin-right:auto}.tempo small{font-size:9px;font-weight:400;color:var(--muted)}.small-button{font-size:11px;padding:4px 9px;border-radius:6px;min-height:28px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.adjust-control,.text-control{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 8px;min-height:57px;padding:7px 4px}.adjust-control kbd,.text-control kbd{font-size:18px;font-weight:650;width:100%;text-align:center;line-height:1.2}.adjust-control b,.text-control b{font-size:11px}.text-control em{font-size:9px}.text-controls .section-heading,.intensity .section-heading{align-items:baseline}.text-controls h2,.intensity h2{white-space:nowrap}footer{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:11px;font-size:10px;color:var(--muted)}summary{cursor:pointer;color:#c1cee0;padding:3px 0}.operator-note{white-space:nowrap}details[open]{flex:1}.shortcut-guide{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.shortcut-guide span{display:flex;flex-direction:column;gap:3px}.shortcut-guide kbd{font-size:11px;color:#e0e8f4}footer p{font-size:10px;line-height:1.5;margin:6px 0}
.layers .pad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.effects .pad-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:420px){.effects .pad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){body{padding:12px}.brand span{display:none}.header-actions{gap:8px;align-items:flex-end;flex-direction:column}h1{font-size:19px}.board-header{margin-bottom:10px}main{gap:8px}.panel{padding:9px}.pad-grid{gap:5px}.pad b{font-size:11px}.pad{min-height:78px}.section-heading h2>span{font-size:9px}.intensity .section-heading,.text-controls .section-heading{align-items:flex-start;flex-direction:column;gap:2px}.section-help{font-size:9px}.text-control kbd,.adjust-control kbd{font-size:17px}.background-switch{padding:9px}.background-current em{font-size:8px}.background-options>span{font-size:10px}.tempo{gap:5px}.small-button{padding:4px 8px}}
@media(max-width:350px){body{padding:8px}.panel{padding:8px}.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operator-note{display:none}.background-current{gap:9px}.background-current>kbd{font-size:20px;padding-right:9px}.background-current b{font-size:14px}.background-options strong{margin-right:2px}.background-options>span{font-size:9px}.tempo>span{display:none}}
.board-help{font-size:11px;line-height:1.4;color:#b4c1d4;margin:-4px 0 12px}