translime-plugin-hdr-capture 1.0.1 → 1.0.4

package/dist/bin/index.d.ts

@@ -3,24 +3,17 @@
 
 /* auto-generated by NAPI-RS */
 
-/** 显示器信息 */
+/** 显示器描述信息 */
 export interface DisplayInfo {
-  /** 显示器索引 */
   id: number
-  /** 显示器名称 */
   name: string
-  /** 左边界 */
   x: number
-  /** 上边界 */
   y: number
-  /** 宽度 */
   width: number
-  /** 高度 */
   height: number
-  /** 是否主显示器 */
   isPrimary: boolean
 }
-/** 窗口信息结构 */
+/** 暴露给 JavaScript 的窗口信息结构 */
 export interface WindowInfo {
   /** 窗口句柄 (HWND) */
   handle: number
@@ -28,17 +21,11 @@ export interface WindowInfo {
   title: string
   /** 窗口类名 */
   className: string
-  /** 左边界 */
   left: number
-  /** 上边界 */
   top: number
-  /** 右边界 */
   right: number
-  /** 下边界 */
   bottom: number
-  /** 窗口宽度 */
   width: number
-  /** 窗口高度 */
   height: number
 }
 /** 矩形区域 */
@@ -48,71 +35,58 @@ export interface Rect {
   width: number
   height: number
 }
-/** Tone Mapping 选项 */
+/** 色调映射 (Tone Mapping) 选项 */
 export interface ToneMappingOptions {
-  /** 曝光值调整 */
+  /** 曝光度调整值 */
   exposure?: number
-  /** 是否保留 HDR 元数据 */
+  /** 是否保留 HDR 元数据（某些格式支持） */
   preserveHdrMetadata?: boolean
 }
-/** HDR 映射配置选项 */
+/** HDR 映射专用配置 */
 export interface HdrMappingOptions {
-  /** 是否启用自定义 HDR 映射 */
+  /** 是否开启色彩映射 */
   enabled?: boolean
-  /** SDR 白点亮度 (nits)，默认 203 */
+  /** SDR 白点参考亮度 (nits)，默认为 203 */
   sdrWhiteNits?: number
-  /** HDR 峰值亮度 (nits)，默认 1000 */
+  /** HDR 峰值亮度 (nits)，默认为 1000 */
   hdrMaxNits?: number
-  /** 是否同时保留原始 HDR 数据（用于后续保存 HDR 原始文件） */
+  /** 是否导出原始 HDR 字节流（供后续保存为 EXR 等格式） */
   preserveRaw?: boolean
 }
-/** 屏幕捕获结果 */
+/** 屏幕捕获返回的综合结果 */
 export interface CaptureResult {
-  /** 图像数据 (RGBA，经过 Tone Mapping) */
+  /** 处理后的图像数据 (RGBA8 缓冲区) */
   buffer: Buffer
-  /** 实际图像宽度 (物理像素) */
+  /** 图像物理宽度 (像素) */
   width: number
-  /** 实际图像高度 (物理像素) */
+  /** 图像物理高度 (像素) */
   height: number
-  /** 是否为 HDR 源数据（经过 Tonemap） */
+  /** 是否来源于 HDR 屏幕 */
   isHdr: boolean
-  /**
-   * 原始 HDR 数据 (可选，仅当 preserve_raw 为 true 且为 HDR 屏幕时存在)
-   * 保存为 RGBA Float16 或 10bit 原始格式的字节流
-   */
+  /** 原始 HDR 数据 (F16 格式，仅在 preserve_raw 为开启时存在) */
   rawHdrBuffer?: Buffer
 }
-/** 获取所有顶层窗口 */
+/** 获取所有的顶层可见窗口 */
 export declare function getTopLevelWindows(): Array<WindowInfo>
-/** 获取指定坐标处的窗口 */
+/** 获取指定屏幕坐标下的最前端窗口 */
 export declare function getWindowAtPoint(x: number, y: number, ignoreHandle?: number | undefined | null): WindowInfo | null
 /**
- * 捕获指定显示器的屏幕 (返回 RGBA 结果对象)
+ * 捕获指定显示器的当前画面
  *
- * `hdr_options` - 可选的 HDR 映射配置，用于自定义色调映射参数
+ * 返回包含图像数据及元数据的结果对象。
  */
-export declare function captureDisplay(displayId: number, hdrOptions?: HdrMappingOptions | undefined | null): Promise<CaptureResult>
-/** 获取显示器列表 */
+export declare function captureDisplay(displayId: number, hdrOptions?: HdrMappingOptions | undefined | null, captureCursor?: boolean | undefined | null): Promise<CaptureResult>
+/** 获取当前连接的所有显示器列表 */
 export declare function getDisplays(): Array<DisplayInfo>
-/** 裁剪图像 */
+/** 根据给定矩形裁剪图像缓冲区 */
 export declare function cropImage(buffer: Buffer, width: number, height: number, rect: Rect): Promise<Buffer>
-/** HDR 到 SDR 的 Tone Mapping */
+/** 对捕获的 HDR 数据执行后处理色调映射 */
 export declare function toneMap(hdrBuffer: Buffer, width: number, height: number, options?: ToneMappingOptions | undefined | null): Promise<Buffer>
-/** 编码图像为指定格式 */
+/** 将像素数据编码为特定格式（png, jpg, webp） */
 export declare function encodeImage(buffer: Buffer, width: number, height: number, format: string): Promise<Buffer>
-/** 调整图像大小 */
+/** 调整图像大小到指定的分辨率 */
 export declare function resizeImage(buffer: Buffer, width: number, height: number, newWidth: number, newHeight: number): Promise<Buffer>
-/**
- * 将原始 HDR F16 数据编码为 EXR 格式
- *
- * 输入: RGBA F16 格式的原始 HDR 数据 (每像素 8 字节)
- * 输出: OpenEXR 文件字节流
- */
+/** 将 F16 格式的原始 HDR 数据编码为高性能的 OpenEXR 文件 */
 export declare function encodeHdrToExr(rawBuffer: Buffer, width: number, height: number): Promise<Buffer>
-/**
- * 裁剪 HDR F16 格式的原始数据
- *
- * 输入: RGBA F16 格式的原始 HDR 数据 (每像素 8 字节)
- * 输出: 裁剪后的 RGBA F16 数据
- */
+/** 在 F16 原始数据层级执行裁剪 */
 export declare function cropHdrF16(rawBuffer: Buffer, width: number, height: number, rect: Rect): Promise<Buffer>

package/dist/main.cjs.js

@@ -654,7 +654,7 @@ try {
 const getTopLevelWindows = () => nativeAddon.getTopLevelWindows();
 const getWindowAtPoint = (x, y, ignoreHandle = null) => nativeAddon.getWindowAtPoint(x, y, ignoreHandle);
 const getDisplays = () => nativeAddon.getDisplays();
-const captureDisplay = async (displayId = 0, hdrOptions = null) => {
+const captureDisplay = async (displayId = 0, hdrOptions = null, captureCursor = false) => {
   try {
     const nativeHdrOptions = hdrOptions ? {
       enabled: hdrOptions.enabled,
@@ -662,12 +662,13 @@ const captureDisplay = async (displayId = 0, hdrOptions = null) => {
       hdrMaxNits: hdrOptions.hdrMaxNits,
       preserveRaw: hdrOptions.preserveRaw
     } : null;
-    return await nativeAddon.captureDisplay(displayId, nativeHdrOptions);
+    return await nativeAddon.captureDisplay(displayId, nativeHdrOptions, captureCursor);
   } catch (e) {
     logger$1.error(`captureDisplay 失败 (ID=${displayId}):`, e);
     throw e;
   }
 };
+const toneMap = async (hdrBuffer, width, height, options = {}) => nativeAddon.toneMap(hdrBuffer, width, height, options);
 const encodeImage = async (buffer, width, height, format = "png") => nativeAddon.encodeImage(buffer, width, height, format);
 const encodeHdrToExr = async (rawBuffer, width, height) => {
   try {
@@ -876,6 +877,11 @@ const cropAndSaveScaledFromBuffer = async (sessionData, rect, options = {}) => {
   if (savePath) {
     const fs = await import("node:fs/promises");
     const path2 = await import("node:path");
+    try {
+      await fs.mkdir(savePath, { recursive: true });
+    } catch (err) {
+      logger$1.error(`无法创建保存目录: ${savePath}`, err);
+    }
     const timestamp = dayjs().format("HDR_Capture_YYYY-MM-DD_HH-mm-ss");
     let fileName;
     if (saveFilenameTemplate) {
@@ -972,6 +978,7 @@ const getPreserveHdr = () => pluginConfig.get("preserveHdr", false);
 const getEnableHdrMapping = () => pluginConfig.get("enableHdrMapping", true);
 const getSdrWhiteNits = () => pluginConfig.get("sdrWhiteNits", 203);
 const getHdrMaxNits = () => pluginConfig.get("hdrMaxNits", 1e3);
+const getCaptureCursor = () => pluginConfig.get("captureCursor", false);
 const getAllDisplaysBounds = () => {
   const displays = electron.screen.getAllDisplays();
   let minX = Infinity;
@@ -994,6 +1001,8 @@ const getAllDisplaysBounds = () => {
     displays,
     minX,
     minY,
+    maxX,
+    maxY,
     width: maxX - minX,
     height: maxY - minY
   };
@@ -1005,16 +1014,28 @@ const updateOverlayBounds = () => {
   const {
     minX,
     minY,
+    maxY,
     width,
     height
   } = getAllDisplaysBounds();
-  overlayWindow.setBounds({
-    x: minX,
-    y: minY,
-    width,
-    height
-  });
-  logger.info(`屏幕变动，已更新 Overlay 边界: ${width}x${height} at (${minX}, ${minY})`);
+  const { y } = overlayWindow.getBounds();
+  if (y >= maxY) {
+    overlayWindow.setBounds({
+      width,
+      height,
+      x: 0,
+      y: maxY + 100
+    });
+    logger.info(`屏幕变动，更新离屏位置: (0, ${maxY + 100})`);
+  } else {
+    overlayWindow.setBounds({
+      x: minX,
+      y: minY,
+      width,
+      height
+    });
+    logger.info(`屏幕变动，更新捕获边界: ${width}x${height} at (${minX}, ${minY})`);
+  }
 };
 const unregisterShortcut = () => {
   if (registeredShortcut) {
@@ -1042,7 +1063,7 @@ const createOverlayWindow = (isDebug = false) => {
     skipTaskbar: !isDebug,
     resizable: isDebug,
     movable: isDebug,
-    maximizable: true,
+    maximizable: false,
     fullscreen: false,
     thickFrame: false,
     hasShadow: false,
@@ -1073,49 +1094,64 @@ const createOverlayWindow = (isDebug = false) => {
   });
   return overlayWindow;
 };
-const preCaptureAllScreens = async () => {
+const preCaptureAllScreens = async (startTime = Date.now(), isDebug = false) => {
   const electronDisplays = electron.screen.getAllDisplays();
   const nativeDisplays = getDisplays();
-  logger.info("开始预捕获。检测到原生显示器数量:", nativeDisplays.length);
+  logger.info(`[Perf] 开始预捕获 (T+${Date.now() - startTime}ms). 检测到原生显示器数量:`, nativeDisplays.length);
   const enableHdrMapping = getEnableHdrMapping();
   const sdrWhiteNits = getSdrWhiteNits();
   const hdrMaxNits = getHdrMaxNits();
   const preserveHdr = getPreserveHdr();
+  const captureCursor = getCaptureCursor();
   const hdrOptions = enableHdrMapping ? {
     enabled: true,
     sdrWhiteNits,
     hdrMaxNits,
-    // 当用户启用了 HDR 映射且勾选了保存 HDR 原始文件时，请求原始数据
+    preserveHdr,
+    // 注意：传递给 native 的参数名和 config 可能略有不同，这里复用 preserveHdr
     preserveRaw: preserveHdr
   } : null;
   logger.info("HDR 映射配置:", {
     enableHdrMapping,
     sdrWhiteNits,
     hdrMaxNits,
-    preserveHdr
+    preserveHdr,
+    captureCursor
   });
   const capturePromises = nativeDisplays.map(async (nd) => {
     try {
-      logger.info(`正在捕获显示器 ID=${nd.id} (预期 ${nd.width}x${nd.height})`);
+      const t0 = Date.now();
+      logger.info(`[Perf] 正在捕获显示器 ID=${nd.id} (预期 ${nd.width}x${nd.height}) ...`);
       const {
         buffer,
         width,
         height,
         isHdr,
         rawHdrBuffer
-      } = await captureDisplay(nd.id, hdrOptions);
+      } = await captureDisplay(nd.id, hdrOptions, captureCursor);
+      const t1 = Date.now();
+      logger.info(`[Perf] 显示器 ID=${nd.id} 捕获完成, 耗时: ${t1 - t0}ms(T+${t1 - startTime}ms). 实际尺寸 ${width}x${height}, Buffer: ${buffer ? buffer.length : 0}, IS_HDR: ${isHdr}`);
+      if (isDebug && !isHdr && buffer && buffer.length > 0) {
+        try {
+          logger.info("[Perf] (Debug模式) 强制对 SDR 数据执行 Tone Mapping 测试...");
+          const tMap0 = Date.now();
+          await toneMap(buffer, width, height, { exposure: 1 });
+          const tMap1 = Date.now();
+          logger.info(`[Perf] (Debug模式) 强制 Tone Mapping 耗时: ${tMap1 - tMap0}ms(T+${tMap1 - startTime}ms)`);
+        } catch (tmErr) {
+          logger.error("强制 Tone Mapping 测试失败:", tmErr);
+        }
+      }
       if (!buffer || buffer.length === 0) {
         logger.warn(`显示器 ID=${nd.id} 返回的 Buffer 为空`);
         return null;
       }
-      logger.info(`显示器 ID=${nd.id} 捕获成功: 实际尺寸 ${width}x${height}, Buffer 长度 ${buffer.length}, IS_HDR: ${isHdr}, 原始 HDR 数据: ${rawHdrBuffer ? rawHdrBuffer.length : "N/A"}`);
       const centerX = nd.x + nd.width / 2;
       const centerY = nd.y + nd.height / 2;
       const ed = electronDisplays.find((d) => {
         const b = d.bounds;
         return centerX >= b.x && centerX <= b.x + b.width && centerY >= b.y && centerY <= b.y + b.height;
       }) || electronDisplays[0];
-      logger.info(`显示器 ID=${nd.id} 匹配到 Electron 显示器: scale=${ed.scaleFactor}`);
       return {
         displayId: nd.id,
         buffer,
@@ -1134,37 +1170,63 @@ const preCaptureAllScreens = async () => {
   });
   const results = await Promise.allSettled(capturePromises);
   const finalResults = results.filter((result) => result.status === "fulfilled" && result.value !== null).map((result) => result.value);
-  logger.info(`预捕获完成，成功获取到 ${finalResults.length} 张屏幕画面`);
+  logger.info(`[Perf] 预捕获全部完成 (T+${Date.now() - startTime}ms), 成功获取到 ${finalResults.length} 张屏幕画面`);
   return finalResults;
 };
-const startCapture = async (isDebug = false) => {
+const startCapture = async (isDebug = false, startTime = Date.now()) => {
+  logger.info(`[Perf] startCapture 开始 (T+${Date.now() - startTime}ms)`);
+  const {
+    displays: allDisplays,
+    minX,
+    minY,
+    maxY,
+    width: totalWidth,
+    height: totalHeight
+  } = getAllDisplaysBounds();
+  if (!overlayWindow || overlayWindow.isDestroyed()) {
+    logger.info(`[Perf] 预创建 Overlay 窗口 (T+${Date.now() - startTime}ms)`);
+    createOverlayWindow(isDebug);
+  }
   if (overlayWindow && !overlayWindow.isDestroyed() && overlayWindow.isVisible()) {
-    overlayWindow.focus();
-    return;
+    const { y } = overlayWindow.getBounds();
+    if (y < maxY) {
+      overlayWindow.focus();
+      return;
+    }
   }
   await new Promise((resolve) => {
-    setTimeout(resolve, 100);
+    setTimeout(resolve, 10);
   });
+  logger.info(`[Perf] DWM 稳定等待结束 (T+${Date.now() - startTime}ms)`);
   let sessionData = [];
   let capturedScreens = [];
-  if (!isDebug) {
-    sessionData = await preCaptureAllScreens();
-    if (!sessionData || sessionData.length === 0) {
-      logger.error("启动失败: 未能捕获到任何屏幕画面。请检查原生模块加载状态及录屏权限。");
-      return;
-    }
+  sessionData = await preCaptureAllScreens(startTime, isDebug);
+  if (sessionData && sessionData.length > 0) {
     currentCaptureSession = sessionData;
-    capturedScreens = await Promise.all(sessionData.map(async (s) => ({
-      displayId: s.displayId,
-      bounds: s.bounds,
-      data: await encodeImage(s.buffer, s.width, s.height, "webp")
-    })));
+    logger.info(`[Perf] 开始编码预览图 (T+${Date.now() - startTime}ms)...`);
+    capturedScreens = await Promise.all(sessionData.map(async (s) => {
+      const tEncode0 = Date.now();
+      const data = await encodeImage(s.buffer, s.width, s.height, "webp");
+      const tEncode1 = Date.now();
+      logger.info(`[Perf] 编码显示器 ${s.displayId} 为 WebP 耗时: ${tEncode1 - tEncode0}ms`);
+      return {
+        displayId: s.displayId,
+        bounds: s.bounds,
+        data
+      };
+    }));
+    logger.info(`[Perf] 所有预览图编码完成 (T+${Date.now() - startTime}ms)`);
+  } else if (!isDebug) {
+    logger.error("启动失败: 未能捕获到任何屏幕画面。请检查原生模块加载状态及录屏权限。");
+    return;
   } else {
-    logger.info("Debug 模式：跳过实际截屏，提供空数据以启动 UI");
+    logger.info("Debug 模式：真实截图未返回数据，提供空/Mock数据以启动 UI");
+    capturedScreens = [];
   }
   const cursorPos = electron.screen.getCursorScreenPoint();
+  const tWin0 = Date.now();
   const nativeWindows = getTopLevelWindows();
-  logger.info(`原生模块返回 ${nativeWindows.length} 个窗口`);
+  logger.info(`[Perf] 获取顶层窗口耗时: ${Date.now() - tWin0}ms, 数量: ${nativeWindows.length}`);
   const windows = nativeWindows.map((win) => {
     try {
       const topLeft = electron.screen.screenToDipPoint({ x: win.left, y: win.top });
@@ -1183,13 +1245,6 @@ const startCapture = async (isDebug = false) => {
       return null;
     }
   }).filter(Boolean);
-  const {
-    displays: allDisplays,
-    minX,
-    minY,
-    width: totalWidth,
-    height: totalHeight
-  } = getAllDisplaysBounds();
   allDisplays.forEach((d, idx) => {
     windows.push({
       handle: 0,
@@ -1208,11 +1263,6 @@ const startCapture = async (isDebug = false) => {
   } else {
     logger.warn("未能成功转换任何窗口坐标或搜索结果为空");
   }
-  if (!overlayWindow || overlayWindow.isDestroyed()) {
-    createOverlayWindow(isDebug);
-  } else {
-    updateOverlayBounds();
-  }
   const initData = {
     isDebug,
     minX,
@@ -1226,14 +1276,25 @@ const startCapture = async (isDebug = false) => {
     displays: allDisplays.map((d) => ({
       id: d.id,
       bounds: d.bounds
-    }))
+    })),
+    // 传递触发时间戳，供 UI 计算总耗时
+    startTime
   };
   const sendDataAndShow = () => {
-    logger.info(`发送初始化数据, 截图数量: ${capturedScreens.length}, 窗口数量: ${windows.length}, isDebug: ${isDebug}`);
+    logger.info(`[Perf] 发送初始化数据 (T+${Date.now() - startTime}ms), 截图数量: ${capturedScreens.length}, 窗口数量: ${windows.length}, isDebug: ${isDebug}`);
     overlayWindow.webContents.send(`overlay-init@${PLUGIN_ID}`, initData);
-    overlayWindow.show();
+    overlayWindow.setBounds({
+      x: minX,
+      y: minY,
+      width: totalWidth,
+      height: totalHeight
+    });
+    if (!overlayWindow.isVisible()) {
+      overlayWindow.showInactive();
+    }
     overlayWindow.focus();
     overlayWindow.setIgnoreMouseEvents(false);
+    logger.info(`[Perf] 窗口已显示并聚焦 (T+${Date.now() - startTime}ms)`);
   };
   if (overlayWindow.webContents.isLoading()) {
     overlayWindow.webContents.once("did-finish-load", sendDataAndShow);
@@ -1251,11 +1312,15 @@ const registerShortcut = (accelerator) => {
   if (!lastPart || modifiers.includes(lastPart)) {
     return false;
   }
+  if (registeredShortcut === finalAccelerator) {
+    return true;
+  }
   unregisterShortcut();
   try {
     const success = electron.globalShortcut.register(finalAccelerator, () => {
-      logger.info(`触发快捷键: ${finalAccelerator}`);
-      startCapture().catch((err) => {
+      const now = Date.now();
+      logger.info(`[Perf] 快捷键触发: ${finalAccelerator} (T+0ms)`);
+      startCapture(false, now).catch((err) => {
         logger.error("快捷键触发 startCapture 失败:", err);
       });
     });
@@ -1273,10 +1338,15 @@ const registerShortcut = (accelerator) => {
 };
 const closeOverlay = () => {
   if (overlayWindow && !overlayWindow.isDestroyed()) {
+    try {
+      overlayWindow.webContents.send(`overlay-reset@${PLUGIN_ID}`);
+    } catch (e) {
+    }
     if (getFastResponse()) {
-      overlayWindow.hide();
+      const { maxY } = getAllDisplaysBounds();
       overlayWindow.setIgnoreMouseEvents(true);
-      logger.info("快速响应模式: Overlay 已隐藏");
+      overlayWindow.setPosition(0, maxY + 100);
+      logger.info(`快速响应模式: Overlay 已移至离屏常驻 (0, ${maxY + 100})`);
     } else {
       overlayWindow.close();
       overlayWindow = null;
@@ -1325,7 +1395,7 @@ const ipcHandlers = [
   {
     type: "start-capture",
     handler: () => async ({ isDebug = false }) => {
-      await startCapture(isDebug);
+      await startCapture(isDebug, Date.now());
     }
   },
   {

package/dist/overlay-preload.cjs.js

@@ -49,6 +49,15 @@ electron.contextBridge.exposeInMainWorld("hdrCapture", {
    * @param {function} callback
    */
   onInit: (callback) => {
+    electron.ipcRenderer.removeAllListeners(`overlay-init@${PLUGIN_ID}`);
     electron.ipcRenderer.on(`overlay-init@${PLUGIN_ID}`, (event, data) => callback(data));
+  },
+  /**
+   * 监听重置消息
+   * @param {function} callback
+   */
+  onReset: (callback) => {
+    electron.ipcRenderer.removeAllListeners(`overlay-reset@${PLUGIN_ID}`);
+    electron.ipcRenderer.on(`overlay-reset@${PLUGIN_ID}`, () => callback());
   }
 });

package/dist/overlay.css

@@ -1 +1 @@
-.frozen-screens-layer[data-v-0b001d45]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.frozen-screen[data-v-0b001d45]{position:absolute}.frozen-screen img[data-v-0b001d45]{width:100%;height:100%;object-fit:fill;display:block}.action-toolbar-container[data-v-2b54cb73]{position:absolute;display:flex;flex-direction:column;align-items:flex-end;z-index:100;pointer-events:none}.action-toolbar-main[data-v-2b54cb73]{display:flex;padding:4px;background:#1e1e1ef2;border-radius:8px;box-shadow:0 4px 20px #0006;backdrop-filter:blur(12px);border:1px solid rgb(255 255 255 / 10%);pointer-events:auto}.btn-group[data-v-2b54cb73]{display:flex;align-items:center}.btn[data-v-2b54cb73]{width:28px;height:28px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s ease;background:transparent;border-radius:4px;margin:0 1px}.btn[data-v-2b54cb73]:hover{background:#ffffff26}.btn[data-v-2b54cb73]:active{transform:scale(.95)}.btn.active[data-v-2b54cb73]{background:#ffffff40;color:#adf}.divider[data-v-2b54cb73]{width:1px;height:16px;background:#fff3;margin:0 4px}.btn-save[data-v-2b54cb73]:hover{background:#4caf5099}.btn-copy[data-v-2b54cb73]:hover{background:#2196f399}.btn-cancel[data-v-2b54cb73]:hover{background:#f4433699}.size-settings-bar[data-v-2b54cb73]{margin-top:4px;padding:4px 8px;background:#1e1e1ef2;border-radius:8px;box-shadow:0 4px 20px #0006;backdrop-filter:blur(12px);border:1px solid rgb(255 255 255 / 10%);pointer-events:auto;display:flex;align-items:center;gap:8px;height:36px;box-sizing:border-box}.size-inputs[data-v-2b54cb73]{display:flex;align-items:center;gap:4px;font-family:monospace;font-size:13px;color:#eee}.size-input[data-v-2b54cb73]{background:#0000004d;border:1px solid rgb(255 255 255 / 20%);border-radius:4px;color:#fff;padding:2px 4px;text-align:center;outline:none;font-family:inherit;font-size:inherit;min-width:4ch;height:22px;box-sizing:border-box}.size-input[data-v-2b54cb73]:focus{border-color:#2196f3;background:#0000007f}.size-input[data-v-2b54cb73]::-webkit-outer-spin-button,.size-input[data-v-2b54cb73]::-webkit-inner-spin-button{appearance:none;margin:0}.size-separator[data-v-2b54cb73]{color:#ffffff7f;font-size:12px}.size-unit[data-v-2b54cb73]{color:#ffffff7f;font-size:12px;margin-left:2px}.btn-confirm[data-v-2b54cb73]{border:none;background:#2196f3;color:#fff;border-radius:4px;padding:2px 8px;font-size:12px;cursor:pointer;height:22px;line-height:18px;transition:background .15s;white-space:nowrap}.btn-confirm[data-v-2b54cb73]:hover{background:#42a5f5}.btn-confirm[data-v-2b54cb73]:active{background:#1976d2}.radius-settings[data-v-2b54cb73]{display:flex;align-items:center;gap:8px;width:100%;color:#eee;font-size:13px}.radius-label[data-v-2b54cb73]{font-size:12px;color:#ffffffb3;white-space:nowrap}.radius-slider[data-v-2b54cb73]{flex:1;height:4px;border-radius:2px;background:#ffffff4d;outline:none;cursor:pointer;accent-color:#2196f3;width:100px}.magnifier[data-v-cf910dc4]{position:absolute;border-radius:4px;overflow:hidden;box-shadow:0 4px 12px #0000007f,0 0 0 1px #fff3;pointer-events:none;z-index:9999;background:#000;border:1px solid rgb(255 255 255 / 50%)}@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-border-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--radius-xl:.75rem;--ease-out:cubic-bezier(0,0,.2,1);--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-1\.5{top:calc(var(--spacing)*-1.5)}.-top-6{top:calc(var(--spacing)*-6)}.top-1{top:calc(var(--spacing)*1)}.top-1\/2{top:50%}.-right-1\.5{right:calc(var(--spacing)*-1.5)}.-bottom-1\.5{bottom:calc(var(--spacing)*-1.5)}.-left-1\.5{left:calc(var(--spacing)*-1.5)}.left-0{left:calc(var(--spacing)*0)}.left-1{left:calc(var(--spacing)*1)}.left-1\/2{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-99{z-index:99}.box-border{box-sizing:border-box}.flex{display:flex}.h-3{height:calc(var(--spacing)*3)}.h-full{height:100%}.h-screen{height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-full{width:100%}.w-screen{width:100vw}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;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,)}.cursor-e-resize{cursor:e-resize}.cursor-move{cursor:move}.cursor-n-resize{cursor:n-resize}.cursor-ne-resize{cursor:ne-resize}.cursor-nw-resize{cursor:nw-resize}.cursor-s-resize{cursor:s-resize}.cursor-se-resize{cursor:se-resize}.cursor-sw-resize{cursor:sw-resize}.cursor-w-resize{cursor:w-resize}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#2196F3\]{border-color:#2196f3}.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)}}.bg-\[\#2196F3\]{background-color:#2196f3}.bg-\[\#2196F3\]\/10{background-color:#2196f31a}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab,red,red)){.bg-black\/75{background-color:color-mix(in oklab,var(--color-black)75%,transparent)}}.bg-white{background-color:var(--color-white)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.font-mono{font-family:var(--font-mono)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.whitespace-nowrap{white-space:nowrap}.text-\[\#FF5252\]{color:#ff5252}.text-white{color:var(--color-white)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);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}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.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))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\]{--tw-ease:cubic-bezier(.23,1,.32,1);transition-timing-function:cubic-bezier(.23,1,.32,1)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}}html,body{background:0 0;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+.frozen-screens-layer[data-v-0b001d45]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.frozen-screen[data-v-0b001d45]{position:absolute}.frozen-screen img[data-v-0b001d45]{width:100%;height:100%;object-fit:fill;display:block}.action-toolbar-container[data-v-ebf36e2e]{position:absolute;display:flex;flex-direction:column;align-items:flex-end;z-index:100;pointer-events:none}.action-toolbar-main[data-v-ebf36e2e]{display:flex;padding:4px;background:#1e1e1ef2;border-radius:8px;box-shadow:0 4px 20px #0006;backdrop-filter:blur(12px);border:1px solid rgb(255 255 255 / 10%);pointer-events:auto}.btn-group[data-v-ebf36e2e]{display:flex;align-items:center}.btn[data-v-ebf36e2e]{width:28px;height:28px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s ease;background:transparent;border-radius:4px;margin:0 1px}.btn[data-v-ebf36e2e]:hover{background:#ffffff26}.btn[data-v-ebf36e2e]:active{transform:scale(.95)}.btn.active[data-v-ebf36e2e]{background:#ffffff40;color:#adf}.divider[data-v-ebf36e2e]{width:1px;height:16px;background:#fff3;margin:0 4px}.btn-save[data-v-ebf36e2e]:hover{background:#4caf5099}.btn-copy[data-v-ebf36e2e]:hover{background:#2196f399}.btn-cancel[data-v-ebf36e2e]:hover{background:#f4433699}.size-settings-bar[data-v-ebf36e2e]{margin-top:4px;padding:4px 8px;background:#1e1e1ef2;border-radius:8px;box-shadow:0 4px 20px #0006;backdrop-filter:blur(12px);border:1px solid rgb(255 255 255 / 10%);pointer-events:auto;display:flex;align-items:center;gap:8px;height:36px;box-sizing:border-box}.size-inputs[data-v-ebf36e2e]{display:flex;align-items:center;gap:4px;font-family:monospace;font-size:13px;color:#eee}.size-input[data-v-ebf36e2e]{background:#0000004d;border:1px solid rgb(255 255 255 / 20%);border-radius:4px;color:#fff;padding:2px 4px;text-align:center;outline:none;font-family:inherit;font-size:inherit;min-width:4ch;height:22px;box-sizing:border-box}.size-input[data-v-ebf36e2e]:focus{border-color:#2196f3;background:#0000007f}.size-input[data-v-ebf36e2e]::-webkit-outer-spin-button,.size-input[data-v-ebf36e2e]::-webkit-inner-spin-button{appearance:none;margin:0}.size-separator[data-v-ebf36e2e]{color:#ffffff7f;font-size:12px}.size-unit[data-v-ebf36e2e]{color:#ffffff7f;font-size:12px;margin-left:2px}.btn-confirm[data-v-ebf36e2e]{border:none;background:#2196f3;color:#fff;border-radius:4px;padding:2px 8px;font-size:12px;cursor:pointer;height:22px;line-height:18px;transition:background .15s;white-space:nowrap}.btn-confirm[data-v-ebf36e2e]:hover{background:#42a5f5}.btn-confirm[data-v-ebf36e2e]:active{background:#1976d2}.radius-settings[data-v-ebf36e2e]{display:flex;align-items:center;gap:8px;width:100%;color:#eee;font-size:13px}.radius-label[data-v-ebf36e2e]{font-size:12px;color:#ffffffb3;white-space:nowrap}.radius-slider[data-v-ebf36e2e]{flex:1;height:4px;border-radius:2px;background:#ffffff4d;outline:none;cursor:pointer;accent-color:#2196f3;width:100px}.magnifier[data-v-37869409]{position:absolute;border-radius:4px;overflow:hidden;box-shadow:0 4px 12px #0000007f,0 0 0 1px #fff3;pointer-events:none;z-index:9999;background:#000;border:1px solid rgb(255 255 255 / 50%)}@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-border-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--radius-xl:.75rem;--ease-out:cubic-bezier(0,0,.2,1);--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-1\.5{top:calc(var(--spacing)*-1.5)}.-top-6{top:calc(var(--spacing)*-6)}.top-1{top:calc(var(--spacing)*1)}.top-1\/2{top:50%}.-right-1\.5{right:calc(var(--spacing)*-1.5)}.-bottom-1\.5{bottom:calc(var(--spacing)*-1.5)}.-left-1\.5{left:calc(var(--spacing)*-1.5)}.left-0{left:calc(var(--spacing)*0)}.left-1{left:calc(var(--spacing)*1)}.left-1\/2{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-99{z-index:99}.box-border{box-sizing:border-box}.flex{display:flex}.h-3{height:calc(var(--spacing)*3)}.h-full{height:100%}.h-screen{height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-full{width:100%}.w-screen{width:100vw}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;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,)}.cursor-e-resize{cursor:e-resize}.cursor-move{cursor:move}.cursor-n-resize{cursor:n-resize}.cursor-ne-resize{cursor:ne-resize}.cursor-nw-resize{cursor:nw-resize}.cursor-s-resize{cursor:s-resize}.cursor-se-resize{cursor:se-resize}.cursor-sw-resize{cursor:sw-resize}.cursor-w-resize{cursor:w-resize}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#2196F3\]{border-color:#2196f3}.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)}}.bg-\[\#2196F3\]{background-color:#2196f3}.bg-\[\#2196F3\]\/10{background-color:#2196f31a}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab,red,red)){.bg-black\/75{background-color:color-mix(in oklab,var(--color-black)75%,transparent)}}.bg-white{background-color:var(--color-white)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.font-mono{font-family:var(--font-mono)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.whitespace-nowrap{white-space:nowrap}.text-\[\#FF5252\]{color:#ff5252}.text-white{color:var(--color-white)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);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}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.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))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\]{--tw-ease:cubic-bezier(.23,1,.32,1);transition-timing-function:cubic-bezier(.23,1,.32,1)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}}html,body{background:0 0;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}