# get_design_context — node 66:2739 (Conversation Prelaunch)

Captured: 2026-03-30
Tool: `mcp__figma-remote__get_design_context`
Parameters: `nodeId: "66:2739"`, `fileKey: "GaHmFfmvO4loUzuZS4TgEz"`, `clientFrameworks: "react"`, `clientLanguages: "typescript"`

> **Note:** The MCP tool returned a truncation notice: `[OUTPUT TRUNCATED - exceeded 25000 token limit]`. The code block below contains the full returned output up to that truncation point.

```tsx
const imgSvgRepoIconCarrier = "https://www.figma.com/api/mcp/asset/621c2057-67c0-4ccc-87ff-a4f4b1bc7121";
const imgSvgRepoIconCarrier1 = "https://www.figma.com/api/mcp/asset/45791d1a-e36d-43bf-a5f9-62cbd81ebf58";
const imgImage1 = "https://www.figma.com/api/mcp/asset/b06b426f-140b-4ad5-a5a8-8e035b727694";
const imgIon = "https://www.figma.com/api/mcp/asset/4466b147-7ffe-43fd-8a90-bbc5ce803a3d";
const imgDiscourser = "https://www.figma.com/api/mcp/asset/0e681baf-bce6-4783-9ec6-93f32ed57a9e";
const imgVector = "https://www.figma.com/api/mcp/asset/f5545370-cc66-4d50-848e-5dc681cb9b69";
const imgVector1 = "https://www.figma.com/api/mcp/asset/a69f1fef-9654-4bca-baca-350a860ab959";
const imgVector2 = "https://www.figma.com/api/mcp/asset/b17a8ede-3c51-4b33-900a-243c6f123be7";
const imgVector3 = "https://www.figma.com/api/mcp/asset/b15e7b5b-76bf-4d84-b135-b0dc249fcdb3";
const imgVector4 = "https://www.figma.com/api/mcp/asset/175a4da8-e252-4fd7-9b4d-40a3f0583ce6";
const imgVector5 = "https://www.figma.com/api/mcp/asset/dab1a624-7f62-454d-bda0-35d4b770ce6e";
const imgVector6 = "https://www.figma.com/api/mcp/asset/47792dd6-208c-4652-af05-daf045fb1191";
const imgGroup4890 = "https://www.figma.com/api/mcp/asset/f44ab35b-e016-4ff4-b172-5a1ef267dac9";
const imgVector7 = "https://www.figma.com/api/mcp/asset/024e9f42-806f-4d64-9095-c65697d85309";
const imgGroup4891 = "https://www.figma.com/api/mcp/asset/97bff702-dcfb-4b76-a84c-d376dfff568e";
const imgLucideIconsIterationCcw = "https://www.figma.com/api/mcp/asset/728a091f-f412-4588-8fd5-e11b45597d54";
const imgVector8 = "https://www.figma.com/api/mcp/asset/fd513619-f3a6-4ff5-b379-67309df0a655";
const imgSlash = "https://www.figma.com/api/mcp/asset/eedfe6f0-e773-45f7-a376-4097ec6c089d";
const imgSlash1 = "https://www.figma.com/api/mcp/asset/8cfeb10f-2c1f-4f78-a0e1-3b3534351ebb";
const imgVector9 = "https://www.figma.com/api/mcp/asset/eaa83e2d-bc8f-4c85-87b7-4598bac9c942";
const imgFrame4892 = "https://www.figma.com/api/mcp/asset/ef2481c0-e964-4494-849b-b535f85b3eaf";
const imgVector10 = "https://www.figma.com/api/mcp/asset/67c422d4-939f-4348-8634-7c59852a422e";
const imgIcon = "https://www.figma.com/api/mcp/asset/23fc87de-cea3-4016-a8c8-bbccfd48cbfd";
const imgIcon1 = "https://www.figma.com/api/mcp/asset/63bec460-3c95-46b6-a699-16d1238c202f";
const imgVector11 = "https://www.figma.com/api/mcp/asset/7a9154be-93c1-4ecc-82c2-aac27caccb42";
const imgOutPutEq = "https://www.figma.com/api/mcp/asset/45214c95-56a9-4f0d-9d12-0ce56420fe85";
const imgSvgRepoIconCarrier2 = "https://www.figma.com/api/mcp/asset/42ddeaaf-6bc4-407b-af55-b64cdb3a8d12";
const imgVector12 = "https://www.figma.com/api/mcp/asset/3d782029-fe64-4de3-95e6-b7211a4a7941";
const imgSvgRepoIconCarrier3 = "https://www.figma.com/api/mcp/asset/44ebe83c-357d-4c67-a039-9192c4d09a60";
const imgSwitch = "https://www.figma.com/api/mcp/asset/80650420-56cf-4db6-a1a4-33a2c558c28d";
const imgSvgRepoIconCarrier4 = "https://www.figma.com/api/mcp/asset/e4c5839a-55ec-4a59-b167-9879d4400fb9";
const imgSwitch1 = "https://www.figma.com/api/mcp/asset/1c50cf61-6192-4e41-a51e-16729da02ac5";
type SettingsPopoverProps = {
  className?: string;
  property1?: "Default";
};

function SettingsPopover({ className, property1 = "Default" }: SettingsPopoverProps) {
  return (
    <div className={className || "bg-[var(--neutral\\/90,#e3e3db)] border-[var(--neutral\\/90,#e3e3db)] border-solid border-t-[length:var(--border\\/thin,1px)] content-stretch flex flex-col items-start justify-center overflow-clip py-[6px] relative w-[285px]"} data-node-id="810:5397">
      <div className="content-stretch flex gap-[12px] h-[55px] items-center px-[10px] relative shrink-0 w-[283px]" data-node-id="810:5385">
        <div className="bg-[var(--neutral\/90,#e3e3db)] overflow-clip relative rounded-[9999px] shrink-0 size-[44.154px]" data-name="LoggedInAvatar" data-node-id="810:5369">
          <div className="absolute flex h-[43.349px] items-center justify-center left-[5.89px] top-[3.13px] w-[41.785px]">
            <div className="flex-none rotate-[-13.92deg]">
              <div className="h-[36.215px] overflow-clip relative w-[34.072px]" data-name="Layer_1" data-node-id="I810:5369;810:5345">
                <div className="absolute inset-[0_14.63%]" data-name="SVGRepo_iconCarrier" data-node-id="I810:5369;810:5346">
                  <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier} />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="content-stretch flex flex-col items-start leading-[0] not-italic relative shrink-0 w-[161px]" data-node-id="810:5387">
          <div className="flex flex-col font-['Poppins:Medium',sans-serif] justify-center relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-full" data-node-id="810:5384">
            <p className="leading-[normal]">Will Streeter</p>
          </div>
          <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center relative shrink-0 text-[14px] text-[color:var(--neutral\/40,#5e5f59)] w-full" data-node-id="810:5386">
            <p className="leading-[normal]">Free Trial</p>
          </div>
        </div>
        <div className="overflow-clip relative shrink-0 size-[40px]" data-name="PopOver" data-node-id="810:5393">
          <div className="absolute inset-[12.96%_17.82%]" data-name="SVGRepo_iconCarrier" data-node-id="I810:5393;810:5389">
            <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier1} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default function ScenarioStudioConversationPrelaunch({ className }: { className?: string }) {
  return (
    <div className={className || "bg-[var(--neutral\\/100,white)] h-[1239px] overflow-clip relative w-[1728px]"} data-name="Scenario/Studio Conversation/ Prelaunch" data-node-id="66:2739">
      <div className="absolute content-stretch flex h-[1239px] items-start left-0 overflow-clip top-0 w-[1728px]" data-name="Grid" data-node-id="38:3427">
        <div className="bg-[var(--surface\/container\/high,#e8e9de)] border-[var(--neutral\/90,#e3e3db)] border-r border-solid content-stretch flex flex-col h-[1095px] items-start overflow-clip relative shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] shrink-0 w-[285px]" data-name="Left Side Nav" data-node-id="573:7508">
          <div className="content-stretch flex h-[92px] items-center justify-center py-[15px] relative shrink-0 w-full" data-name="Logo Holder" data-node-id="573:7509">
            <div className="content-stretch flex h-[45.252px] items-center py-[3.771px] relative shrink-0 w-[262.46px]" data-name="DiscourserLogo" data-node-id="573:7510">
              <div className="h-[33.939px] relative shrink-0 w-[18.855px]" data-name="ion" data-node-id="I573:7510;489:4928">
                <div className="absolute inset-[0_-1.26%_0_0]">
                  <img alt="" className="block max-w-none size-full" src={imgIon} />
                </div>
              </div>
              <div className="h-[34.367px] relative shrink-0 w-[235.252px]" data-name="Discourser" data-node-id="I573:7510;489:4932">
                <img alt="" className="absolute block max-w-none size-full" src={imgDiscourser} />
              </div>
            </div>
          </div>
          <div className="content-stretch cursor-pointer flex flex-col h-[1091px] items-start overflow-clip relative shrink-0 w-[283px]" data-name="Navigation Menu" data-node-id="573:7511">
            <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8486">
              <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8486;340:4002">
                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8486;340:4003">
                  <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8486;340:4004">
                    <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8486;340:4005">
                      <div className="absolute inset-[12.5%]" data-name="Vector" data-node-id="I573:7511;38:8486;340:4005;2706:15477">
                        <div className="absolute inset-[-4.43%]">
                          <img alt="" className="block max-w-none size-full" src={imgVector} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8486;340:4006">
                    <p className="leading-[normal]">Dashboard</p>
                  </div>
                </div>
                <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8486;340:4007">
                  <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8486;340:4008">
                    <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8486;340:4008;330:4497">
                      <div className="absolute inset-[-9.17%_-18.33%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector1} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </button>
            <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8487">
              <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8487;340:4002">
                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8487;340:4003">
                  <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8487;340:4004">
                    <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8487;340:4005">
                      <div className="absolute inset-[12.5%_8.33%]" data-name="Vector" data-node-id="I573:7511;38:8487;340:4005;2706:14271">
                        <div className="absolute inset-[-4.43%_-3.99%]">
                          <img alt="" className="block max-w-none size-full" src={imgVector2} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8487;340:4006">
                    <p className="leading-[normal]">MyNotebook</p>
                  </div>
                </div>
                <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8487;340:4007">
                  <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8487;340:4008">
                    <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8487;340:4008;330:4497">
                      <div className="absolute inset-[-9.17%_-18.33%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector1} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </button>
            <button className="content-stretch flex flex-col gap-[10px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8488">
              <div className="bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7931">
                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7932">
                  <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8488;38:7933">
                    <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8488;38:7934">
                      <div className="absolute inset-[12.5%]" data-name="Vector" data-node-id="I573:7511;38:8488;38:7934;2706:15657">
                        <div className="absolute inset-[-4.43%]">
                          <img alt="" className="block max-w-none size-full" src={imgVector3} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col font-['Poppins:Medium',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8488;38:7935">
                    <p className="leading-[normal]">Scenarios</p>
                  </div>
                </div>
                <div className="flex items-center justify-center relative shrink-0 size-[24.056px]">
                  <div className="flex-none rotate-[90.13deg]">
                    <div className="relative size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8488;38:7936">
                      <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8488;38:7937">
                        <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8488;38:7937;330:4497">
                          <div className="absolute inset-[-9.17%_-18.33%]">
                            <img alt="" className="block max-w-none size-full" src={imgVector1} />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7938" role="button" tabIndex="0">
                <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7938;782:3202">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[191.565px]" data-node-id="I573:7511;38:8488;38:7938;782:3203">
                    <p className="leading-[normal]">MyQueue</p>
                  </div>
                </div>
              </div>
              <div className="bg-[var(--secondary\/80,#bbcda1)] content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7939" role="button" tabIndex="0">
                <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7939;38:7772">
                  <div className="flex flex-col font-['Poppins:Medium',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[0px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7939;38:7773">
                    <p className="leading-[normal] text-[14px]">Conversation Studio</p>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7940" role="button" tabIndex="0">
                <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7940;38:7784">
                  <p className="font-['Poppins:Regular',sans-serif] h-[18.049px] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7940;38:7785">
                    Studio Setup
                  </p>
                </div>
              </div>
              <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7941" role="button" tabIndex="0">
                <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7941;38:7796">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7941;38:7797">
                    <p className="leading-[normal]">By Level</p>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7942" role="button" tabIndex="0">
                <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7942;38:7745">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7942;38:7746">
                    <p className="leading-[normal] whitespace-pre-wrap">{`By  Skill`}</p>
                  </div>
                </div>
              </div>
            </button>
            <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8489">
              <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8489;340:4002">
                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8489;340:4003">
                  <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8489;340:4004">
                    <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8489;340:4005">
                      <div className="absolute inset-[28.93%_8.22%_20.83%_8.33%]" data-name="Vector" data-node-id="I573:7511;38:8489;340:4005;2706:15321">
                        <div className="absolute inset-[-6.62%_-3.98%]">
                          <img alt="" className="block max-w-none size-full" src={imgVector4} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8489;340:4006">
                    <p className="leading-[normal]">Help</p>
                  </div>
                </div>
                <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8489;340:4007">
                  <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8489;340:4008">
                    <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8489;340:4008;330:4497">
                      <div className="absolute inset-[-9.17%_-18.33%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector1} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </button>
            <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8490">
              <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8490;340:4002">
                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8490;340:4003">
                  <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8490;340:4004">
                    <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8490;340:4005">
                      <div className="absolute inset-[12.5%_16.67%]" data-name="Vector" data-node-id="I573:7511;38:8490;340:4005;2706:16360">
                        <div className="absolute inset-[-4.43%_-4.99%]">
                          <img alt="" className="block max-w-none size-full" src={imgVector5} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8490;340:4006">
                    <p className="leading-[normal]">Account</p>
                  </div>
                </div>
                <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8490;340:4007">
                  <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8490;340:4008">
                    <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8490;340:4008;330:4497">
                      <div className="absolute inset-[-9.17%_-18.33%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector1} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </button>
          </div>
          <SettingsPopover className="absolute bg-[var(--neutral\/90,#e3e3db)] border-[var(--neutral\/90,#e3e3db)] border-solid border-t-[length:var(--border\/thin,1px)] content-stretch flex flex-col items-start justify-center left-0 overflow-clip py-[6px] top-[1028px] w-[285px]" />
        </div>
        <div className="bg-[var(--neutral\/100,white)] content-stretch flex flex-col gap-[10px] h-[1276px] items-start overflow-clip pb-[10px] pt-[100px] px-[100px] relative shrink-0 w-[1089px]" data-name="Stage" data-node-id="38:3432">
          <div className="absolute bg-[var(--neutral\/0,black)] h-[1095px] left-[-284px] top-0 w-[1723px]" data-name="image backgournd" data-node-id="38:3433">
            <div className="absolute h-[1164.836px] left-0 opacity-0 top-[-45.64px] w-[1732.233px]" data-name="image 1" data-node-id="38:3434">
              <img alt="" className="absolute inset-0 max-w-none object-cover pointer-events-none size-full" src={imgImage1} />
            </div>
            <div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-[length:var(--border\/thin,1px)] border-[var(--neutral\/70,#abaca5)] border-solid content-stretch flex flex-col gap-[var(--spacing\/xl,32px)] items-center left-[calc(50%-28.72px)] overflow-clip px-[var(--spacing\/xl,32px)] py-[var(--spacing\/xxl,48px)] rounded-[var(--radii\/large,16px)] top-[calc(50%+21.5px)]" data-name="Instructions Container" data-node-id="38:3435">
              <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,24px)] h-[254px] items-start px-[var(--spacing\/sm,8px)] py-[var(--spacing\/md,16px)] relative shrink-0" data-name="List" data-node-id="38:3436">
                <div className="content-stretch flex items-start overflow-clip p-[5px] relative shrink-0" data-name="List Topic" data-node-id="38:3437">
                  <p className="font-['Fraunces:Regular',sans-serif] font-normal leading-[0] relative shrink-0 text-[0px] text-[color:var(--neutral\/0,black)] whitespace-nowrap" data-node-id="38:3438" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
                    <span className="leading-[normal] text-[#1b1c18] text-[28px]" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
                      Before You Start:
                    </span>
                    <span className="leading-[normal] text-[28px]" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>{` `}</span>
                  </p>
                </div>
                <div className="content-stretch flex flex-col gap-[var(--spacing\/md,16px)] h-[177px] items-start px-[10px] relative shrink-0 w-[826px]" data-name="List Items" data-node-id="38:3439">
                  <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3440">
                    <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5106">
                      <div className="absolute inset-[-8.57%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector6} />
                      </div>
                    </div>
                    <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[394.447px]" data-node-id="38:3441">
                      <p className="leading-[normal] whitespace-pre-wrap">{`Find a quiet space  `}</p>
                    </div>
                  </div>
                  <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3442">
                    <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5108">
                      <div className="absolute inset-[-8.57%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector6} />
                      </div>
                    </div>
                    <p className="font-['Poppins:Regular',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[711.254px]" data-node-id="38:3443">{`Speak at normal volume and use headphones for best quality. `}</p>
                  </div>
                  <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3444">
                    <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5110">
                      <div className="absolute inset-[-8.57%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector6} />
                      </div>
                    </div>
                    <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[47.572px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[791px]" data-node-id="38:3445">
                      <p className="leading-[normal] whitespace-pre-wrap">{`If you have not set up  the audio output and microphone input, use the right panel to do so before you start`}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex flex-col gap-[40px] h-[309px] items-start relative shrink-0 w-full" data-name="List" data-node-id="38:3446">
                <div className="content-stretch flex items-start overflow-clip p-[5px] relative shrink-0" data-name="List Topic" data-node-id="38:3447">
                  <p className="font-['Fraunces:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[28px] text-[color:var(--neutral\/10,#1b1c18)] whitespace-nowrap" data-node-id="38:3448" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
                    Once the Conversation Starts:
                  </p>
                </div>
                <div className="content-stretch flex flex-col gap-[30px] items-start px-[10px] relative shrink-0 w-full" data-name="List Items" data-node-id="38:3449">
                  <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[856px]" data-name="List Item" data-node-id="38:3450">
                    <div className="bg-[var(--secondary\/50,#6c7d56)] content-stretch flex items-center justify-center p-[9.404px] relative rounded-[50px] shrink-0 size-[47.02px]" data-name="audio- Pause Button Small" data-node-id="875:6109">
                      <div className="relative shrink-0 size-[28.212px]" data-name="icon pause frame" data-node-id="I875:6109;38:8371">
                        <div className="absolute left-0 size-[28.58px] top-0" data-node-id="I875:6109;38:8371;38:9850">
                          <img alt="" className="absolute block max-w-none size-full" src={imgGroup4890} />
                        </div>
                        <div className="absolute left-[8.89px] overflow-clip size-[10.804px] top-[8.89px]" data-name="Lucide Icons / stretch-vertical" data-node-id="I875:6109;38:8371;38:9852">
                          <div className="absolute inset-[8.33%_16.67%]" data-name="Vector" data-node-id="I875:6109;38:8371;38:9852;2706:14933">
                            <div className="absolute inset-[-5.25%_-6.56%]">
                              <img alt="" className="block max-w-none size-full" src={imgVector7} />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-end leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] whitespace-nowrap" data-node-id="38:3452">
                      <p className="leading-[normal]">{` Tap pause on the bottom right panel if you feel compelled to stop for a moment `}</p>
                    </div>
                  </div>
                  <div className="content-stretch flex items-center relative shrink-0" data-name="List Item" data-node-id="38:3453">
                    <div className="bg-[var(--secondary\/50,#6c7d56)] content-stretch flex flex-col items-center justify-center relative rounded-[50px] shrink-0 size-[47.018px]" data-name="audio- ExitButtonMajor small" data-node-id="573:7610">
                      <div className="relative shrink-0 size-[27.994px]" data-name="icon- exist" data-node-id="I573:7610;881:7413">
                        <div className="-translate-x-1/2 -translate-y-1/2 absolute left-[calc(50%+0.11px)] size-[28.211px] top-[calc(50%+0.11px)]" data-node-id="I573:7610;881:7413;880:7299">
                          <img alt="" className="absolute block max-w-none size-full" src={imgGroup4891} />
                        </div>
                      </div>
                    </div>
                    <p className="font-['Poppins:Regular',sans-serif] h-[19.621px] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[586.352px] whitespace-pre-wrap" data-node-id="38:3455">{`   Use the exit button to leave the conversation abruptly`}</p>
                  </div>
                  <div className="content-stretch flex items-center relative shrink-0" data-name="List Item" data-node-id="38:3456">
                    <button className="bg-[var(--secondary\/50,#6c7d56)] block cursor-pointer relative rounded-[50px] shrink-0 size-[47.018px]" data-name="audio- Rewind small" data-node-id="573:7606">
                      <div className="-translate-x-1/2 -translate-y-1/2 absolute flex h-[37.614px] items-center justify-center left-[calc(50%-0.47px)] top-[calc(50%-0.47px)] w-[43.257px]">
                        <div className="flex-none rotate-180">
                          <div className="h-[37.614px] relative w-[43.257px]" data-name="Lucide Icons / iteration-ccw" data-node-id="I573:7606;709:12364">
                            <img alt="" className="absolute block max-w-none size-full" src={imgLucideIconsIterationCcw} />
                          </div>
                        </div>
                      </div>
                    </button>
                    <p className="font-['Poppins:Regular',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[781px] whitespace-pre-wrap" data-node-id="38:3458">
                      {`   Use replay on the bottom  right  to hear the previous statement from your      `}
                      <br aria-hidden="true" />
                      {`   conversation partner`}
                    </p>
                  </div>
                </div>
              </div>
              <a className="bg-[var(--secondary\/50,#6c7d56)] content-stretch cursor-pointer flex gap-[var(--p-2,8px)] h-[52px] items-center justify-center px-[var(--p-4,16px)] py-[var(--p-2,8px)] relative rounded-[var(--calc(var(--radius)-2px),8px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[352px]" data-name="Discourser Button" data-node-id="875:6042">
                <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--surface,#f9faef)] text-left whitespace-pre" data-node-id="I875:6042;534:3729">{`Start  Scenario Conversation `}</p>
                <div className="overflow-clip relative shrink-0 size-[20px]" data-name="Lucide Icons / arrow-right" data-node-id="I875:6042;534:3731">
                  <div className="absolute inset-[20.83%]" data-name="Vector" data-node-id="I875:6042;534:3731;2706:13911">
                    <div className="absolute inset-[-8.57%]">
                      <img alt="" className="block max-w-none size-full" src={imgVector8} />
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
          <div className="absolute bg-[var(--neutral\/30,#464742)] border border-[var(--neutral\/80,#c7c7c0)] border-solid content-stretch flex flex-col items-start left-[28.5px] p-[20px] rounded-[var(--radii\/medium,12px)] top-[20px]" data-name="masthead container" data-node-id="38:3459">
            <div className="content-stretch flex flex-col gap-[10px] items-start justify-center relative shrink-0 w-[417px]" data-name="Breadcrumb" data-node-id="697:5275">
              <div className="content-stretch flex items-start overflow-clip relative shrink-0 w-[466px]" data-name="Static Section" data-node-id="I697:5275;697:5215">
                <div className="content-stretch flex gap-[6px] items-center pl-[6px] relative shrink-0" data-name="Static Crumb" data-node-id="I697:5275;697:5232">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/95,#f2f1e9)] whitespace-nowrap" data-node-id="I697:5275;697:5219">
                    <p className="leading-[normal]">Scenarios</p>
                  </div>
                  <div className="h-[11.591px] relative shrink-0 w-[3.908px]" data-name="slash" data-node-id="I697:5275;697:5227">
                    <div className="absolute inset-[-8.63%_-5.07%_-8.63%_-25.6%]">
                      <img alt="" className="block max-w-none size-full" src={imgSlash} />
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex gap-[6px] items-center px-[6px] relative shrink-0" data-name="Static Crumb" data-node-id="I697:5275;697:5237">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/99,#fdfcf5)] whitespace-nowrap" data-node-id="I697:5275;697:5238">
                    <p className="leading-[normal]">{`Conversation Studio `}</p>
                  </div>
                  <div className="h-[11.591px] relative shrink-0 w-[3.908px]" data-name="slash" data-node-id="I697:5275;697:5239">
                    <div className="absolute inset-[-8.63%_-5.07%_-8.63%_-25.6%]">
                      <img alt="" className="block max-w-none size-full" src={imgSlash1} />
                    </div>
                  </div>
                </div>
              </div>
              <div className="content-stretch flex items-center overflow-clip relative shrink-0" data-name="DynmicSection" data-node-id="I697:5275;697:5198">
                <div className="content-stretch flex gap-[2px] h-[36px] items-center pl-[6px] py-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;38:7979">
                  <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/80,#97d945)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;38:7980">
                    <p className="leading-[normal]">Level Setting</p>
                  </div>
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="-scale-y-100 flex-none">
                      <div className="overflow-clip relative size-[18px]" data-name="icon-cheveron-left" data-node-id="I697:5275;38:7982">
                        <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I697:5275;38:7982;685:5159">
                          <div className="absolute inset-[-12.22%_-24.44%]">
                            <img alt="" className="block max-w-none size-full" src={imgVector9} />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex gap-[2px] h-[36px] items-center p-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;38:7984">
                  <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/80,#97d945)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;38:7984">
                    <p className="leading-[normal]">Lobby</p>
                  </div>
                  <div className="h-[11px] shrink-0 w-[4px]" data-name="spacer" data-node-id="I697:5275;38:7986" />
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="-scale-y-100 flex-none">
                      <div className="overflow-clip relative size-[18px]" data-name="icon-cheveron-left" data-node-id="I697:5275;38:7987">
                        <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I697:5275;38:7987;685:5159">
                          <div className="absolute inset-[-12.22%_-24.44%]">
                            <img alt="" className="block max-w-none size-full" src={imgVector9} />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex gap-[2px] h-[36px] items-center pl-[6px] py-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;685:5135">
                  <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/99,#f9ffe9)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;685:5136">
                    <p className="leading-[normal]">Pre-conversation</p>
                  </div>
                  <div className="h-[11px] shrink-0 w-[4px]" data-name="spacer" data-node-id="I697:5275;685:5137" />
                </div>
              </div>
            </div>
          </div>
          <div className="absolute bg-[var(--primary\/10,#102000)] border border-[var(--primary\/20,#1f3700)] border-solid content-stretch flex items-center justify-center left-[950.04px] overflow-clip px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] rounded-[12px] top-[1000px]" data-name="Clock" data-node-id="38:3464">
            <div className="flex flex-col font-['Poppins:SemiBold',sans-serif] h-[41.521px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--primary\/80,#97d945)] text-center w-[89.476px]" data-node-id="38:3465">
              <p className="leading-[normal]">15:00</p>
            </div>
          </div>
        </div>
        <a className="bg-[var(--neutral\/99,#fdfcf5)] border-[#e5e7eb] border-l border-solid content-stretch cursor-pointer flex flex-col h-[1319px] items-start overflow-clip pl-px relative rounded-[8px] shrink-0 w-[354px]" data-name="RightControlPanel" data-node-id="38:3466">
          <div className="border-[var(--neutral\/99,#fdfcf5)] border-b border-solid h-[78px] shrink-0 sticky top-0 w-[353px]" data-name="Container" data-node-id="38:3467">
            <div className="bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-px px-[24px] relative size-full">
              <div className="h-[27px] relative shrink-0 w-[187px]" data-name="Heading 2" data-node-id="38:3468">
                <div className="bg-clip-padding border-0 border-[transparent] border-solid relative size-full">
                  <div className="-translate-y-full absolute flex flex-col font-['Fraunces:Regular',sans-serif] font-normal justify-end leading-[0] left-[calc(50%-93.5px)] text-[28px] text-[color:var(--neutral\/20,#30312c)] text-left top-[29px] w-[239.96px]" data-node-id="38:3469" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
                    <p className="leading-[normal]">Studio Controls</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-[var(--neutral\/99,#fdfcf5)] h-[1695px] relative shrink-0 w-[353px]" data-name="StudioControlsMenu" data-node-id="875:5855">
            <div className="bg-clip-padding border-0 border-[transparent] border-solid content-stretch cursor-pointer flex flex-col items-start relative size-full">
              <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item (Info Panel)" data-node-id="I875:5855;38:8233" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8233;38:8141">
                  <div className="content-stretch flex flex-col items-center justify-center overflow-clip relative shrink-0" data-name="icon- Configure Settings" data-node-id="I875:5855;38:8233;38:8142">
                    <div className="h-[40.5px] relative shrink-0 w-[26.667px]" data-node-id="I875:5855;38:8233;38:8142;925:12548">
                      <img alt="" className="absolute block max-w-none size-full" src={imgFrame4892} />
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8143">
                    Scenario Settings
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8233;38:8144">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8233;38:8144;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector10} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-[#fffdfa] border border-[#e5e7eb] border-solid content-stretch flex flex-col gap-[10px] items-start p-[20px] relative rounded-[6px] shrink-0 w-[324px]" data-name="panel- Information Slot Contents" data-node-id="I875:5855;38:8233;38:8145">
                  <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Scenarios type" data-node-id="I875:5855;38:8233;38:8145;939:5894">
                    <div className="flex flex-col font-['Poppins:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[color:var(--neutral\/20,#30312c)] text-left w-[207px]" data-node-id="I875:5855;38:8233;38:8145;939:5895">
                      <p className="leading-[normal]">UX Interview Practice</p>
                    </div>
                    <div className="content-stretch flex flex-col h-[33px] items-start relative shrink-0" data-name="List" data-node-id="I875:5855;38:8233;38:8145;939:5896">
                      <div className="content-stretch flex flex-col items-start relative shrink-0 w-[275px]" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5897">
                        <p className="font-['Inter:Regular',sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#4a5565] text-[0px] text-left w-[293px]" data-node-id="I875:5855;38:8233;38:8145;939:5898">
                          <span className="font-['Poppins:Medium',sans-serif] leading-[30px] text-[#263515] text-[14px]">Focus</span>
                          <span className="font-['Poppins:Regular',sans-serif] leading-[30px] text-[#30312c] text-[14px]">:</span>
                          <span className="leading-[30px] text-[#30312c] text-[18px]">{` `}</span>
                          <span className="font-['Poppins:Regular',sans-serif] leading-[30px] text-[#30312c] text-[14px]">Technical Communication</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Ai Settings" data-node-id="I875:5855;38:8233;38:8145;939:5899">
                    <div className="h-[23px] relative shrink-0 w-[284px]" data-name="Heading 5" data-node-id="I875:5855;38:8233;38:8145;939:5900">
                      <p className="absolute font-['Poppins:Medium',sans-serif] leading-[normal] left-0 not-italic text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left top-[-1px] whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5901">{`Scenario  Settings`}</p>
                    </div>
                    <div className="bg-[var(--neutral\/90,#e3e3db)] content-stretch flex flex-col items-center p-[var(--spacing\/md,16px)] relative rounded-[8px] shrink-0 w-full" data-name="Interviewer Settings" data-node-id="I875:5855;38:8233;38:8145;939:5902">
                      <div className="content-stretch flex flex-col gap-[10px] items-start p-[var(--spacing\/sm,8px)] relative shrink-0" data-name="List" data-node-id="I875:5855;38:8233;38:8145;939:5903">
                        <div className="content-stretch flex gap-[2px] items-center relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5904">
                          <p className="flex-[1_0_0] font-['Poppins:Medium',sans-serif] leading-[normal] min-h-px min-w-px not-italic relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre-wrap" data-node-id="I875:5855;38:8233;38:8145;939:5905">{`Conversation Flow:  `}</p>
                          <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex h-[29px] items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5906">
                            <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5906;930:1723">
                              Beginner
                            </p>
                          </div>
                        </div>
                        <div className="content-stretch flex items-center justify-between relative shrink-0 w-[244px]" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5907">
                          <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5908">{`Question Complexity:  `}</p>
                          <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex items-center justify-center px-[var(--p-2\,5,10px)] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5909">
                            <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5909;930:1723">
                              Beginner
                            </p>
                          </div>
                        </div>
                        <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5910">
                          <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[143.956px] whitespace-pre-wrap" data-node-id="I875:5855;38:8233;38:8145;939:5911">{`Response Pacing:  `}</p>
                          <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex items-center px-[10px] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5912">
                            <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5912;930:1723">
                              Beginner
                            </p>
                          </div>
                        </div>
                        <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5913">
                          <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5914">{`Interview Tone:  `}</p>
                          <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex h-[29px] items-center justify-between px-[10px] py-[4px] relative rounded-[4px] shrink-0 w-[83px]" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5915">
                            <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5915;930:1723">
                              Beginner
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="border-[var(--secondary\/95,#e5f7c9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( Audio Output Panel)" data-node-id="I875:5855;38:8234" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8234;38:8153">
                  <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="icon- Audio Output" data-node-id="I875:5855;38:8234;38:8154">
                    <div className="flex items-center justify-center relative shrink-0">
                      <div className="-scale-y-100 flex-none rotate-180">
                        <div className="relative size-[35px]" data-name="Icon" data-node-id="I875:5855;38:8234;38:8154;38:9813">
                          <img alt="" className="absolute block max-w-none size-full" src={imgIcon} />
                        </div>
                      </div>
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8234;38:8155">
                    Audio Output
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8234;38:8156">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8234;38:8156;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector10} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,0px)] items-center justify-center p-[var(--spacing\/md,16px)] relative shrink-0" data-name="panel- Audio Output controls" data-node-id="I875:5855;38:8234;38:8157">
                  <div className="content-stretch flex flex-col h-[66px] items-center justify-between px-[20px] py-[40px] relative shrink-0 w-[354px]" data-name="Audio Output Controls Container" data-node-id="I875:5855;38:8234;38:8157;38:8308">
                    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="audio output slider" data-node-id="I875:5855;38:8234;38:8157;38:8309">
                      <div className="h-[6px] relative shrink-0 w-[314px]" data-name="slide container" data-node-id="I875:5855;38:8234;38:8157;38:8310">
                        <div className="absolute bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex gap-[var(--p-0,0px)] items-center left-[5px] p-[var(--p-0,0px)] rounded-[var(--radius\/rounded-full,9999px)] top-0 w-[290px]" data-name="Slider" data-node-id="I875:5855;38:8234;38:8157;38:8311">
                          <div className="bg-[var(--secondary\/70,#a0b187)] h-[6px] rounded-[var(--radius\/rounded-full,9999px)] shrink-0 w-[201px]" data-name="Range" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7989" />
                          <div className="absolute h-[21px] left-[191px] top-[-10.5px] w-[20px]" data-name="Slider Button" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7990">
                            <div className="-translate-x-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-2 border-[var(--secondary\/50,#6c7d56)] border-solid h-[24.706px] left-1/2 rounded-[var(--rounded-full,9999px)] shadow-[var(--shadow\/md\/layer-1\/x,0px)_var(--shadow\/md\/layer-1\/y,2px)_var(--shadow\/md\/layer-1\/blur,4px)_var(--shadow\/md\/layer-1\/spread,-2px)_var(--shadow,black),var(--shadow\/md\/layer-2\/x,0px)_var(--shadow\/md\/layer-2\/y,4px)_var(--shadow\/md\/layer-2\/blur,6px)_var(--shadow\/md\/layer-2\/spread,-1px)_var(--shadow,black)] top-0 w-[24px]" data-name=".Slider Item" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7991" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-start relative shrink-0 w-[353px]" data-name="Discourse Accordion Item ( EQ & Slider container" data-node-id="I875:5855;38:8235" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8235;38:8165">
                  <div className="content-stretch flex flex-col items-start pt-[4px] relative shrink-0 size-[40px]" data-name="icon- Microphone" data-node-id="I875:5855;38:8235;38:8166">
                    <div className="relative shrink-0 size-[40px]" data-name="Icon" data-node-id="I875:5855;38:8235;38:8166;38:9821">
                      <img alt="" className="absolute block max-w-none size-full" src={imgIcon1} />
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8235;38:8167">
                    Microphone Output
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8235;38:8168">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8235;38:8168;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector11} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,24px)] items-center p-[var(--spacing\/md,16px)] relative shrink-0" data-name="panel- Eq & Slide container" data-node-id="I875:5855;38:8235;38:8169">
                  <div className="h-[24px] relative shrink-0 w-[289px]" data-name="Out.put Eq" data-node-id="I875:5855;38:8235;38:8169;38:8315">
                    <div className="absolute inset-[-7.73%_-0.8%_-7.71%_-0.64%]">
                      <img alt="" className="block max-w-none size-full" src={imgOutPutEq} />
                    </div>
                  </div>
                  <div className="content-stretch flex flex-col h-[48px] items-center justify-center relative shrink-0 w-[305px]" data-name="Slide output container" data-node-id="I875:5855;38:8235;38:8169;38:8317">
                    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="microphone output slide" data-node-id="I875:5855;38:8235;38:8169;38:8318">
                      <div className="h-[6px] relative shrink-0 w-[314px]" data-name="Mic Input Gain Control" data-node-id="I875:5855;38:8235;38:8169;38:8319">
                        <div className="absolute bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex gap-[var(--p-0,0px)] items-center left-[5px] p-[var(--p-0,0px)] rounded-[var(--radius\/rounded-full,9999px)] top-0 w-[290px]" data-name="Slider" data-node-id="I875:5855;38:8235;38:8169;38:8320">
                          <div className="bg-[var(--secondary\/70,#a0b187)] h-[6px] rounded-[var(--radius\/rounded-full,9999px)] shrink-0 w-[201px]" data-name="Range" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7989" />
                          <div className="absolute h-[21px] left-[191px] top-[-10.5px] w-[20px]" data-name="Slider Button" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7990">
                            <div className="-translate-x-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-2 border-[var(--secondary\/50,#6c7d56)] border-solid h-[24.706px] left-1/2 rounded-[var(--rounded-full,9999px)] shadow-[var(--shadow\/md\/layer-1\/x,0px)_var(--shadow\/md\/layer-1\/y,2px)_var(--shadow\/md\/layer-1\/blur,4px)_var(--shadow\/md\/layer-1\/spread,-2px)_var(--shadow,black),var(--shadow\/md\/layer-2\/x,0px)_var(--shadow\/md\/layer-2\/y,4px)_var(--shadow\/md\/layer-2\/blur,6px)_var(--shadow\/md\/layer-2\/spread,-1px)_var(--shadow,black)] top-0 w-[24px]" data-name=".Slider Item" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7991" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( A/V Record )" data-node-id="I875:5855;855:5501" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;855:5501;38:8177">
                  <div className="content-stretch flex flex-col h-[40px] items-center justify-center p-[3px] relative shrink-0" data-name="icon- Record" data-node-id="I875:5855;855:5501;38:8178">
                    <div className="relative shrink-0 size-[29.167px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;855:5501;38:8178;38:9844">
                      <div className="absolute inset-[-3.43%]">
                        <img alt="" className="block max-w-none size-full" src={imgSvgRepoIconCarrier2} />
                      </div>
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;855:5501;38:8179">
                    A/V Recording
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;855:5501;38:8180">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;855:5501;38:8180;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector12} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,0px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="panel- A/V radio selection" data-node-id="I875:5855;855:5501;38:8181">
                  <div className="content-stretch cursor-pointer flex flex-col gap-[var(--p-3,12px)] items-start max-w-[576px] min-w-[144px] p-[var(--p-0,0px)] relative shrink-0 w-[280px]" data-name="Radio Group" data-node-id="I875:5855;855:5501;38:8181;38:8324">
                    <div className="content-stretch flex gap-[var(--p-2,8px)] items-start p-[var(--p-0,0px)] relative shrink-0 w-full" data-name=".Radio Group Item" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111" role="button" tabIndex="0">
                      <div className="content-stretch flex flex-[1_0_0] flex-col gap-[var(--p-1\,5,6px)] items-start min-h-px min-w-px pb-[var(--p-0,0px)] pt-px px-[var(--p-0,0px)] relative" data-name="Content" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70573">
                        <p className="font-[family-name:var(--font\/family\/font-sans,'Poppins:Regular',sans-serif)] leading-[normal] not-italic relative shrink-0 text-[color:var(--neutral\/20,#30312c)] text-[length:var(--text-sm,14px)] text-left w-full whitespace-pre-wrap" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70574">{`Record just  audio         `}</p>
                      </div>
                      <div className="relative shadow-[var(--shadow\/xs\/layer-1\/x,0px)_var(--shadow\/xs\/layer-1\/y,1px)_var(--shadow\/xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 size-[16px]" data-name=".Radio Group Radio Toggle" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70576">
                        <div className="absolute border-3 border-[var(--secondary\/70,#a0b187)] border-solid left-0 rounded-[var(--radius\/rounded-full,9999px)] size-[var(--width\/w-4,16px)] top-0" data-name="base" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70576;2780:51100" />
                      </div>
                    </div>
                    <div className="content-stretch flex gap-[var(--p-2,8px)] items-start p-[var(--p-0,0px)] relative shrink-0 w-full" data-name=".Radio Group Item" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112" role="button" tabIndex="0">
                      <div className="content-stretch flex flex-[1_0_0] flex-col gap-[var(--p-1\,5,6px)] items-start min-h-px min-w-px pb-[var(--p-0,0px)] pt-px px-[var(--p-0,0px)] relative" data-name="Content" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70573">
                        <p className="font-[family-name:var(--font\/family\/font-sans,'Poppins:Regular',sans-serif)] leading-[normal] not-italic relative shrink-0 text-[color:var(--neutral\/20,#30312c)] text-[length:var(--text-sm,14px)] text-left w-full whitespace-pre-wrap" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70574">{`Record video &  audio  `}</p>
                      </div>
                      <div className="relative shadow-[var(--shadow\/xs\/layer-1\/x,0px)_var(--shadow\/xs\/layer-1\/y,1px)_var(--shadow\/xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 size-[16px]" data-name=".Radio Group Radio Toggle" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70576">
                        <div className="absolute bg-[var(--secondary\/50,#6c7d56)] border-[length:var(--border-width\/w-100,1px)] border-[var(--secondary\/80,#bbcda1)] border-solid left-0 rounded-[var(--radius\/rounded-full,9999px)] size-[var(--width\/w-4,16px)] top-0" data-name="base" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70576;2780:51100" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-start relative shrink-0 w-full" data-name="Discourse Accordion Item ( Show Timer )" data-node-id="I875:5855;38:8237" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8237;38:8190">
                  <div className="content-stretch flex flex-col items-center justify-center overflow-clip p-[5px] relative shrink-0 size-[40px]" data-name="icon- Timer" data-node-id="I875:5855;38:8237;38:8191">
                    <div className="relative shrink-0 size-[27px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;38:8237;38:8191;38:9818">
                      <div className="absolute inset-[-4.63%]">
                        <img alt="" className="block max-w-none size-full" src={imgSvgRepoIconCarrier3} />
                      </div>
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8237;38:8192">
                    Display timer
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8237;38:8193">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8237;38:8193;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector10} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-between px-[var(--spacing\/xl,32px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="panel- clock display" data-node-id="I875:5855;38:8237;38:8194">
                  <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8237;38:8194;38:8326">
                    <p className="leading-[normal] mb-0 whitespace-pre">{`Hide timer to create more `}</p>
                    <p className="leading-[normal] whitespace-pre">realistic interview</p>
                  </div>
                  <div className="bg-[var(--neutral\/90,#e3e3db)] content-stretch flex h-[20px] items-center p-[var(--p-0\,5,2px)] relative rounded-[var(--radius\/rounded-full,9999px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[36px]" data-name="Discourser AI Switch Toggle" data-node-id="I875:5855;38:8237;38:8194;38:8327">
                    <div className="relative shrink-0 size-[16px]" data-name="Switch" data-node-id="I875:5855;38:8237;38:8194;38:8327;38:8123">
                      <div className="absolute inset-[-6.25%_-12.5%_-18.75%_-12.5%]">
                        <img alt="" className="block max-w-none size-full" src={imgSwitch} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( Hide Interview )" data-node-id="I875:5855;38:8238" role="button" tabIndex="0">
                <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8238;38:8202">
                  <div className="content-stretch flex flex-col items-center justify-center overflow-clip p-px relative shrink-0 size-[40px]" data-name="icon-  ScreenView" data-node-id="I875:5855;38:8238;38:8203">
                    <div className="relative shrink-0 size-[24.891px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;38:8238;38:8203;38:9826">
                      <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier4} />
                    </div>
                  </div>
                  <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Inter:Medium',sans-serif)] font-[var(--font\/weight\/font-medium,500)] leading-[0] min-h-px min-w-px not-italic overflow-hidden relative text-[20px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8238;38:8204">
                    <span className="font-['Poppins:Medium',sans-serif] leading-[normal] text-[#30312c] text-[14px]">Hide</span>
                    <span className="leading-[normal]">{` `}</span>
                    <span className="font-['Poppins:Medium',sans-serif] leading-[normal] text-[14px]">Interviewers</span>
                  </p>
                  <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8238;38:8205">
                    <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8238;38:8205;2706:13883">
                      <div className="absolute inset-[-20.83%_-10.42%]">
                        <img alt="" className="block max-w-none size-full" src={imgVector11} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="content-stretch flex items-center justify-between py-[var(--spacing\/sm,8px)] relative shrink-0 w-[290.007px]" data-name="panel- hide interview video" data-node-id="I875:5855;38:8238;38:8206">
                  <div className="font-['Poppins:Regular',sans-serif] leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[244.007px] whitespace-pre-wrap" data-node-id="I875:5855;38:8238;38:8206;38:8329">
                    <p className="leading-[normal] mb-0">{`Switch to off  to  hide video of interviewers if it is too `}</p>
                    <p className="leading-[normal]">distracting</p>
                  </div>
                  <div className="bg-[var(--secondary\/80,#bbcda1)] content-stretch flex h-[20px] items-center justify-end p-[var(--p-0\,5,2px)] relative rounded-[var(--radius\/rounded-full,9999px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[36px]" data-name="Discourser AI Switch Toggle" data-node-id="I875:5855;38:8238;38:8206;38:8330">
                    <div className="relative shrink-0 size-[16px]" data-name="Switch" data-node-id="I875:5855;38:8238;38:8206;38:8330;38:8127">
                      <div className="absolute inset-[-6.25%_-12.5%_-18.75%_-12.5%]">
                        <img alt="" className="block max-w-none size-full" src={imgSwitch1} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  );
}
```

