@cnc_cbz/usefultools-plugin-official 1.0.6 → 1.0.8

package/dist/docker-parser.mjs

@@ -0,0 +1,3223 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, createTextVNode, withDirectives, withKeys, withModifiers, vModelText, unref, normalizeStyle } from "vue";
+const _hoisted_1 = { class: "flex flex-col h-full gap-4" };
+const _hoisted_2 = { class: "flex items-center gap-2" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard" };
+const _hoisted_5 = { class: "flex items-center justify-between mb-3" };
+const _hoisted_6 = { class: "flex items-center gap-2" };
+const _hoisted_7 = { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" };
+const _hoisted_8 = ["rows", "placeholder", "onKeydown"];
+const _hoisted_9 = { class: "flex items-center justify-between mt-3" };
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = {
+  key: 0,
+  class: "px-4 py-2 bg-coral-red/20 border-2 border-coral-red rounded flex items-center gap-2 text-coral-red font-bold text-sm"
+};
+const _hoisted_12 = { class: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0" };
+const _hoisted_13 = { class: "flex flex-col gap-4 overflow-y-auto pr-1" };
+const _hoisted_14 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard" };
+const _hoisted_15 = { class: "flex items-center justify-between mb-2" };
+const _hoisted_16 = { class: "flex gap-2" };
+const _hoisted_17 = { class: "font-mono text-sm text-neon-green bg-bg-dark rounded-lg p-3 border-2 border-black overflow-auto max-h-48 whitespace-pre-wrap" };
+const _hoisted_18 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard" };
+const _hoisted_19 = { class: "grid grid-cols-2 gap-3" };
+const _hoisted_20 = { class: "bg-bg-dark rounded-lg p-3 border-2 border-black" };
+const _hoisted_21 = { class: "bg-bg-dark rounded-lg p-3 border-2 border-black" };
+const _hoisted_22 = { class: "bg-bg-dark rounded-lg p-3 border-2 border-black col-span-2" };
+const _hoisted_23 = { class: "flex flex-col gap-4 overflow-y-auto pr-1" };
+const _hoisted_24 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard shrink-0" };
+const _hoisted_25 = { class: "flex flex-wrap gap-1.5 mb-3" };
+const _hoisted_26 = ["onClick"];
+const _hoisted_27 = { class: "flex gap-2" };
+const _hoisted_28 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-3 shadow-hard flex-1" };
+const _hoisted_29 = { class: "flex items-center gap-2 mb-2 px-1" };
+const _hoisted_30 = { class: "ml-1 px-2 py-0.5 bg-primary/20 text-primary text-xs font-bold rounded border border-primary/40" };
+const _hoisted_31 = { class: "space-y-0.5" };
+const _hoisted_32 = { class: "flex items-center gap-2" };
+const _hoisted_33 = ["onUpdate:modelValue"];
+const _hoisted_34 = {
+  key: 1,
+  class: "flex-1"
+};
+const _hoisted_35 = ["onClick"];
+const _hoisted_36 = { class: "text-xs text-gray-500 pl-[22px] leading-relaxed" };
+const _hoisted_37 = {
+  key: 0,
+  class: "text-center text-gray-600 text-sm py-8"
+};
+const _hoisted_38 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard shrink-0" };
+const _hoisted_39 = { class: "flex items-center justify-between mb-2" };
+const _hoisted_40 = { class: "font-mono text-sm text-neon-green bg-bg-dark rounded-lg p-3 border-2 border-black overflow-auto max-h-36 whitespace-pre-wrap" };
+const _hoisted_41 = { class: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0" };
+const _hoisted_42 = { class: "flex items-center gap-2 h-8" };
+const _hoisted_43 = { class: "text-sm font-bold text-primary uppercase tracking-wider" };
+const _hoisted_44 = {
+  key: 0,
+  class: "ml-1 px-2 py-0.5 bg-neon-green/20 text-neon-green text-xs font-bold rounded border border-neon-green/40"
+};
+const _hoisted_45 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-3 shadow-hard flex-1" };
+const _hoisted_46 = { class: "space-y-0.5" };
+const _hoisted_47 = { class: "flex items-center gap-2" };
+const _hoisted_48 = ["onUpdate:modelValue"];
+const _hoisted_49 = {
+  key: 1,
+  class: "flex-1 font-mono text-sm text-gray-500"
+};
+const _hoisted_50 = {
+  key: 0,
+  class: "text-xs text-gray-500 pl-[98px] leading-relaxed"
+};
+const _hoisted_51 = {
+  key: 0,
+  class: "flex flex-col gap-3 overflow-y-auto pr-1"
+};
+const _hoisted_52 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-3 shadow-hard flex-1" };
+const _hoisted_53 = { class: "space-y-0.5" };
+const _hoisted_54 = { class: "flex items-center gap-2" };
+const _hoisted_55 = { class: "font-mono text-sm font-bold shrink-0 min-w-[90px] text-vibrant-purple" };
+const _hoisted_56 = ["onUpdate:modelValue"];
+const _hoisted_57 = {
+  key: 1,
+  class: "flex-1 font-mono text-sm text-gray-500"
+};
+const _hoisted_58 = {
+  key: 0,
+  class: "text-xs text-gray-500 pl-[98px] leading-relaxed"
+};
+const dockerSample = `docker run -d --name my-nginx -p 8080:80 -v /data/html:/usr/share/nginx/html:ro -e NGINX_HOST=example.com --restart unless-stopped --memory 512m --cpus 1.5 --network my-net nginx:alpine`;
+const composeSample = `version: "3.8"
+services:
+  web:
+    image: nginx:alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./html:/usr/share/nginx/html:ro
+    depends_on:
+      - api
+    restart: unless-stopped
+    networks:
+      - frontend
+  api:
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - DB_HOST=db
+    depends_on:
+      - db
+    networks:
+      - frontend
+      - backend
+  db:
+    image: postgres:16-alpine
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_DB=myapp
+      - POSTGRES_USER=admin
+    restart: unless-stopped
+    networks:
+      - backend
+volumes:
+  db-data:
+networks:
+  frontend:
+  backend:`;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const activeTab = ref("docker");
+    const rawInput = ref("");
+    const dockerEditMode = ref(false);
+    const composeEditMode = ref(false);
+    const copyField = ref("");
+    let argIdCounter = 0;
+    const dkSubCommand = ref("run");
+    const dkImage = ref("");
+    const dkContainerCmd = ref("");
+    const dkArgs = ref([]);
+    const dockerError = ref("");
+    const showAddArg = ref(false);
+    const newArgFlag = ref("");
+    const newArgValue = ref("");
+    const cServices = ref([]);
+    const cTopLevel = ref([]);
+    const composeError = ref("");
+    const booleanFlags = /* @__PURE__ */ new Set(["--rm", "--privileged", "--init", "-d", "-i", "-t", "-it"]);
+    const dockerFlagDesc = {
+      "-d": { desc: "后台运行容器，不占用当前终端（detached 模式）", category: "basic" },
+      "--detach": { desc: "后台运行容器，不占用当前终端（detached 模式）", category: "basic" },
+      "-it": { desc: "交互式终端，-i 保持输入流 + -t 分配伪终端，常用于进入容器 shell", category: "basic" },
+      "-i": { desc: "保持 STDIN 打开，允许向容器发送输入", category: "basic" },
+      "-t": { desc: "分配伪终端（TTY），使输出带颜色和格式", category: "basic" },
+      "--name": { desc: "指定容器名称，方便后续通过名称管理容器", category: "basic" },
+      "--rm": { desc: "容器停止后自动删除，适合临时任务", category: "basic" },
+      "--restart": { desc: "重启策略：no(不重启) | always(总是) | on-failure[:次数] | unless-stopped", category: "basic" },
+      "--privileged": { desc: "赋予容器几乎等同宿主机的权限，慎用", category: "basic" },
+      "--init": { desc: "使用 tini 作为 PID 1 进程，正确处理信号和僵尸进程", category: "basic" },
+      "-p": { desc: "端口映射，格式：宿主机端口:容器端口，如 8080:80 表示访问宿主机 8080 转发到容器 80", category: "network" },
+      "--publish": { desc: "端口映射，格式：宿主机端口:容器端口，如 8080:80 表示访问宿主机 8080 转发到容器 80", category: "network" },
+      "--network": { desc: "将容器连接到指定 Docker 网络，同网络内的容器可通过容器名互访", category: "network" },
+      "--hostname": { desc: "设置容器内部的主机名（/etc/hostname）", category: "network" },
+      "-h": { desc: "设置容器内部的主机名（/etc/hostname）", category: "network" },
+      "--dns": { desc: "自定义 DNS 服务器地址，覆盖容器默认 DNS", category: "network" },
+      "--link": { desc: "链接到另一个容器（已弃用，建议使用 --network 替代）", category: "network" },
+      "--add-host": { desc: "添加自定义 host 映射到容器 /etc/hosts，格式：域名:IP", category: "network" },
+      "-v": { desc: "挂载卷，格式：宿主机路径:容器路径[:选项]，如 /data:/app:ro 表示只读挂载", category: "volume" },
+      "--volume": { desc: "挂载卷，格式：宿主机路径:容器路径[:选项]，如 /data:/app:ro 表示只读挂载", category: "volume" },
+      "--mount": { desc: "挂载（推荐语法），type=bind|volume|tmpfs,source=源,target=目标", category: "volume" },
+      "--tmpfs": { desc: "挂载临时内存文件系统到指定路径，容器停止后数据丢失", category: "volume" },
+      "-e": { desc: "设置环境变量，格式：KEY=VALUE，容器内可通过 $KEY 访问", category: "env" },
+      "--env": { desc: "设置环境变量，格式：KEY=VALUE，容器内可通过 $KEY 访问", category: "env" },
+      "--env-file": { desc: "从文件批量读取环境变量，每行一个 KEY=VALUE", category: "env" },
+      "-w": { desc: "设置容器内的工作目录，CMD/ENTRYPOINT 将在此目录下执行", category: "env" },
+      "--workdir": { desc: "设置容器内的工作目录，CMD/ENTRYPOINT 将在此目录下执行", category: "env" },
+      "-u": { desc: "指定容器内运行进程的用户，格式：用户名或 UID[:GID]", category: "env" },
+      "--user": { desc: "指定容器内运行进程的用户，格式：用户名或 UID[:GID]", category: "env" },
+      "-m": { desc: "内存上限，如 512m、1g，超出后容器可能被 OOM Kill", category: "resource" },
+      "--memory": { desc: "内存上限，如 512m、1g，超出后容器可能被 OOM Kill", category: "resource" },
+      "--memory-swap": { desc: "内存+交换空间总上限，设为 -1 表示不限制交换空间", category: "resource" },
+      "--cpus": { desc: "CPU 核数上限，如 1.5 表示最多使用 1.5 个核心", category: "resource" },
+      "--cpu-shares": { desc: "CPU 时间片权重（相对值），默认 1024，值越大分配越多", category: "resource" },
+      "--gpus": { desc: "GPU 分配，all 表示全部，或指定数量如 2", category: "resource" },
+      "--shm-size": { desc: "共享内存 /dev/shm 大小，默认 64m，某些应用（如 Chrome）需要更大", category: "resource" },
+      "--log-driver": { desc: "日志驱动：json-file(默认) | syslog | none | fluentd 等", category: "other" },
+      "--log-opt": { desc: "日志选项，如 max-size=10m max-file=3 限制日志大小和数量", category: "other" },
+      "--label": { desc: "设置容器元数据标签，格式：key=value，用于组织和筛选", category: "other" },
+      "-l": { desc: "设置容器元数据标签，格式：key=value，用于组织和筛选", category: "other" },
+      "--cap-add": { desc: "添加 Linux capability，如 NET_ADMIN、SYS_PTRACE", category: "other" },
+      "--cap-drop": { desc: "移除 Linux capability，ALL 可移除全部后按需添加", category: "other" },
+      "--security-opt": { desc: "安全选项，如 no-new-privileges、apparmor/seccomp 配置", category: "other" },
+      "--entrypoint": { desc: "覆盖镜像默认入口点，如改为 /bin/sh 进行调试", category: "other" },
+      "--pid": { desc: "PID 命名空间，host 表示与宿主机共享进程空间", category: "other" },
+      "--ipc": { desc: "IPC 命名空间，host 或 shareable，用于进程间通信", category: "other" },
+      "--platform": { desc: "指定目标平台架构，如 linux/amd64、linux/arm64", category: "other" },
+      "--pull": { desc: "镜像拉取策略：always(总是拉取) | missing(本地没有才拉) | never(不拉取)", category: "other" }
+    };
+    const composeFieldDesc = {
+      image: "使用的 Docker 镜像及标签，如 nginx:alpine",
+      build: "构建配置，可以是 Dockerfile 路径或包含 context/dockerfile 的对象",
+      context: "构建上下文路径，Docker 会将此目录发送给守护进程",
+      dockerfile: "Dockerfile 文件路径，相对于 context",
+      ports: "端口映射，格式：宿主机端口:容器端口，如 8080:80",
+      volumes: "卷挂载，格式：宿主机路径:容器路径[:选项]，或命名卷",
+      environment: "环境变量，格式：KEY=VALUE，容器内可通过 $KEY 访问",
+      env_file: "从文件批量加载环境变量，每行一个 KEY=VALUE",
+      networks: "连接到的 Docker 网络，同网络内服务可通过服务名互访",
+      depends_on: "服务启动依赖，确保依赖服务先启动（不等待就绪）",
+      restart: "重启策略：no | always | on-failure | unless-stopped",
+      command: "覆盖镜像默认的 CMD 启动命令",
+      entrypoint: "覆盖镜像默认的 ENTRYPOINT 入口点",
+      container_name: "指定容器名称，不设则自动生成",
+      working_dir: "容器内工作目录，CMD 将在此目录下执行",
+      user: "运行进程的用户，格式：用户名或 UID[:GID]",
+      privileged: "特权模式，赋予容器几乎等同宿主机的权限",
+      deploy: "部署配置，包含副本数、资源限制、更新策略等",
+      replicas: "服务副本数量，用于水平扩展",
+      resources: "资源限制配置，包含 limits（上限）和 reservations（预留）",
+      limits: "资源上限，超出后可能被 OOM Kill 或限流",
+      reservations: "资源预留，确保服务至少获得的资源量",
+      cpus: 'CPU 核数限制，如 "2.0" 表示最多 2 个核心',
+      memory: "内存限制，如 512M、1G",
+      healthcheck: "健康检查配置，Docker 定期执行以判断容器是否健康",
+      test: '健康检查命令，如 ["CMD", "curl", "-f", "http://localhost"]',
+      interval: "健康检查间隔时间，如 30s、1m",
+      timeout: "单次检查超时时间，超时视为失败",
+      retries: "连续失败多少次后标记为 unhealthy",
+      logging: "日志配置，指定驱动和选项",
+      driver: "日志/网络驱动类型",
+      options: "驱动选项，如日志的 max-size、max-file",
+      labels: "元数据标签，格式 key=value，用于组织和筛选",
+      expose: "暴露端口，仅容器间可见，不映射到宿主机",
+      extra_hosts: "添加自定义 host 映射到 /etc/hosts，格式：域名:IP",
+      dns: "自定义 DNS 服务器地址",
+      cap_add: "添加 Linux capability，如 NET_ADMIN",
+      cap_drop: "移除 Linux capability，ALL 可移除全部",
+      security_opt: "安全选项，如 no-new-privileges",
+      tmpfs: "挂载临时内存文件系统，容器停止后数据丢失",
+      shm_size: "共享内存 /dev/shm 大小，默认 64m",
+      stdin_open: "保持 STDIN 打开，等同 docker run -i",
+      tty: "分配伪终端，等同 docker run -t",
+      platform: "目标平台架构，如 linux/amd64",
+      profiles: "配置文件标签，仅在指定 profile 时启动该服务",
+      configs: "Docker 配置对象，用于非敏感配置数据",
+      secrets: "Docker 密钥对象，用于敏感数据如密码、证书"
+    };
+    const catMeta = {
+      basic: { label: "基础", bg: "bg-electric-blue", text: "text-electric-blue" },
+      network: { label: "网络", bg: "bg-neon-green", text: "text-neon-green" },
+      volume: { label: "存储", bg: "bg-vibrant-purple", text: "text-vibrant-purple" },
+      env: { label: "环境", bg: "bg-primary", text: "text-primary" },
+      resource: { label: "资源", bg: "bg-coral-red", text: "text-coral-red" },
+      other: { label: "其他", bg: "bg-hot-pink", text: "text-hot-pink" }
+    };
+    async function copyText(text, field) {
+      await navigator.clipboard.writeText(text);
+      copyField.value = field;
+      setTimeout(() => {
+        copyField.value = "";
+      }, 1200);
+    }
+    function tokenize(input) {
+      const merged = input.replace(/\\\s*\n/g, " ").replace(/`\s*\n/g, " ").trim();
+      const tokens = [];
+      let cur = "", inS = false, inD = false;
+      for (let i = 0; i < merged.length; i++) {
+        const c = merged[i];
+        if (c === "\\" && i + 1 < merged.length && inD) {
+          cur += merged[++i];
+          continue;
+        }
+        if (c === "'" && !inD) {
+          inS = !inS;
+          continue;
+        }
+        if (c === '"' && !inS) {
+          inD = !inD;
+          continue;
+        }
+        if (/\s/.test(c) && !inS && !inD) {
+          if (cur) {
+            tokens.push(cur);
+            cur = "";
+          }
+          continue;
+        }
+        cur += c;
+      }
+      if (cur) tokens.push(cur);
+      return tokens;
+    }
+    function makeArg(flag, value) {
+      const info = dockerFlagDesc[flag];
+      return {
+        id: argIdCounter++,
+        flag,
+        value,
+        desc: (info == null ? void 0 : info.desc) ?? "",
+        category: (info == null ? void 0 : info.category) ?? "other",
+        noValue: booleanFlags.has(flag)
+      };
+    }
+    function parseAndEdit() {
+      const raw = rawInput.value.trim();
+      if (!raw) return;
+      const tokens = tokenize(raw);
+      let idx = 0;
+      if (tokens[idx] === "sudo") idx++;
+      if (tokens[idx] !== "docker") {
+        dockerError.value = `不是 Docker 命令: "${tokens[idx]}"`;
+        return;
+      }
+      idx++;
+      dkSubCommand.value = tokens[idx] ?? "run";
+      idx++;
+      const args = [];
+      let image = "", containerCmd = [], imageFound = false;
+      const shortWithVal = /* @__PURE__ */ new Set(["-p", "-v", "-e", "-w", "-u", "-m", "-h", "-l"]);
+      while (idx < tokens.length) {
+        const tok = tokens[idx];
+        if (tok.startsWith("--")) {
+          if (tok.includes("=")) {
+            const eq = tok.indexOf("=");
+            args.push(makeArg(tok.substring(0, eq), tok.substring(eq + 1)));
+          } else if (booleanFlags.has(tok)) {
+            args.push(makeArg(tok, ""));
+          } else {
+            const nv = idx + 1 < tokens.length && !tokens[idx + 1].startsWith("-") ? tokens[++idx] : "";
+            args.push(makeArg(tok, nv));
+          }
+        } else if (tok.startsWith("-") && tok.length > 1) {
+          if (tok === "-it" || tok === "-ti") {
+            args.push(makeArg("-it", ""));
+          } else if (shortWithVal.has(tok)) {
+            args.push(makeArg(tok, idx + 1 < tokens.length ? tokens[++idx] : ""));
+          } else if (tok.length > 2) {
+            for (const c of tok.substring(1)) {
+              const f = `-${c}`;
+              args.push(makeArg(f, ""));
+            }
+          } else {
+            args.push(makeArg(tok, ""));
+          }
+        } else if (!imageFound && ["run", "pull", "create"].includes(dkSubCommand.value)) {
+          image = tok;
+          imageFound = true;
+        } else if (imageFound) {
+          containerCmd.push(tok);
+        } else {
+          containerCmd.push(tok);
+        }
+        idx++;
+      }
+      dkImage.value = image;
+      dkContainerCmd.value = containerCmd.join(" ");
+      dkArgs.value = args;
+      dockerError.value = "";
+      dockerEditMode.value = true;
+    }
+    const generatedCommand = computed(() => {
+      const parts = ["docker", dkSubCommand.value];
+      for (const a of dkArgs.value) {
+        if (a.noValue) {
+          parts.push(a.flag);
+        } else if (a.value) {
+          const v = a.value.includes(" ") ? `"${a.value}"` : a.value;
+          parts.push(a.flag, v);
+        }
+      }
+      if (dkImage.value) parts.push(dkImage.value);
+      if (dkContainerCmd.value.trim()) parts.push(...dkContainerCmd.value.trim().split(/\s+/));
+      return parts.join(" ");
+    });
+    const generatedMultiline = computed(() => {
+      const lines = [`docker ${dkSubCommand.value}`];
+      for (const a of dkArgs.value) {
+        if (a.noValue) lines.push(`  ${a.flag}`);
+        else if (a.value) {
+          const v = a.value.includes(" ") ? `"${a.value}"` : a.value;
+          lines.push(`  ${a.flag} ${v}`);
+        }
+      }
+      if (dkImage.value) lines.push(`  ${dkImage.value}`);
+      if (dkContainerCmd.value.trim()) lines.push(`  ${dkContainerCmd.value.trim()}`);
+      return lines.join(" \\\n");
+    });
+    function removeArg(id) {
+      dkArgs.value = dkArgs.value.filter((a) => a.id !== id);
+    }
+    function addArg() {
+      const flag = newArgFlag.value.trim();
+      if (!flag) return;
+      dkArgs.value.push(makeArg(flag.startsWith("-") ? flag : `--${flag}`, newArgValue.value.trim()));
+      newArgFlag.value = "";
+      newArgValue.value = "";
+      showAddArg.value = false;
+    }
+    function resetDocker() {
+      dockerEditMode.value = false;
+      rawInput.value = "";
+      dkArgs.value = [];
+      dkImage.value = "";
+      dkContainerCmd.value = "";
+      dockerError.value = "";
+    }
+    function parseCompose() {
+      const raw = rawInput.value.trim();
+      if (!raw) return;
+      const lines = raw.split("\n");
+      const services = [];
+      const topLevel = [];
+      let inSvc = false, curSvc = "", baseIndent = 0, curTopKey = "";
+      for (const line of lines) {
+        if (!line.trim() || line.trim().startsWith("#")) continue;
+        const indent = line.search(/\S/);
+        const t = line.trim();
+        if (indent === 0) {
+          const m = t.match(/^(\w[\w-]*):\s*(.*)$/);
+          if (m) {
+            const [, key, val] = m;
+            if (key === "services") {
+              inSvc = true;
+              curSvc = "";
+              curTopKey = "";
+              continue;
+            }
+            inSvc = false;
+            curTopKey = key;
+            topLevel.push({ key, value: val.replace(/['"]/g, ""), desc: composeFieldDesc[key] ?? "", depth: 0, editable: true });
+            continue;
+          }
+        }
+        if (inSvc) {
+          if (indent === 2 && t.match(/^(\w[\w-]*):\s*$/)) {
+            curSvc = t.replace(":", "").trim();
+            services.push({ name: curSvc, image: "", fields: [] });
+            baseIndent = 2;
+            continue;
+          }
+          const svc = services.find((s) => s.name === curSvc);
+          if (svc && indent > baseIndent) {
+            if (t.startsWith("- ")) {
+              const val = t.substring(2);
+              const depth = Math.floor((indent - baseIndent - 2) / 2);
+              svc.fields.push({ key: "•", value: val, desc: "", depth: depth + 1, editable: true });
+            } else {
+              const kv = t.match(/^(\w[\w-]*):\s*(.*)$/);
+              if (kv) {
+                const [, key, val] = kv;
+                const depth = Math.floor((indent - baseIndent - 2) / 2);
+                const cleanVal = val.replace(/['"]/g, "");
+                if (key === "image") svc.image = cleanVal;
+                svc.fields.push({ key, value: cleanVal, desc: composeFieldDesc[key] ?? "", depth, editable: !!cleanVal });
+              }
+            }
+          }
+        } else if (curTopKey && indent > 0) {
+          if (t.startsWith("- ")) {
+            topLevel.push({ key: "•", value: t.substring(2), desc: "", depth: 1, editable: true });
+          } else {
+            const kv = t.match(/^(\w[\w-]*):\s*(.*)$/);
+            if (kv) {
+              const [, key, val] = kv;
+              topLevel.push({ key, value: val.replace(/['"]/g, ""), desc: composeFieldDesc[key] ?? "", depth: Math.floor(indent / 2), editable: !!val });
+            }
+          }
+        }
+      }
+      if (!services.length && !topLevel.length) {
+        composeError.value = "无法解析，请确认是有效的 docker-compose.yml";
+        return;
+      }
+      cServices.value = services;
+      cTopLevel.value = topLevel;
+      composeError.value = "";
+      composeEditMode.value = true;
+    }
+    const generatedYaml = computed(() => {
+      const lines = [];
+      for (const f of cTopLevel.value) {
+        if (f.depth === 0 && f.key !== "•") lines.push(`${f.key}: ${f.value}`);
+      }
+      if (cServices.value.length) {
+        lines.push("services:");
+        for (const svc of cServices.value) {
+          lines.push(`  ${svc.name}:`);
+          for (const f of svc.fields) {
+            const pad = "  ".repeat(f.depth + 2);
+            if (f.key === "•") {
+              lines.push(`${pad}- ${f.value}`);
+            } else if (f.value) {
+              lines.push(`${pad}${f.key}: ${f.value}`);
+            } else {
+              lines.push(`${pad}${f.key}:`);
+            }
+          }
+        }
+      }
+      for (const f of cTopLevel.value) {
+        if (f.depth === 0 && f.key !== "•" && !["version"].includes(f.key)) ;
+        if (f.depth > 0) {
+          const pad = "  ".repeat(f.depth);
+          if (f.key === "•") lines.push(`${pad}- ${f.value}`);
+          else if (f.value) lines.push(`${pad}${f.key}: ${f.value}`);
+          else lines.push(`${pad}${f.key}:`);
+        }
+      }
+      return lines.join("\n");
+    });
+    function resetCompose() {
+      composeEditMode.value = false;
+      rawInput.value = "";
+      cServices.value = [];
+      cTopLevel.value = [];
+      composeError.value = "";
+    }
+    function handleParse() {
+      if (activeTab.value === "docker") parseAndEdit();
+      else parseCompose();
+    }
+    function handleReset() {
+      if (activeTab.value === "docker") resetDocker();
+      else resetCompose();
+    }
+    function switchTab(tab) {
+      if (tab === activeTab.value) return;
+      handleReset();
+      activeTab.value = tab;
+    }
+    const isEditMode = computed(() => activeTab.value === "docker" ? dockerEditMode.value : composeEditMode.value);
+    const quickFlags = [
+      { flag: "-p", placeholder: "8080:80" },
+      { flag: "-v", placeholder: "/host:/container" },
+      { flag: "-e", placeholder: "KEY=VALUE" },
+      { flag: "--name", placeholder: "my-container" },
+      { flag: "--network", placeholder: "my-net" },
+      { flag: "--restart", placeholder: "unless-stopped" },
+      { flag: "-d", placeholder: "" },
+      { flag: "--rm", placeholder: "" }
+    ];
+    function loadSample() {
+      rawInput.value = activeTab.value === "docker" ? dockerSample : composeSample;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" Tab 切换 "),
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(), createElementBlock(
+            Fragment,
+            null,
+            renderList(["docker", "compose"], (tab) => {
+              return createElementVNode("button", {
+                key: tab,
+                onClick: ($event) => switchTab(tab),
+                class: normalizeClass(["h-9 px-4 font-bold border-2 border-black rounded-lg text-sm transition-all", activeTab.value === tab ? "bg-primary text-black shadow-hard-sm" : "bg-deep-charcoal text-gray-400 hover:text-gray-200"])
+              }, toDisplayString(tab === "docker" ? "Docker 命令" : "Docker Compose"), 11, _hoisted_3);
+            }),
+            64
+            /* STABLE_FRAGMENT */
+          )),
+          _cache[10] || (_cache[10] = createElementVNode(
+            "div",
+            { class: "flex-1" },
+            null,
+            -1
+            /* CACHED */
+          )),
+          isEditMode.value ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            onClick: handleReset,
+            class: "h-8 px-3 bg-deep-charcoal text-gray-400 font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-xs"
+          }, [..._cache[9] || (_cache[9] = [
+            createElementVNode(
+              "span",
+              { class: "material-icons text-sm align-middle mr-1" },
+              "refresh",
+              -1
+              /* CACHED */
+            ),
+            createTextVNode(
+              "重新输入 ",
+              -1
+              /* CACHED */
+            )
+          ])])) : createCommentVNode("v-if", true)
+        ]),
+        createCommentVNode(" ═══ 输入模式 ═══ "),
+        !isEditMode.value ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 0 },
+          [
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_6, [
+                  _cache[11] || (_cache[11] = createElementVNode(
+                    "span",
+                    { class: "material-icons text-primary text-lg" },
+                    "terminal",
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode(
+                    "span",
+                    _hoisted_7,
+                    toDisplayString(activeTab.value === "docker" ? "Docker 命令" : "Docker Compose YAML"),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                createElementVNode("button", {
+                  onClick: loadSample,
+                  class: "h-8 px-3 bg-primary text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-xs"
+                }, " 加载示例 ")
+              ]),
+              withDirectives(createElementVNode("textarea", {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rawInput.value = $event),
+                rows: activeTab.value === "docker" ? 4 : 12,
+                placeholder: activeTab.value === "docker" ? "粘贴 Docker 命令，如：docker run -d -p 8080:80 nginx" : "粘贴 docker-compose.yml 内容",
+                class: "w-full bg-bg-dark text-gray-100 border-4 border-black rounded-lg px-4 py-3 font-mono text-sm shadow-hard focus:border-primary focus:shadow-none focus:translate-x-[4px] focus:translate-y-[4px] transition-all outline-none placeholder-gray-600 resize-none",
+                onKeydown: withKeys(withModifiers(handleParse, ["ctrl"]), ["enter"])
+              }, null, 40, _hoisted_8), [
+                [vModelText, rawInput.value]
+              ]),
+              createElementVNode("div", _hoisted_9, [
+                _cache[13] || (_cache[13] = createElementVNode(
+                  "span",
+                  { class: "text-xs text-gray-600" },
+                  "Ctrl+Enter 解析",
+                  -1
+                  /* CACHED */
+                )),
+                createElementVNode("button", {
+                  onClick: handleParse,
+                  disabled: !rawInput.value.trim(),
+                  class: "h-9 px-5 bg-primary text-black font-bold border-2 border-black rounded-lg shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-sm disabled:opacity-40 disabled:cursor-not-allowed"
+                }, [..._cache[12] || (_cache[12] = [
+                  createElementVNode(
+                    "span",
+                    { class: "material-icons text-sm align-middle mr-1" },
+                    "play_arrow",
+                    -1
+                    /* CACHED */
+                  ),
+                  createTextVNode(
+                    "解析 ",
+                    -1
+                    /* CACHED */
+                  )
+                ])], 8, _hoisted_10)
+              ])
+            ]),
+            createCommentVNode(" 错误 "),
+            dockerError.value || composeError.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
+              _cache[14] || (_cache[14] = createElementVNode(
+                "span",
+                { class: "material-icons text-lg" },
+                "error_outline",
+                -1
+                /* CACHED */
+              )),
+              createTextVNode(
+                " " + toDisplayString(dockerError.value || composeError.value),
+                1
+                /* TEXT */
+              )
+            ])) : createCommentVNode("v-if", true)
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : createCommentVNode("v-if", true),
+        createCommentVNode(" ═══ Docker 编辑模式 ═══ "),
+        activeTab.value === "docker" && dockerEditMode.value ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 1 },
+          [
+            createCommentVNode(" 左右分栏 "),
+            createElementVNode("div", _hoisted_12, [
+              createCommentVNode(" 左列：生成命令 + 基本信息 "),
+              createElementVNode("div", _hoisted_13, [
+                createCommentVNode(" 生成命令 "),
+                createElementVNode("div", _hoisted_14, [
+                  createElementVNode("div", _hoisted_15, [
+                    _cache[15] || (_cache[15] = createElementVNode(
+                      "div",
+                      { class: "flex items-center gap-2" },
+                      [
+                        createElementVNode("span", { class: "material-icons text-neon-green text-lg" }, "code"),
+                        createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "生成命令")
+                      ],
+                      -1
+                      /* CACHED */
+                    )),
+                    createElementVNode("div", _hoisted_16, [
+                      createElementVNode(
+                        "button",
+                        {
+                          onClick: _cache[1] || (_cache[1] = ($event) => copyText(generatedCommand.value, "cmd-single")),
+                          class: normalizeClass(["h-7 px-2.5 text-xs font-bold border-2 border-black rounded transition-all", copyField.value === "cmd-single" ? "bg-neon-green text-black" : "bg-bg-dark text-gray-400 hover:text-gray-200"])
+                        },
+                        toDisplayString(copyField.value === "cmd-single" ? "已复制" : "单行复制"),
+                        3
+                        /* TEXT, CLASS */
+                      ),
+                      createElementVNode(
+                        "button",
+                        {
+                          onClick: _cache[2] || (_cache[2] = ($event) => copyText(generatedMultiline.value, "cmd-multi")),
+                          class: normalizeClass(["h-7 px-2.5 text-xs font-bold border-2 border-black rounded transition-all", copyField.value === "cmd-multi" ? "bg-neon-green text-black" : "bg-bg-dark text-gray-400 hover:text-gray-200"])
+                        },
+                        toDisplayString(copyField.value === "cmd-multi" ? "已复制" : "多行复制"),
+                        3
+                        /* TEXT, CLASS */
+                      )
+                    ])
+                  ]),
+                  createElementVNode(
+                    "pre",
+                    _hoisted_17,
+                    toDisplayString(generatedMultiline.value),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                createCommentVNode(" 基本信息 "),
+                createElementVNode("div", _hoisted_18, [
+                  _cache[19] || (_cache[19] = createElementVNode(
+                    "div",
+                    { class: "flex items-center gap-2 mb-3" },
+                    [
+                      createElementVNode("span", { class: "material-icons text-electric-blue text-lg" }, "info"),
+                      createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "基本信息")
+                    ],
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("div", _hoisted_19, [
+                    createElementVNode("div", _hoisted_20, [
+                      _cache[16] || (_cache[16] = createElementVNode(
+                        "div",
+                        { class: "text-xs text-gray-500 mb-1" },
+                        "子命令",
+                        -1
+                        /* CACHED */
+                      )),
+                      withDirectives(createElementVNode(
+                        "input",
+                        {
+                          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dkSubCommand.value = $event),
+                          class: "w-full bg-transparent text-electric-blue font-mono text-sm font-bold outline-none border-b border-transparent focus:border-electric-blue transition-colors"
+                        },
+                        null,
+                        512
+                        /* NEED_PATCH */
+                      ), [
+                        [vModelText, dkSubCommand.value]
+                      ])
+                    ]),
+                    createElementVNode("div", _hoisted_21, [
+                      _cache[17] || (_cache[17] = createElementVNode(
+                        "div",
+                        { class: "text-xs text-gray-500 mb-1" },
+                        "镜像",
+                        -1
+                        /* CACHED */
+                      )),
+                      withDirectives(createElementVNode(
+                        "input",
+                        {
+                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dkImage.value = $event),
+                          class: "w-full bg-transparent text-neon-green font-mono text-sm font-bold outline-none border-b border-transparent focus:border-neon-green transition-colors",
+                          placeholder: "nginx:alpine"
+                        },
+                        null,
+                        512
+                        /* NEED_PATCH */
+                      ), [
+                        [vModelText, dkImage.value]
+                      ])
+                    ]),
+                    createElementVNode("div", _hoisted_22, [
+                      _cache[18] || (_cache[18] = createElementVNode(
+                        "div",
+                        { class: "text-xs text-gray-500 mb-1" },
+                        "容器命令",
+                        -1
+                        /* CACHED */
+                      )),
+                      withDirectives(createElementVNode(
+                        "input",
+                        {
+                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => dkContainerCmd.value = $event),
+                          class: "w-full bg-transparent text-primary font-mono text-sm font-bold outline-none border-b border-transparent focus:border-primary transition-colors",
+                          placeholder: "可选，如 /bin/sh -c ..."
+                        },
+                        null,
+                        512
+                        /* NEED_PATCH */
+                      ), [
+                        [vModelText, dkContainerCmd.value]
+                      ])
+                    ])
+                  ])
+                ])
+              ]),
+              createCommentVNode(" 右列：添加参数 + 参数列表 "),
+              createElementVNode("div", _hoisted_23, [
+                createCommentVNode(" 添加参数 "),
+                createElementVNode("div", _hoisted_24, [
+                  _cache[20] || (_cache[20] = createElementVNode(
+                    "div",
+                    { class: "flex items-center gap-2 mb-3" },
+                    [
+                      createElementVNode("span", { class: "material-icons text-primary text-lg" }, "add_circle"),
+                      createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "添加参数")
+                    ],
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("div", _hoisted_25, [
+                    (openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(quickFlags, (qf) => {
+                        return createElementVNode("button", {
+                          key: qf.flag,
+                          onClick: ($event) => {
+                            newArgFlag.value = qf.flag;
+                            newArgValue.value = qf.placeholder;
+                            if (unref(booleanFlags).has(qf.flag)) addArg();
+                          },
+                          class: "h-7 px-2 text-xs font-mono font-bold border border-gray-600 rounded hover:border-primary hover:text-primary transition-colors text-gray-400"
+                        }, toDisplayString(qf.flag), 9, _hoisted_26);
+                      }),
+                      64
+                      /* STABLE_FRAGMENT */
+                    ))
+                  ]),
+                  createElementVNode("div", _hoisted_27, [
+                    withDirectives(createElementVNode(
+                      "input",
+                      {
+                        "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => newArgFlag.value = $event),
+                        placeholder: "--name",
+                        class: "w-24 shrink-0 bg-bg-dark text-gray-100 border-2 border-black rounded px-2 py-1.5 font-mono text-sm outline-none focus:border-primary"
+                      },
+                      null,
+                      512
+                      /* NEED_PATCH */
+                    ), [
+                      [vModelText, newArgFlag.value]
+                    ]),
+                    withDirectives(createElementVNode(
+                      "input",
+                      {
+                        "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => newArgValue.value = $event),
+                        placeholder: "值",
+                        class: "flex-1 bg-bg-dark text-gray-100 border-2 border-black rounded px-2 py-1.5 font-mono text-sm outline-none focus:border-primary",
+                        onKeydown: withKeys(addArg, ["enter"])
+                      },
+                      null,
+                      544
+                      /* NEED_HYDRATION, NEED_PATCH */
+                    ), [
+                      [vModelText, newArgValue.value]
+                    ]),
+                    createElementVNode("button", {
+                      onClick: addArg,
+                      class: "h-9 px-3 bg-neon-green text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-xs shrink-0"
+                    }, " 添加 ")
+                  ])
+                ]),
+                createCommentVNode(" 参数列表 "),
+                createElementVNode("div", _hoisted_28, [
+                  createElementVNode("div", _hoisted_29, [
+                    _cache[21] || (_cache[21] = createElementVNode(
+                      "span",
+                      { class: "material-icons text-vibrant-purple text-lg" },
+                      "tune",
+                      -1
+                      /* CACHED */
+                    )),
+                    _cache[22] || (_cache[22] = createElementVNode(
+                      "span",
+                      { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" },
+                      "参数列表",
+                      -1
+                      /* CACHED */
+                    )),
+                    createElementVNode(
+                      "span",
+                      _hoisted_30,
+                      toDisplayString(dkArgs.value.length),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  createElementVNode("div", _hoisted_31, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(dkArgs.value, (arg) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: arg.id,
+                          class: "flex flex-col gap-0.5 py-2 px-2 rounded-lg hover:bg-white/5 group transition-colors"
+                        }, [
+                          createElementVNode("div", _hoisted_32, [
+                            createElementVNode(
+                              "span",
+                              {
+                                class: normalizeClass(["w-1.5 h-5 rounded-full shrink-0", catMeta[arg.category].bg])
+                              },
+                              null,
+                              2
+                              /* CLASS */
+                            ),
+                            createElementVNode(
+                              "span",
+                              {
+                                class: normalizeClass(["font-mono text-sm font-bold shrink-0 min-w-[90px]", catMeta[arg.category].text])
+                              },
+                              toDisplayString(arg.flag),
+                              3
+                              /* TEXT, CLASS */
+                            ),
+                            !arg.noValue ? withDirectives((openBlock(), createElementBlock("input", {
+                              key: 0,
+                              "onUpdate:modelValue": ($event) => arg.value = $event,
+                              class: "flex-1 bg-transparent text-gray-200 font-mono text-sm outline-none border-b border-transparent focus:border-gray-500 transition-colors min-w-0",
+                              placeholder: "输入值"
+                            }, null, 8, _hoisted_33)), [
+                              [vModelText, arg.value]
+                            ]) : (openBlock(), createElementBlock("span", _hoisted_34)),
+                            createElementVNode("button", {
+                              onClick: ($event) => removeArg(arg.id),
+                              class: "opacity-0 group-hover:opacity-100 transition-opacity text-gray-500 hover:text-coral-red shrink-0"
+                            }, [..._cache[23] || (_cache[23] = [
+                              createElementVNode(
+                                "span",
+                                { class: "material-icons text-sm" },
+                                "close",
+                                -1
+                                /* CACHED */
+                              )
+                            ])], 8, _hoisted_35)
+                          ]),
+                          createElementVNode(
+                            "div",
+                            _hoisted_36,
+                            toDisplayString(arg.desc),
+                            1
+                            /* TEXT */
+                          )
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    )),
+                    !dkArgs.value.length ? (openBlock(), createElementBlock("div", _hoisted_37, "暂无参数")) : createCommentVNode("v-if", true)
+                  ])
+                ])
+              ])
+            ])
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : createCommentVNode("v-if", true),
+        createCommentVNode(" ═══ Compose 编辑模式 ═══ "),
+        activeTab.value === "compose" && composeEditMode.value ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 2 },
+          [
+            createCommentVNode(" YAML 预览（顶部固定） "),
+            createElementVNode("div", _hoisted_38, [
+              createElementVNode("div", _hoisted_39, [
+                _cache[24] || (_cache[24] = createElementVNode(
+                  "div",
+                  { class: "flex items-center gap-2" },
+                  [
+                    createElementVNode("span", { class: "material-icons text-neon-green text-lg" }, "code"),
+                    createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "生成 YAML")
+                  ],
+                  -1
+                  /* CACHED */
+                )),
+                createElementVNode(
+                  "button",
+                  {
+                    onClick: _cache[8] || (_cache[8] = ($event) => copyText(generatedYaml.value, "yaml")),
+                    class: normalizeClass(["h-7 px-2.5 text-xs font-bold border-2 border-black rounded transition-all", copyField.value === "yaml" ? "bg-neon-green text-black" : "bg-bg-dark text-gray-400 hover:text-gray-200"])
+                  },
+                  toDisplayString(copyField.value === "yaml" ? "已复制" : "复制 YAML"),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ]),
+              createElementVNode(
+                "pre",
+                _hoisted_40,
+                toDisplayString(generatedYaml.value),
+                1
+                /* TEXT */
+              )
+            ]),
+            createCommentVNode(" 左右分栏：服务列表 "),
+            createElementVNode("div", _hoisted_41, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(cServices.value, (svc, si) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: svc.name,
+                    class: "flex flex-col gap-3 overflow-y-auto pr-1"
+                  }, [
+                    createElementVNode("div", _hoisted_42, [
+                      _cache[25] || (_cache[25] = createElementVNode(
+                        "span",
+                        { class: "material-icons text-electric-blue text-lg" },
+                        "dns",
+                        -1
+                        /* CACHED */
+                      )),
+                      createElementVNode(
+                        "span",
+                        _hoisted_43,
+                        toDisplayString(svc.name),
+                        1
+                        /* TEXT */
+                      ),
+                      svc.image ? (openBlock(), createElementBlock(
+                        "span",
+                        _hoisted_44,
+                        toDisplayString(svc.image),
+                        1
+                        /* TEXT */
+                      )) : createCommentVNode("v-if", true)
+                    ]),
+                    createElementVNode("div", _hoisted_45, [
+                      createElementVNode("div", _hoisted_46, [
+                        (openBlock(true), createElementBlock(
+                          Fragment,
+                          null,
+                          renderList(svc.fields, (field, fi) => {
+                            return openBlock(), createElementBlock(
+                              "div",
+                              {
+                                key: fi,
+                                class: "flex flex-col gap-0.5 py-1.5 rounded-lg hover:bg-white/5 transition-colors",
+                                style: normalizeStyle({ paddingLeft: field.depth * 12 + 8 + "px", paddingRight: "8px" })
+                              },
+                              [
+                                createElementVNode("div", _hoisted_47, [
+                                  createElementVNode(
+                                    "span",
+                                    {
+                                      class: normalizeClass(["font-mono text-sm font-bold shrink-0 min-w-[90px]", field.depth === 0 ? "text-electric-blue" : "text-gray-400"])
+                                    },
+                                    toDisplayString(field.key),
+                                    3
+                                    /* TEXT, CLASS */
+                                  ),
+                                  field.editable ? withDirectives((openBlock(), createElementBlock("input", {
+                                    key: 0,
+                                    "onUpdate:modelValue": ($event) => field.value = $event,
+                                    class: "flex-1 bg-transparent text-gray-200 font-mono text-sm outline-none border-b border-transparent focus:border-gray-500 transition-colors min-w-0"
+                                  }, null, 8, _hoisted_48)), [
+                                    [vModelText, field.value]
+                                  ]) : (openBlock(), createElementBlock(
+                                    "span",
+                                    _hoisted_49,
+                                    toDisplayString(field.value || ""),
+                                    1
+                                    /* TEXT */
+                                  ))
+                                ]),
+                                field.desc ? (openBlock(), createElementBlock(
+                                  "div",
+                                  _hoisted_50,
+                                  toDisplayString(field.desc),
+                                  1
+                                  /* TEXT */
+                                )) : createCommentVNode("v-if", true)
+                              ],
+                              4
+                              /* STYLE */
+                            );
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ])
+                    ])
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              createCommentVNode(" 顶层配置 "),
+              cTopLevel.value.length ? (openBlock(), createElementBlock("div", _hoisted_51, [
+                _cache[26] || (_cache[26] = createElementVNode(
+                  "div",
+                  { class: "flex items-center gap-2 h-8" },
+                  [
+                    createElementVNode("span", { class: "material-icons text-vibrant-purple text-lg" }, "settings"),
+                    createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "顶层配置")
+                  ],
+                  -1
+                  /* CACHED */
+                )),
+                createElementVNode("div", _hoisted_52, [
+                  createElementVNode("div", _hoisted_53, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(cTopLevel.value, (item, i) => {
+                        return openBlock(), createElementBlock(
+                          "div",
+                          {
+                            key: i,
+                            class: "flex flex-col gap-0.5 py-1.5 rounded-lg hover:bg-white/5",
+                            style: normalizeStyle({ paddingLeft: item.depth * 12 + 8 + "px", paddingRight: "8px" })
+                          },
+                          [
+                            createElementVNode("div", _hoisted_54, [
+                              createElementVNode(
+                                "span",
+                                _hoisted_55,
+                                toDisplayString(item.key),
+                                1
+                                /* TEXT */
+                              ),
+                              item.editable ? withDirectives((openBlock(), createElementBlock("input", {
+                                key: 0,
+                                "onUpdate:modelValue": ($event) => item.value = $event,
+                                class: "flex-1 bg-transparent text-gray-200 font-mono text-sm outline-none border-b border-transparent focus:border-gray-500 transition-colors min-w-0"
+                              }, null, 8, _hoisted_56)), [
+                                [vModelText, item.value]
+                              ]) : (openBlock(), createElementBlock(
+                                "span",
+                                _hoisted_57,
+                                toDisplayString(item.value || ""),
+                                1
+                                /* TEXT */
+                              ))
+                            ]),
+                            item.desc ? (openBlock(), createElementBlock(
+                              "div",
+                              _hoisted_58,
+                              toDisplayString(item.desc),
+                              1
+                              /* TEXT */
+                            )) : createCommentVNode("v-if", true)
+                          ],
+                          4
+                          /* STYLE */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ])
+                ])
+              ])) : createCommentVNode("v-if", true)
+            ])
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+
+;(function(){var c=typeof __exports__!=="undefined"&&__exports__;var d=c&&(c.default||c);if(d)d.__pluginCss=`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}
+
+@layer theme {
+  :root, :host {
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+    --color-gray-100: oklch(96.7% .003 264.542);
+    --color-gray-200: oklch(92.8% .006 264.531);
+    --color-gray-300: oklch(87.2% .01 258.338);
+    --color-gray-400: oklch(70.7% .022 261.325);
+    --color-gray-500: oklch(55.1% .027 264.364);
+    --color-gray-600: oklch(44.6% .03 256.802);
+    --color-gray-700: oklch(37.3% .034 259.733);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --container-lg: 32rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-bold: 700;
+    --font-weight-black: 900;
+    --tracking-wider: .05em;
+    --tracking-widest: .1em;
+    --leading-relaxed: 1.625;
+    --radius-sm: .25rem;
+    --radius-lg: .5rem;
+    --radius-xl: .75rem;
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --color-primary: #f9b11f;
+    --color-bg-dark: #231c0f;
+    --color-electric-blue: #3b82f6;
+    --color-neon-green: #84cc16;
+    --color-vibrant-purple: #a855f7;
+    --color-deep-charcoal: #1f1a14;
+    --color-coral-red: #ff6b6b;
+    --color-hot-pink: #ec4899;
+    --font-display: "Space Grotesk", sans-serif;
+  }
+}
+
+@layer base, components;
+
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
+  .start {
+    inset-inline-start: var(--spacing);
+  }
+
+  .end {
+    inset-inline-end: var(--spacing);
+  }
+
+  .top-1\\/2 {
+    top: 50%;
+  }
+
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+
+  .z-50 {
+    z-index: 50;
+  }
+
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
+  .mx-0\\.5 {
+    margin-inline: calc(var(--spacing) * .5);
+  }
+
+  .mt-0\\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
+  .mb-1\\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+
+  .ml-0\\.5 {
+    margin-left: calc(var(--spacing) * .5);
+  }
+
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
+  .ml-1\\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
+  }
+
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
+  .ml-auto {
+    margin-left: auto;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  .h-3\\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
+  .h-85 {
+    height: calc(var(--spacing) * 85);
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .max-h-36 {
+    max-height: calc(var(--spacing) * 36);
+  }
+
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
+
+  .max-h-48 {
+    max-height: calc(var(--spacing) * 48);
+  }
+
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
+
+  .max-h-\\[200px\\] {
+    max-height: 200px;
+  }
+
+  .max-h-full {
+    max-height: 100%;
+  }
+
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+
+  .min-h-\\[80px\\] {
+    min-height: 80px;
+  }
+
+  .min-h-\\[180px\\] {
+    min-height: 180px;
+  }
+
+  .min-h-\\[200px\\] {
+    min-height: 200px;
+  }
+
+  .w-1\\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  .w-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
+
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .max-w-70 {
+    max-width: calc(var(--spacing) * 70);
+  }
+
+  .max-w-full {
+    max-width: 100%;
+  }
+
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
+  .min-w-\\[90px\\] {
+    min-width: 90px;
+  }
+
+  .min-w-\\[200px\\] {
+    min-width: 200px;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .border-collapse {
+    border-collapse: collapse;
+  }
+
+  .translate-x-0\\.5 {
+    --tw-translate-x: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1\\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-0\\.5 {
+    --tw-translate-y: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .transform {
+    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
+  }
+
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+
+  .cursor-grab {
+    cursor: grab;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .resize {
+    resize: both;
+  }
+
+  .resize-none {
+    resize: none;
+  }
+
+  .appearance-none {
+    appearance: none;
+  }
+
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-\\[1fr_60px_1fr\\] {
+    grid-template-columns: 1fr 60px 1fr;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+
+  :where(.space-y-0\\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-1\\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
+
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .rounded {
+    border-radius: .25rem;
+  }
+
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .border-black {
+    border-color: var(--color-black);
+  }
+
+  .border-coral-red {
+    border-color: var(--color-coral-red);
+  }
+
+  .border-coral-red\\/40 {
+    border-color: #ff6b6b66;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-coral-red\\/40 {
+      border-color: color-mix(in oklab, var(--color-coral-red) 40%, transparent);
+    }
+  }
+
+  .border-electric-blue\\/40 {
+    border-color: #3b82f666;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-electric-blue\\/40 {
+      border-color: color-mix(in oklab, var(--color-electric-blue) 40%, transparent);
+    }
+  }
+
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
+
+  .border-gray-700 {
+    border-color: var(--color-gray-700);
+  }
+
+  .border-neon-green {
+    border-color: var(--color-neon-green);
+  }
+
+  .border-neon-green\\/40 {
+    border-color: #84cc1666;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-neon-green\\/40 {
+      border-color: color-mix(in oklab, var(--color-neon-green) 40%, transparent);
+    }
+  }
+
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+
+  .border-primary\\/40 {
+    border-color: #f9b11f66;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\\/40 {
+      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
+
+  .border-transparent {
+    border-color: #0000;
+  }
+
+  .border-white\\/5 {
+    border-color: #ffffff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\\/5 {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .border-white\\/10 {
+    border-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\\/10 {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .border-white\\/20 {
+    border-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\\/20 {
+      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
+  .bg-bg-dark {
+    background-color: var(--color-bg-dark);
+  }
+
+  .bg-black\\/60 {
+    background-color: #0009;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\\/60 {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+
+  .bg-coral-red {
+    background-color: var(--color-coral-red);
+  }
+
+  .bg-coral-red\\/10 {
+    background-color: #ff6b6b1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-coral-red\\/10 {
+      background-color: color-mix(in oklab, var(--color-coral-red) 10%, transparent);
+    }
+  }
+
+  .bg-coral-red\\/12 {
+    background-color: #ff6b6b1f;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-coral-red\\/12 {
+      background-color: color-mix(in oklab, var(--color-coral-red) 12%, transparent);
+    }
+  }
+
+  .bg-coral-red\\/15 {
+    background-color: #ff6b6b26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-coral-red\\/15 {
+      background-color: color-mix(in oklab, var(--color-coral-red) 15%, transparent);
+    }
+  }
+
+  .bg-coral-red\\/20 {
+    background-color: #ff6b6b33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-coral-red\\/20 {
+      background-color: color-mix(in oklab, var(--color-coral-red) 20%, transparent);
+    }
+  }
+
+  .bg-deep-charcoal {
+    background-color: var(--color-deep-charcoal);
+  }
+
+  .bg-electric-blue {
+    background-color: var(--color-electric-blue);
+  }
+
+  .bg-electric-blue\\/20 {
+    background-color: #3b82f633;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-electric-blue\\/20 {
+      background-color: color-mix(in oklab, var(--color-electric-blue) 20%, transparent);
+    }
+  }
+
+  .bg-hot-pink {
+    background-color: var(--color-hot-pink);
+  }
+
+  .bg-neon-green {
+    background-color: var(--color-neon-green);
+  }
+
+  .bg-neon-green\\/10 {
+    background-color: #84cc161a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neon-green\\/10 {
+      background-color: color-mix(in oklab, var(--color-neon-green) 10%, transparent);
+    }
+  }
+
+  .bg-neon-green\\/12 {
+    background-color: #84cc161f;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neon-green\\/12 {
+      background-color: color-mix(in oklab, var(--color-neon-green) 12%, transparent);
+    }
+  }
+
+  .bg-neon-green\\/20 {
+    background-color: #84cc1633;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neon-green\\/20 {
+      background-color: color-mix(in oklab, var(--color-neon-green) 20%, transparent);
+    }
+  }
+
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+
+  .bg-primary\\/10 {
+    background-color: #f9b11f1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\\/10 {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+  }
+
+  .bg-primary\\/15 {
+    background-color: #f9b11f26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\\/15 {
+      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
+
+  .bg-primary\\/20 {
+    background-color: #f9b11f33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\\/20 {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
+  .bg-vibrant-purple {
+    background-color: var(--color-vibrant-purple);
+  }
+
+  .bg-white {
+    background-color: var(--color-white);
+  }
+
+  .bg-white\\/5 {
+    background-color: #ffffff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\\/5 {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+
+  .bg-white\\/10 {
+    background-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\\/10 {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  .bg-white\\/\\[0\\.02\\] {
+    background-color: #ffffff05;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\\/\\[0\\.02\\] {
+      background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
+    }
+  }
+
+  .bg-white\\/\\[0\\.03\\] {
+    background-color: #ffffff08;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\\/\\[0\\.03\\] {
+      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
+    }
+  }
+
+  .bg-\\[url\\(\\'data\\:image\\/svg\\+xml\\;charset\\=utf-8\\,\\%3Csvg\\%20xmlns\\%3D\\%22http\\%3A\\%2F\\%2Fwww\\.w3\\.org\\%2F2000\\%2Fsvg\\%22\\%20width\\%3D\\%2212\\%22\\%20height\\%3D\\%2212\\%22\\%20viewBox\\%3D\\%220\\%200\\%2024\\%2024\\%22\\%20fill\\%3D\\%22\\%23999\\%22\\%3E\\%3Cpath\\%20d\\%3D\\%22M7\\%2010l5\\%205\\%205-5z\\%22\\%2F\\%3E\\%3C\\%2Fsvg\\%3E\\'\\)\\] {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23999%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E");
+  }
+
+  .bg-\\[right_4px_center\\] {
+    background-position: right 4px center;
+  }
+
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .object-contain {
+    object-fit: contain;
+  }
+
+  .p-1\\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .p-2\\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
+  .px-1\\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
+  .py-0\\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .py-2\\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
+
+  .pr-1\\.5 {
+    padding-right: calc(var(--spacing) * 1.5);
+  }
+
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+
+  .pr-6 {
+    padding-right: calc(var(--spacing) * 6);
+  }
+
+  .pr-11 {
+    padding-right: calc(var(--spacing) * 11);
+  }
+
+  .pl-1\\.5 {
+    padding-left: calc(var(--spacing) * 1.5);
+  }
+
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .pl-\\[22px\\] {
+    padding-left: 22px;
+  }
+
+  .pl-\\[98px\\] {
+    padding-left: 98px;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .align-middle {
+    vertical-align: middle;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .text-\\[9px\\] {
+    font-size: 9px;
+  }
+
+  .text-\\[10px\\] {
+    font-size: 10px;
+  }
+
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+
+  .font-black {
+    --tw-font-weight: var(--font-weight-black);
+    font-weight: var(--font-weight-black);
+  }
+
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .break-all {
+    word-break: break-all;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .whitespace-pre {
+    white-space: pre;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .text-black {
+    color: var(--color-black);
+  }
+
+  .text-coral-red {
+    color: var(--color-coral-red);
+  }
+
+  .text-coral-red\\/40 {
+    color: #ff6b6b66;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-coral-red\\/40 {
+      color: color-mix(in oklab, var(--color-coral-red) 40%, transparent);
+    }
+  }
+
+  .text-coral-red\\/70 {
+    color: #ff6b6bb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-coral-red\\/70 {
+      color: color-mix(in oklab, var(--color-coral-red) 70%, transparent);
+    }
+  }
+
+  .text-coral-red\\/90 {
+    color: #ff6b6be6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-coral-red\\/90 {
+      color: color-mix(in oklab, var(--color-coral-red) 90%, transparent);
+    }
+  }
+
+  .text-electric-blue {
+    color: var(--color-electric-blue);
+  }
+
+  .text-gray-100 {
+    color: var(--color-gray-100);
+  }
+
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+
+  .text-hot-pink {
+    color: var(--color-hot-pink);
+  }
+
+  .text-neon-green {
+    color: var(--color-neon-green);
+  }
+
+  .text-neon-green\\/40 {
+    color: #84cc1666;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-neon-green\\/40 {
+      color: color-mix(in oklab, var(--color-neon-green) 40%, transparent);
+    }
+  }
+
+  .text-neon-green\\/70 {
+    color: #84cc16b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-neon-green\\/70 {
+      color: color-mix(in oklab, var(--color-neon-green) 70%, transparent);
+    }
+  }
+
+  .text-neon-green\\/90 {
+    color: #84cc16e6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-neon-green\\/90 {
+      color: color-mix(in oklab, var(--color-neon-green) 90%, transparent);
+    }
+  }
+
+  .text-primary {
+    color: var(--color-primary);
+  }
+
+  .text-primary\\/70 {
+    color: #f9b11fb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-primary\\/70 {
+      color: color-mix(in oklab, var(--color-primary) 70%, transparent);
+    }
+  }
+
+  .text-primary\\/80 {
+    color: #f9b11fcc;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-primary\\/80 {
+      color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+    }
+  }
+
+  .text-transparent {
+    color: #0000;
+  }
+
+  .text-vibrant-purple {
+    color: var(--color-vibrant-purple);
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .italic {
+    font-style: italic;
+  }
+
+  .placeholder-gray-600::placeholder {
+    color: var(--color-gray-600);
+  }
+
+  .accent-primary {
+    accent-color: var(--color-primary);
+  }
+
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .opacity-40 {
+    opacity: .4;
+  }
+
+  .opacity-60 {
+    opacity: .6;
+  }
+
+  .opacity-70 {
+    opacity: .7;
+  }
+
+  .shadow-hard {
+    --tw-shadow: 4px 4px 0 0 var(--tw-shadow-color, #000);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-hard-sm {
+    --tw-shadow: 2px 2px 0 0 var(--tw-shadow-color, #000);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-hard-xl {
+    --tw-shadow: 8px 8px 0 0 var(--tw-shadow-color, #000);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .duration-300 {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
+
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  @media (hover: hover) {
+    .group-hover\\:text-primary:is(:where(.group):hover *) {
+      color: var(--color-primary);
+    }
+
+    .group-hover\\:opacity-100:is(:where(.group):hover *) {
+      opacity: 1;
+    }
+  }
+
+  .peer-checked\\:border-primary:is(:where(.peer):checked ~ *) {
+    border-color: var(--color-primary);
+  }
+
+  .peer-checked\\:bg-primary:is(:where(.peer):checked ~ *) {
+    background-color: var(--color-primary);
+  }
+
+  .peer-checked\\:text-black:is(:where(.peer):checked ~ *) {
+    color: var(--color-black);
+  }
+
+  .last\\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  @media (hover: hover) {
+    .hover\\:translate-x-0\\.5:hover {
+      --tw-translate-x: calc(var(--spacing) * .5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .hover\\:translate-x-\\[2px\\]:hover {
+      --tw-translate-x: 2px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .hover\\:translate-y-0\\.5:hover {
+      --tw-translate-y: calc(var(--spacing) * .5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .hover\\:translate-y-\\[2px\\]:hover {
+      --tw-translate-y: 2px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    .hover\\:scale-110:hover {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+
+    .hover\\:border-coral-red:hover {
+      border-color: var(--color-coral-red);
+    }
+
+    .hover\\:border-gray-600:hover {
+      border-color: var(--color-gray-600);
+    }
+
+    .hover\\:border-neon-green:hover {
+      border-color: var(--color-neon-green);
+    }
+
+    .hover\\:border-primary:hover {
+      border-color: var(--color-primary);
+    }
+
+    .hover\\:border-primary\\/50:hover {
+      border-color: #f9b11f80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\\:border-primary\\/50:hover {
+        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+      }
+    }
+
+    .hover\\:border-vibrant-purple:hover {
+      border-color: var(--color-vibrant-purple);
+    }
+
+    .hover\\:border-white:hover {
+      border-color: var(--color-white);
+    }
+
+    .hover\\:bg-primary\\/5:hover {
+      background-color: #f9b11f0d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\\:bg-primary\\/5:hover {
+        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      }
+    }
+
+    .hover\\:bg-white\\/5:hover {
+      background-color: #ffffff0d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\\:bg-white\\/5:hover {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+
+    .hover\\:bg-white\\/10:hover {
+      background-color: #ffffff1a;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\\:bg-white\\/10:hover {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+
+    .hover\\:text-coral-red:hover {
+      color: var(--color-coral-red);
+    }
+
+    .hover\\:text-gray-200:hover {
+      color: var(--color-gray-200);
+    }
+
+    .hover\\:text-gray-300:hover {
+      color: var(--color-gray-300);
+    }
+
+    .hover\\:text-neon-green:hover {
+      color: var(--color-neon-green);
+    }
+
+    .hover\\:text-primary:hover {
+      color: var(--color-primary);
+    }
+
+    .hover\\:text-vibrant-purple:hover {
+      color: var(--color-vibrant-purple);
+    }
+
+    .hover\\:text-white:hover {
+      color: var(--color-white);
+    }
+
+    .hover\\:shadow-none:hover {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
+    .hover\\:brightness-125:hover {
+      --tw-brightness: brightness(125%);
+      filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+    }
+  }
+
+  .focus\\:translate-x-1:focus {
+    --tw-translate-x: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .focus\\:translate-x-\\[4px\\]:focus {
+    --tw-translate-x: 4px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .focus\\:translate-y-1:focus {
+    --tw-translate-y: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .focus\\:translate-y-\\[4px\\]:focus {
+    --tw-translate-y: 4px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .focus\\:border-electric-blue:focus {
+    border-color: var(--color-electric-blue);
+  }
+
+  .focus\\:border-gray-500:focus {
+    border-color: var(--color-gray-500);
+  }
+
+  .focus\\:border-neon-green:focus {
+    border-color: var(--color-neon-green);
+  }
+
+  .focus\\:border-primary:focus {
+    border-color: var(--color-primary);
+  }
+
+  .focus\\:border-vibrant-purple:focus {
+    border-color: var(--color-vibrant-purple);
+  }
+
+  .focus\\:shadow-none:focus {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .active\\:cursor-grabbing:active {
+    cursor: grabbing;
+  }
+
+  .disabled\\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\\:opacity-40:disabled {
+    opacity: .4;
+  }
+
+  @media (min-width: 40rem) {
+    .sm\\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sm\\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .sm\\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .md\\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .lg\\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .lg\\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .xl\\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+`;})();