aghyad97

/* segmented control, shared by the title-scale treatment */
.tabs{display:inline-flex;background:var(--muted);border-radius:calc(var(--radius)*0.8);padding:2px;gap:2px}
.tabs button{border:0;background:transparent;color:var(--muted-foreground);font:inherit;font-size:12.5px;
  padding:0 10px;height:24px;border-radius:calc(var(--radius)*0.6);cursor:pointer}
.tabs button.on{background-color:var(--background);color:var(--foreground);font-weight:500;
  background-image:var(--sheen-corner);box-shadow:var(--edge-hi),0 1px 2px oklch(0 0 0 / 16%)}

/* underline tabs, the first level of the cross-axis treatment */
.ul{display:flex;gap:18px;border-bottom:1px solid var(--border)}
.ul button{border:0;background:none;font:inherit;font-size:13.5px;color:var(--muted-foreground);padding:0 0 8px;

aghyad97

const audioCtxRef = useRef<AudioContext | null>(null);


const ensureAudio = useCallback(() => {
    if (audioCtxRef.current) return audioCtxRef.current;
    const Ctx =
      (window as any).AudioContext || (window as any).webkitAudioContext;
    if (!Ctx) return null;
    audioCtxRef.current = new Ctx();
    return audioCtxRef.current;