---

## Tool metadata (appended by figma-remote)

```
SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.

Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.

These styles are contained in the design: bodyMdmReg: Font(family: "Poppins", style: Regular, size: 14, weight: 400, lineHeight: 100, letterSpacing: 0), bodyMdmMed: Font(family: "Poppins", style: Medium, size: 14, weight: 500, lineHeight: 100, letterSpacing: 0), bodyLrg: Font(family: "Poppins", style: Medium, size: 18, weight: 500, lineHeight: 100, letterSpacing: 0), headlineMedium: Font(family: "Fraunces", style: Regular, size: 28, weight: 400, lineHeight: 100, letterSpacing: 0), bodyLrgReg: Font(family: "Poppins", style: Regular, size: 18, weight: 400, lineHeight: 100, letterSpacing: 0), bodyLrgSmBld: Font(family: "Poppins", style: SemiBold, size: 18, weight: 600, lineHeight: 100, letterSpacing: 0), titleMedium: Font(family: "Poppins", style: SemiBold, size: 16, weight: 600, lineHeight: 100, letterSpacing: 0), Dsktp/Inter/Button/Regular/18: Font(family: "Inter", style: Regular, size: 18, weight: 400, lineHeight: 30, letterSpacing: 0), Primary/700: #6B7A1F, Dsktp/Inter/BodyP/Medium/20: Font(family: "Inter", style: Medium, size: 20, weight: 500, lineHeight: 100, letterSpacing: 0).

Images and SVGs will be stored as constants. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
```

