.clipo-sound {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  color: #131313;
  font: 13px/1.3 Arial, sans-serif;
  pointer-events: auto;
}
.clipo-sound button { font: inherit; cursor: pointer; border: 1px solid #131313; border-radius: 0; padding: 10px 12px; min-height: 44px; background: #f7f7f7; color: #131313; }
.clipo-sound__bar { display: flex; gap: 4px; }
.clipo-sound [aria-pressed="true"] { background: #ffdf42; }
.clipo-sound button:hover { background: #ffdf42; }
.clipo-sound button:focus-visible, .clipo-sound input:focus-visible { outline: 3px solid #ff2285; outline-offset: 3px; }
.clipo-sound__panel { position: absolute; bottom: 52px; left: 0; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); overflow: auto; background: #f7f7f7; border: 1px solid #131313; padding: 16px; box-sizing: border-box; }
.clipo-sound[hidden], .clipo-sound [hidden] { display: none !important; }
.clipo-sound__panel label { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.clipo-sound input { width: 100%; accent-color: #2636f5; }
.clipo-sound__panel p { margin: 12px 0; }
.clipo-sound__samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 12px; }
.clipo-sound__samples button { padding: 8px 4px; }
.clipo-sound__panel small { font-size: 11px; }
.clipo-sound__status:not(:empty) { display: block; max-width: 280px; padding: 8px; margin-top: 4px; background: #f7f7f7; }