.tune { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 280px; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 12px 14px; border-radius: 8px; background: rgba(20, 22, 28, .86); color: #fff; font: 12px/1.5 var(--font); touch-action: auto; }
.tune h2 { margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.tune .note { margin: 0 0 8px; color: #c9ccd3; font-size: 11px; }
.tune label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 6px 0; }
.tune input[type="range"] { grid-column: 1 / -1; width: 100%; }
.tune output { font-variant-numeric: tabular-nums; }
.tune .row { display: flex; gap: 8px; margin-top: 8px; }
.tune button { flex: 1; height: 30px; border: 0; border-radius: 6px; background: #fff; color: #1a1d26; font: 12px var(--font); cursor: pointer; }
.tune button:focus-visible, .tune input:focus-visible { outline: 2px solid #93DCE6; outline-offset: 2px; }
.tune textarea { width: 100%; box-sizing: border-box; margin-top: 8px; height: 64px; resize: none; border: 0; border-radius: 4px; font: 11px/1.4 monospace; }
.dbg { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font: 11px/1.5 monospace; }