## Component descriptions (from Figma)

| Component | Node ID | Documentation |
|-----------|---------|---------------|
| Lucide Icons / layout-dashboard | 38:217 | https://lucide.dev/icons/ |
| Lucide Icons / book-open-text | 38:256 | https://lucide.dev/icons/ |
| Lucide Icons / message-square | 38:30 | https://lucide.dev/icons/ |
| Lucide Icons / hand-helping | 38:26 | https://lucide.dev/icons/ |
| Lucide Icons / user-round | 38:28 | https://lucide.dev/icons/ |
| Lucide Icons / stretch-vertical | 38:289 | https://lucide.dev/icons/ |
| Lucide Icons / arrow-right | 38:375 | https://lucide.dev/icons/ |
| Discourse Accordion Item (Info Panel) | 38:8134 | https://ui.shadcn.com/docs/components/accordion |
| Lucide Icons / chevron-down | 38:610 | https://lucide.dev/icons/ |
| **Badge** | **930:1972** | DDS Badge component — recipe: badge · Variants: solid \| surface \| subtle \| outline \| rating · Sizes: sm \| md \| lg \| xl \| 2xl · Color palettes: primary \| secondary \| tertiary \| neutral \| error · Docs: https://storybook.discourser-design-system.com/?path=/docs/components-badge--docs |
| Discourse Accordion Item ( Audio Output Panel) | 38:8146 | https://ui.shadcn.com/docs/components/accordion |
| Discourse Accordion Item ( EQ & Slider container | 38:8158 | https://ui.shadcn.com/docs/components/accordion |
| Discourse Accordion Item ( A/V Record ) | 38:8170 | https://ui.shadcn.com/docs/components/accordion |
| Radio Group | 38:929 | https://ui.shadcn.com/docs/components/radio-group |
| .Radio Group Item | 38:806 | https://ui.shadcn.com/docs/components/radio-group |
| .Radio Group Radio Toggle | 38:778 | https://ui.shadcn.com/docs/components/radio-group |
| Discourse Accordion Item ( Show Timer ) | 38:8182 | https://ui.shadcn.com/docs/components/accordion |
| Discourse Accordion Item ( Hide Interview ) | 38:8195 | https://ui.shadcn.com/docs/components/accordion |

## Key observations

- **Badge node 930:1972** description is live in Figma — confirms the DDS component set was created successfully and the description update propagated
- **4 Badge instances** on page (nodes 939:5906, 939:5909, 939:5912, 939:5915) still render as raw frames with `bg-[rgba(81,133,0,0.35)]` and `text-[color:var(--secondary/40,#54643f)]` — these are pre-existing page instances not yet linked to the new component set
- Asset URLs use `figma.com/api/mcp/asset/` (7-day expiry) replacing previous `localhost:3845` URLs from figma-desktop
- The MCP output was truncated at 25000 tokens; the component code above is complete up to that point