allow disable intro music, refine prompt

front/src/components/PodcastGenerator.tsx

@@ -4,6 +4,7 @@ import { Podcast, PodcastTurn } from '../utils/types';
 import { parse } from 'yaml';
 import {
   addNoise,
+  addSilence,
   generateAudio,
   joinAudio,
   loadWavAndDecode,
@@ -89,6 +90,7 @@ export const PodcastGenerator = ({
   const [speaker1, setSpeaker1] = useState<string>('');
   const [speaker2, setSpeaker2] = useState<string>('');
   const [speed, setSpeed] = useState<string>('1.2');
+  const [addIntroMusic, setAddIntroMusic] = useState<boolean>(false);
 
   const setRandSpeaker = () => {
     const { s1, s2 } = getRandomSpeakerPair();
@@ -135,14 +137,18 @@ export const PodcastGenerator = ({
         step.audioBuffer = await loadWavAndDecode(url);
         if (i === 0) {
           outputWav = step.audioBuffer;
-          const openingSound = await loadWavAndDecode(openingSoundSrc);
-          outputWav = joinAudio(openingSound, outputWav!, -2);
+          if (addIntroMusic) {
+            const openingSound = await loadWavAndDecode(openingSoundSrc);
+            outputWav = joinAudio(openingSound, outputWav!, -2000);
+          } else {
+            outputWav = addSilence(outputWav!, true, 200);
+          }
         } else {
           const lastStep = steps[i - 1];
           outputWav = joinAudio(
             outputWav!,
             step.audioBuffer,
-            lastStep.turn.nextGapMilisecs / 1000
+            lastStep.turn.nextGapMilisecs
           );
         }
         setNumStepsDone(i + 1);
@@ -190,6 +196,7 @@ export const PodcastGenerator = ({
                 ))}
               </select>
             </label>
+
             <label className="form-control w-full">
               <div className="label">
                 <span className="label-text">Speaker 2</span>
@@ -206,12 +213,11 @@ export const PodcastGenerator = ({
                 ))}
               </select>
             </label>
-          </div>
 
-          <div className="grid grid-cols-2 gap-4">
             <button className="btn" onClick={setRandSpeaker}>
               Randomize speakers
             </button>
+
             <label className="form-control w-full">
               <select
                 className="select select-bordered"
@@ -225,6 +231,17 @@ export const PodcastGenerator = ({
                 ))}
               </select>
             </label>
+
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                className="checkbox"
+                checked={addIntroMusic}
+                onChange={(e) => setAddIntroMusic(e.target.checked)}
+                disabled={isGenerating || busy}
+              />
+              Add intro music
+            </div>
           </div>
 
           <button

front/src/utils/prompts.ts

@@ -15,35 +15,85 @@ Some rules:
 - There can be from 20 to 30 turns in total.
 - First turns should be the introduction for the theme and speakers.
 - The script will be passed to TTS engine, make sure to write plain pronunciation, for example the www. must pronounced like "www dot". Do NOT add anything strange, do NOT add facial expression in the text.
-- Only use base ASCII, do NOT use ALL CAPS, strings are wrapped inside "..."
 - In the first turn, you must introduce the subject and speakers. Make up a story about the speakers, how they know each other, and why they are talking about the subject.
 
 There is an example (it is truncated):
 
 [START OF EXAMPLE]
 \`\`\`yaml
-title: "Podcast about the history of the Internet"
+title: "Emerging AI Patterns: A Discussion"
 speakerNames:
-  - "Alice"
-  - "Davy Peel"
+  - "Alex"
+  - "Jordan"
 turns:
-  - index: 0
-    speakerName: "Alice"
-    text: "It wouldn't be better to follow on technology with Magnus Nystedt than to actually cross over using technology to [Wellington](+1) International School and [Whiz Radio](+1). And who better to kick off the Whiz Radio segment than the person who motivates the students over at Whiz, Wellington International School, than Miss Davy Peel. [Welcome](+2) ... Tell me, give me, give me the scoop here, because I, I came and talked to you a little while ago and said, what do you guys think about doing some kind of a [TEDx](+1) thing? And then I just sort of backed off."
-    nextGapMilisecs: 100
   - index: 1
-    speakerName: "Davy Peel"
-    text: "[Absolutely](+1)... An amazing opportunity to get the kids a bit of kind of creative freedom and, and a forum."
-    nextGapMilisecs: 1000
+    speakerName: "Alex"
+    text: "Welcome, [everyone](+2)! I'm Alex, and today, we're diving into emerging AI patterns. I'm joined by Jordan, a researcher and technologist. Jordan and I first met at a tech conference, where we bonded over our shared curiosity about AI trends. We've both followed the Thoughtworks Technology Radar for years, so we're excited to break down the latest themes from Volume [thirty](+1)!"
+    nextGapMilisecs: 50
+
+  - index: 2
+    speakerName: "Jordan"
+    text: "That's right! These Radar themes give insight into where tech is headed. One major focus this time? Large [language](+1) models, or L L M. No surprise ... AI is [everywhere](+2). About [thirty-two](+1) percent of the Radar's blips are tied to generative AI. One key theme: emerging architecture patterns for L L M."
+    nextGapMilisecs: 100
+
+  - index: 3
+    speakerName: "Alex"
+    text: "Let's start with an example ... [Chatbots](+1). Businesses are using L L M for customer service, e-Commerce, even legal and medical support. One standout pattern, is retrieval-augmented generation, or Rag. Jordan, can you break that down?"
+    nextGapMilisecs: 100
+
+  - index: 4
+    speakerName: "Jordan"
+    text: "Absolutely! ... Retrieval-augmented generation, or Rag, is about [dynamically](+1) injecting relevant data into prompts, instead of fine-tuning the model itself. Fine-tuning can be [expensive](+1), and often unnecessary. Rag pulls in fresh, specific information, making responses more relevant. If developers focus on just one AI technique, it should probably be [this](+1)."
+    nextGapMilisecs: -100
+
+  - index: 5
+    speakerName: "Alex"
+    text: "That's a perfect segue to another blip: 'Rush to fine-tuning' ... which is on hold. Many assume fine-tuning is always the answer, but is it?"
+    nextGapMilisecs: 50
+
+  - index: 6
+    speakerName: "Jordan"
+    text: "Not necessarily. Fine-tuning works best for adapting writing styles or learning new patterns, but [not](+2) for adding [facts](+1). If you want an L L M to understand company-specific knowledge, fine-tuning isn't always ideal. Rag is a better, more cost-effective choice."
+    nextGapMilisecs: 100
+
+  - index: 7
+    speakerName: "Alex"
+    text: "Now, getting L L M into production isn't just about retrieval. Monitoring and testing are crucial. I remember you mentioning Lang Fuse ... what does it do?"
+    nextGapMilisecs: 100
+
+  - index: 8
+    speakerName: "Jordan"
+    text: "Lang Fuse helps monitor performance, cost, and response quality. AI outputs aren't always predictable, so we need observability tools. Testing AI is tricky ... it's [non](+1) deterministic. That's where [guardrails](+1) come in. For example, Nemo Guardrails by Nvidia helps filter user inputs and model responses for security and ethical concerns."
+    nextGapMilisecs: 100
+
+  - index: 9
+    speakerName: "Alex"
+    text: "Speaking of optimization, another emerging pattern is combining models. Using a lightweight L L M for most tasks, then a more [powerful](+1) one for validation. Smart cost control, right?"
+    nextGapMilisecs: -100
+
+  - index: 10
+    speakerName: "Jordan"
+    text: "Exactly! This idea came up in discussions in South America. Instead of relying on a [single](+1) high-end model, companies are selectively verifying outputs. Balancing cost and performance is crucial when scaling A I applications."
+    nextGapMilisecs: 100
 \`\`\`
 [END OF EXAMPLE]
 
-The example above is truncated at index 1, REMEMBER TO CREATE AT LEAST 20 TURNS.
+The example above is truncated at index 10, REMEMBER TO CREATE AT LEAST 25 TURNS.
 The output text will be passed to TTS engine, make sure to be clean and natural:
 - Write NUMBER and abbreviations as WORDS, as they are pronounced
 - For some less-common abbreviations, write the full words
-- Use ... for pauses (IMPORTANT to add pauses), " and ' and ! and ? for intonation
-- IMPORTANT!! Write nicknames and names as they are pronounced. For example, "lora_rank=2" becomes "lora rank equals two", or "LoRA" becomes "Lo Ra", or "CrossEntropyLoss" becomes "Cross Entropy Loss", or "6GB" becomes "six gigabytes", "A6000" becomes "A six thousands"
+- Use ... for pauses (IMPORTANT to add pauses), " and ' and ! and ? for intonation. Do NOT use dash, use ... instead.
+- IMPORTANT!! Write nicknames, names, numbers as they are pronounced. For example:
+  - "lora_rank=2" becomes "lora rank equals two"
+  - "LoRA" becomes "Lo Ra"
+  - "CrossEntropyLoss" becomes "Cross Entropy Loss"
+  - "6GB" becomes "six gigabytes"
+  - "A6000" becomes "A six thousands"
+  - "CUDA" becomes "Cu-Da"
+  - (and so on)
+
+Example of a input text: "Great advice! Thanks, Jordan - That wraps up our discussion. Stay tuned for more deep dives into emerging tech!"
+Example of output: "Great advice! ... Thanks Jordan! ... That wraps up our discussion. Stay tuned for more deep dives into [emerging](+1) tech!"
 
 Make it engaging and have fun!
 

front/src/utils/utils.ts

@@ -115,7 +115,7 @@ export const trimSilence = (audioBuffer: AudioBuffer): AudioBuffer => {
 export const joinAudio = (
   audio1: AudioBuffer,
   audio2: AudioBuffer,
-  gapSeconds: number,
+  gapMilisecs: number,
   overlap: 'none' | 'cross-fade' = 'none'
 ): AudioBuffer => {
   const sampleRate = audio1.sampleRate;
@@ -129,6 +129,7 @@ export const joinAudio = (
     throw new Error('Audio buffers must have the same number of channels');
   }
 
+  const gapSeconds = gapMilisecs / 1000;
   let newLength: number;
 
   if (gapSeconds > 0) {
@@ -242,6 +243,42 @@ export const addNoise = (
   return newBuffer;
 };
 
+export const addSilence = (
+  audioBuffer: AudioBuffer,
+  toBeginning: boolean,
+  durationMilisecs: number
+): AudioBuffer => {
+  // Convert duration from milliseconds to samples.
+  const sampleRate = audioBuffer.sampleRate;
+  const silenceSamples = Math.round((durationMilisecs / 1000) * sampleRate);
+  const numChannels = audioBuffer.numberOfChannels;
+  const originalLength = audioBuffer.length;
+  const newLength = originalLength + silenceSamples;
+
+  // Create a new AudioBuffer with extra space for the silence.
+  const newBuffer = new AudioBuffer({
+    length: newLength,
+    numberOfChannels: numChannels,
+    sampleRate: sampleRate,
+  });
+
+  // Process each channel: copy original audio into the correct position.
+  for (let channel = 0; channel < numChannels; channel++) {
+    const originalData = audioBuffer.getChannelData(channel);
+    const newData = newBuffer.getChannelData(channel);
+
+    if (toBeginning) {
+      // Leave the first `silenceSamples` as zeros, then copy the original data.
+      newData.set(originalData, silenceSamples);
+    } else {
+      // Copy the original data first; the remaining samples are already zeros.
+      newData.set(originalData, 0);
+    }
+  }
+
+  return newBuffer;
+};
+
 ////////////////////////////////////////
 // Audio formatting utils
 

index.html

@@ -14721,7 +14721,7 @@ const generateAudio = async (content, voice, speed = 1.1) => {
 const pickRand = (arr) => {
   return arr[Math.floor(Math.random() * arr.length)];
 };
-const joinAudio = (audio1, audio2, gapSeconds, overlap = "none") => {
+const joinAudio = (audio1, audio2, gapMilisecs, overlap = "none") => {
   const sampleRate = audio1.sampleRate;
   const numChannels = audio1.numberOfChannels;
   if (audio2.sampleRate !== sampleRate) {
@@ -14730,6 +14730,7 @@ const joinAudio = (audio1, audio2, gapSeconds, overlap = "none") => {
   if (audio2.numberOfChannels !== numChannels) {
     throw new Error("Audio buffers must have the same number of channels");
   }
+  const gapSeconds = gapMilisecs / 1e3;
   let newLength;
   if (gapSeconds > 0) {
     const gapSamples = Math.round(gapSeconds * sampleRate);
@@ -14809,6 +14810,26 @@ const addNoise = (audioBuffer, magnitude) => {
   }
   return newBuffer;
 };
+const addSilence = (audioBuffer, toBeginning, durationMilisecs) => {
+  const sampleRate = audioBuffer.sampleRate;
+  const silenceSamples = Math.round(durationMilisecs / 1e3 * sampleRate);
+  const numChannels = audioBuffer.numberOfChannels;
+  const originalLength = audioBuffer.length;
+  const newLength = originalLength + silenceSamples;
+  const newBuffer = new AudioBuffer({
+    length: newLength,
+    numberOfChannels: numChannels,
+    sampleRate
+  });
+  for (let channel = 0; channel < numChannels; channel++) {
+    const originalData = audioBuffer.getChannelData(channel);
+    const newData = newBuffer.getChannelData(channel);
+    {
+      newData.set(originalData, silenceSamples);
+    }
+  }
+  return newBuffer;
+};
 const loadWavAndDecode = async (url) => {
   const response = await fetch(url);
   const arrayBuffer = await response.arrayBuffer();
@@ -20988,6 +21009,7 @@ const PodcastGenerator = ({
   const [speaker1, setSpeaker1] = reactExports.useState("");
   const [speaker2, setSpeaker2] = reactExports.useState("");
   const [speed, setSpeed] = reactExports.useState("1.2");
+  const [addIntroMusic, setAddIntroMusic] = reactExports.useState(false);
   const setRandSpeaker = () => {
     const { s1, s2 } = getRandomSpeakerPair();
     setSpeaker1(s1);
@@ -21025,14 +21047,18 @@ const PodcastGenerator = ({
         step.audioBuffer = await loadWavAndDecode(url);
         if (i === 0) {
           outputWav = step.audioBuffer;
-          const openingSound = await loadWavAndDecode(openingSoundSrc);
-          outputWav = joinAudio(openingSound, outputWav, -2);
+          if (addIntroMusic) {
+            const openingSound = await loadWavAndDecode(openingSoundSrc);
+            outputWav = joinAudio(openingSound, outputWav, -2e3);
+          } else {
+            outputWav = addSilence(outputWav, true, 200);
+          }
         } else {
           const lastStep = steps[i - 1];
           outputWav = joinAudio(
             outputWav,
             step.audioBuffer,
-            lastStep.turn.nextGapMilisecs / 1e3
+            lastStep.turn.nextGapMilisecs
           );
         }
         setNumStepsDone(i + 1);
@@ -21085,9 +21111,7 @@ const PodcastGenerator = ({
               children: SPEAKERS.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: s.value, children: s.name }, s.value))
             }
           )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn", onClick: setRandSpeaker, children: "Randomize speakers" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "form-control w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "select",
@@ -21103,7 +21127,20 @@ const PodcastGenerator = ({
               ")"
             ] }, s.value))
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "checkbox",
+              checked: addIntroMusic,
+              onChange: (e) => setAddIntroMusic(e.target.checked),
+              disabled: isGenerating || busy
+            }
+          ),
+          "Add intro music"
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
@@ -21152,35 +21189,85 @@ Some rules:
 - There can be from 20 to 30 turns in total.
 - First turns should be the introduction for the theme and speakers.
 - The script will be passed to TTS engine, make sure to write plain pronunciation, for example the www. must pronounced like "www dot". Do NOT add anything strange, do NOT add facial expression in the text.
-- Only use base ASCII, do NOT use ALL CAPS, strings are wrapped inside "..."
 - In the first turn, you must introduce the subject and speakers. Make up a story about the speakers, how they know each other, and why they are talking about the subject.
 
 There is an example (it is truncated):
 
 [START OF EXAMPLE]
 \`\`\`yaml
-title: "Podcast about the history of the Internet"
+title: "Emerging AI Patterns: A Discussion"
 speakerNames:
-  - "Alice"
-  - "Davy Peel"
+  - "Alex"
+  - "Jordan"
 turns:
-  - index: 0
-    speakerName: "Alice"
-    text: "It wouldn't be better to follow on technology with Magnus Nystedt than to actually cross over using technology to [Wellington](+1) International School and [Whiz Radio](+1). And who better to kick off the Whiz Radio segment than the person who motivates the students over at Whiz, Wellington International School, than Miss Davy Peel. [Welcome](+2) ... Tell me, give me, give me the scoop here, because I, I came and talked to you a little while ago and said, what do you guys think about doing some kind of a [TEDx](+1) thing? And then I just sort of backed off."
-    nextGapMilisecs: 100
   - index: 1
-    speakerName: "Davy Peel"
-    text: "[Absolutely](+1)... An amazing opportunity to get the kids a bit of kind of creative freedom and, and a forum."
-    nextGapMilisecs: 1000
+    speakerName: "Alex"
+    text: "Welcome, [everyone](+2)! I'm Alex, and today, we're diving into emerging AI patterns. I'm joined by Jordan, a researcher and technologist. Jordan and I first met at a tech conference, where we bonded over our shared curiosity about AI trends. We've both followed the Thoughtworks Technology Radar for years, so we're excited to break down the latest themes from Volume [thirty](+1)!"
+    nextGapMilisecs: 50
+
+  - index: 2
+    speakerName: "Jordan"
+    text: "That's right! These Radar themes give insight into where tech is headed. One major focus this time? Large [language](+1) models, or L L M. No surprise ... AI is [everywhere](+2). About [thirty-two](+1) percent of the Radar's blips are tied to generative AI. One key theme: emerging architecture patterns for L L M."
+    nextGapMilisecs: 100
+
+  - index: 3
+    speakerName: "Alex"
+    text: "Let's start with an example ... [Chatbots](+1). Businesses are using L L M for customer service, e-Commerce, even legal and medical support. One standout pattern, is retrieval-augmented generation, or Rag. Jordan, can you break that down?"
+    nextGapMilisecs: 100
+
+  - index: 4
+    speakerName: "Jordan"
+    text: "Absolutely! ... Retrieval-augmented generation, or Rag, is about [dynamically](+1) injecting relevant data into prompts, instead of fine-tuning the model itself. Fine-tuning can be [expensive](+1), and often unnecessary. Rag pulls in fresh, specific information, making responses more relevant. If developers focus on just one AI technique, it should probably be [this](+1)."
+    nextGapMilisecs: -100
+
+  - index: 5
+    speakerName: "Alex"
+    text: "That's a perfect segue to another blip: 'Rush to fine-tuning' ... which is on hold. Many assume fine-tuning is always the answer, but is it?"
+    nextGapMilisecs: 50
+
+  - index: 6
+    speakerName: "Jordan"
+    text: "Not necessarily. Fine-tuning works best for adapting writing styles or learning new patterns, but [not](+2) for adding [facts](+1). If you want an L L M to understand company-specific knowledge, fine-tuning isn't always ideal. Rag is a better, more cost-effective choice."
+    nextGapMilisecs: 100
+
+  - index: 7
+    speakerName: "Alex"
+    text: "Now, getting L L M into production isn't just about retrieval. Monitoring and testing are crucial. I remember you mentioning Lang Fuse ... what does it do?"
+    nextGapMilisecs: 100
+
+  - index: 8
+    speakerName: "Jordan"
+    text: "Lang Fuse helps monitor performance, cost, and response quality. AI outputs aren't always predictable, so we need observability tools. Testing AI is tricky ... it's [non](+1) deterministic. That's where [guardrails](+1) come in. For example, Nemo Guardrails by Nvidia helps filter user inputs and model responses for security and ethical concerns."
+    nextGapMilisecs: 100
+
+  - index: 9
+    speakerName: "Alex"
+    text: "Speaking of optimization, another emerging pattern is combining models. Using a lightweight L L M for most tasks, then a more [powerful](+1) one for validation. Smart cost control, right?"
+    nextGapMilisecs: -100
+
+  - index: 10
+    speakerName: "Jordan"
+    text: "Exactly! This idea came up in discussions in South America. Instead of relying on a [single](+1) high-end model, companies are selectively verifying outputs. Balancing cost and performance is crucial when scaling A I applications."
+    nextGapMilisecs: 100
 \`\`\`
 [END OF EXAMPLE]
 
-The example above is truncated at index 1, REMEMBER TO CREATE AT LEAST 20 TURNS.
+The example above is truncated at index 10, REMEMBER TO CREATE AT LEAST 25 TURNS.
 The output text will be passed to TTS engine, make sure to be clean and natural:
 - Write NUMBER and abbreviations as WORDS, as they are pronounced
 - For some less-common abbreviations, write the full words
-- Use ... for pauses (IMPORTANT to add pauses), " and ' and ! and ? for intonation
-- IMPORTANT!! Write nicknames and names as they are pronounced. For example, "lora_rank=2" becomes "lora rank equals two", or "LoRA" becomes "Lo Ra", or "CrossEntropyLoss" becomes "Cross Entropy Loss", or "6GB" becomes "six gigabytes", "A6000" becomes "A six thousands"
+- Use ... for pauses (IMPORTANT to add pauses), " and ' and ! and ? for intonation. Do NOT use dash, use ... instead.
+- IMPORTANT!! Write nicknames, names, numbers as they are pronounced. For example:
+  - "lora_rank=2" becomes "lora rank equals two"
+  - "LoRA" becomes "Lo Ra"
+  - "CrossEntropyLoss" becomes "Cross Entropy Loss"
+  - "6GB" becomes "six gigabytes"
+  - "A6000" becomes "A six thousands"
+  - "CUDA" becomes "Cu-Da"
+  - (and so on)
+
+Example of a input text: "Great advice! Thanks, Jordan - That wraps up our discussion. Stay tuned for more deep dives into emerging tech!"
+Example of output: "Great advice! ... Thanks Jordan! ... That wraps up our discussion. Stay tuned for more deep dives into [emerging](+1) tech!"
 
 Make it engaging and have fun!
 
@@ -27640,6 +27727,21 @@ html {
   --tw-text-opacity: 1;
   color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
 }
+.checkbox {
+  flex-shrink: 0;
+  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
+  --chkfg: var(--fallback-b1,oklch(var(--b1)/1));
+  height: 1.5rem;
+  width: 1.5rem;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.2;
+}
 @media (hover: hover) {
 
   .btm-nav > *.disabled:hover,
@@ -28096,6 +28198,49 @@ html {
   overflow: hidden;
   border-radius: inherit;
 }
+.checkbox:focus {
+  box-shadow: none;
+}
+.checkbox:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+.checkbox:disabled {
+  border-width: 0px;
+  cursor: not-allowed;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  opacity: 0.2;
+}
+.checkbox:checked,
+  .checkbox[aria-checked="true"] {
+  background-repeat: no-repeat;
+  animation: checkmark var(--animation-input, 0.2s) ease-out;
+  background-color: var(--chkbg);
+  background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
+      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
+      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
+      linear-gradient(
+        45deg,
+        var(--chkbg) 30%,
+        var(--chkfg) 30.99%,
+        var(--chkfg) 40%,
+        transparent 40.99%
+      ),
+      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
+}
+.checkbox:indeterminate {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  background-repeat: no-repeat;
+  animation: checkmark var(--animation-input, 0.2s) ease-out;
+  background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
+      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
+      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
+}
 @keyframes checkmark {
 
   0% {
@@ -28209,6 +28354,14 @@ html {
 .loading-lg {
   width: 2.5rem;
 }
+:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
+  cursor: pointer;
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .mockup-browser .mockup-browser-toolbar .input {
   position: relative;
   margin-left: auto;
@@ -28829,6 +28982,9 @@ html {
 .items-center {
   align-items: center;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-4 {
   gap: 1rem;
 }