* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #0f1115; color: #e8e9ec; }
header { padding: 16px 20px; border-bottom: 1px solid #23242a; }
h1 { margin: 0; font-size: 18px; }
main { padding: 18px 20px; display: grid; gap: 16px; max-width: 840px; margin: 0 auto; }
section { background: #151821; border: 1px solid #23242a; border-radius: 10px; padding: 14px; }
.status, .controls { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.status label, .controls label { display: flex; align-items: center; gap: 8px; }
select, input[type="number"], button { background: #0f1115; border: 1px solid #2c2f3a; color: #e8e9ec; padding: 8px 10px; border-radius: 8px; }
button { cursor: pointer; }
button#rec { border-color: #b33; }
button#play { border-color: #3b3; }
button#stop { border-color: #bb3; }
.buttons { grid-column: 1 / -1; display: flex; gap: 8px; }
.log { font-size: 14px; display: grid; gap: 6px; }
.hint { opacity: .7; font-size: 12px; }
.chk { user-select: none; gap: 6px; }