Fix scale arguments and tooltip overflow

electron/commands/batch-upscayl.ts

@@ -43,8 +43,8 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
   const isDefaultModel = DEFAULT_MODELS.includes(model);
 
   const scale = payload.scale;
-  const customWidth = payload.customWidth;
   const useCustomWidth = payload.useCustomWidth;
+  const customWidth = useCustomWidth ? payload.customWidth : "";
 
   const outputFolderName = `upscayl_${saveImageAs}_${model}_${scale ? scale : ""}${useCustomWidth ? "px" : "x"}`;
 
@@ -98,6 +98,8 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
       logit("❌ ", data);
       failed = true;
       upscayl.kill();
+    } else if (data.includes("Resizing")) {
+      mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
     }
   };
   const onError = (data: any) => {
@@ -123,15 +125,6 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
       logit("♻ Scaling and converting now...");
       upscayl.kill();
       mainWindow && mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
-      if (noImageProcessing) {
-        logit("🚫 Skipping scaling and converting");
-        mainWindow.setProgressBar(-1);
-        mainWindow.webContents.send(
-          COMMAND.FOLDER_UPSCAYL_DONE,
-          outputFolderPath,
-        );
-        return;
-      }
       try {
         mainWindow.webContents.send(
           COMMAND.FOLDER_UPSCAYL_DONE,

electron/commands/double-upscayl.ts

@@ -51,8 +51,8 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
   const fileName = parse(fullfileName).name;
 
   const scale = parseInt(payload.scale) * parseInt(payload.scale);
-  const customWidth = payload.customWidth;
   const useCustomWidth = payload.useCustomWidth;
+  const customWidth = useCustomWidth ? payload.customWidth : "";
 
   const outFile =
     outputDir +
@@ -78,6 +78,7 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
       gpuId,
       saveImageAs,
       scale: scale.toString(),
+      customWidth,
     }),
     logit,
   );
@@ -86,7 +87,6 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
 
   setStopped(false);
   let failed = false;
-  let isAlpha = false;
   let failed2 = false;
 
   const onData = (data) => {
@@ -99,10 +99,12 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
     if (data.includes("Error") || data.includes("failed")) {
       upscayl.kill();
       failed = true;
+    } else if (data.includes("Resizing")) {
+      mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
     }
-    if (data.includes("alpha channel")) {
+    // if (data.includes("alpha channel")) {
-      isAlpha = true;
+    //   isAlpha = true;
-    }
+    // }
   };
 
   const onError = (data) => {
@@ -127,20 +129,6 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
     if (!mainWindow) return;
     if (!failed2 && !stopped) {
       logit("💯 Done upscaling");
-      logit("♻ Scaling and converting now...");
-      mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
-      if (noImageProcessing) {
-        logit("🚫 Skipping scaling and converting");
-        mainWindow.setProgressBar(-1);
-        mainWindow.webContents.send(
-          COMMAND.DOUBLE_UPSCAYL_DONE,
-          outFile.replace(
-            /([^/\\]+)$/i,
-            encodeURIComponent(outFile.match(/[^/\\]+$/i)![0]),
-          ),
-        );
-        return;
-      }
 
       try {
         mainWindow.setProgressBar(-1);
@@ -174,7 +162,6 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
       // UPSCALE
       let upscayl2 = spawnUpscayl(
         getDoubleUpscaleSecondPassArguments({
-          isAlpha,
           outFile,
           modelsPath: isDefaultModel
             ? modelsPath

electron/commands/image-upscayl.ts

@@ -59,11 +59,9 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
   const fileName = parse(fullfileName).name;
   const fileExt = parse(fullfileName).ext;
   const useCustomWidth = payload.useCustomWidth;
-  const customWidth = payload.customWidth;
+  const customWidth = useCustomWidth ? payload.customWidth : "";
 
-  const desiredScale = useCustomWidth
+  const desiredScale = payload.scale;
-    ? customWidth || payload.scale
-    : payload.scale;
 
   const outFile =
     outputDir +
@@ -136,10 +134,11 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
         logit("❌ INVALID GPU OR FAILED");
         upscayl.kill();
         failed = true;
-      }
+      } else if (data.includes("has alpha channel")) {
-      if (data.includes("has alpha channel")) {
         logit("📢 INCLUDES ALPHA CHANNEL, CHANGING OUTFILE NAME!");
         isAlpha = true;
+      } else if (data.includes("Resizing")) {
+        mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
       }
     };
     const onError = (data) => {
@@ -154,19 +153,6 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
       if (!failed && !stopped) {
         logit("💯 Done upscaling");
         logit("♻ Scaling and converting now...");
-        if (noImageProcessing) {
-          logit("🚫 Skipping scaling and converting");
-          mainWindow.setProgressBar(-1);
-          mainWindow.webContents.send(
-            COMMAND.UPSCAYL_DONE,
-            outFile.replace(
-              /([^/\\]+)$/i,
-              encodeURIComponent(outFile.match(/[^/\\]+$/i)![0]),
-            ),
-          );
-          return;
-        }
-        mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
         // Free up memory
         upscayl.kill();
         try {

electron/utils/get-arguments.ts

@@ -28,14 +28,12 @@ export const getSingleImageArguments = ({
     inputDir + slash + fullfileName,
     "-o",
     outFile,
-    "-s",
+    customWidth ? "" : `-s ${scale}`,
-    scale,
     "-m",
     modelsPath,
     "-n",
     model,
-    gpuId ? "-g" : "",
+    gpuId ? `-g ${gpuId}` : "",
-    gpuId ? gpuId : "",
     "-f",
     saveImageAs,
     customWidth ? `-w ${customWidth}` : "",
@@ -51,6 +49,7 @@ export const getDoubleUpscaleArguments = ({
   gpuId,
   saveImageAs,
   scale,
+  customWidth,
 }: {
   inputDir: string;
   fullfileName: string;
@@ -60,59 +59,56 @@ export const getDoubleUpscaleArguments = ({
   gpuId: string;
   saveImageAs: ImageFormat;
   scale: string;
-}) => {
-  return [
-    "-i",
-    inputDir + slash + fullfileName,
-    "-o",
-    outFile,
-    "-s",
-    scale,
-    "-m",
-    modelsPath,
-    "-n",
-    model,
-    gpuId ? "-g" : "",
-    gpuId ? gpuId : "",
-    "-f",
-    saveImageAs,
-  ];
-};
-
-export const getDoubleUpscaleSecondPassArguments = ({
-  isAlpha,
-  outFile,
-  modelsPath,
-  model,
-  gpuId,
-  saveImageAs,
-  scale,
-  customWidth,
-}: {
-  isAlpha: boolean;
-  outFile: string;
-  modelsPath: string;
-  model: string;
-  gpuId: string;
-  saveImageAs: ImageFormat;
-  scale: string;
   customWidth: string;
 }) => {
   return [
     "-i",
-    isAlpha ? outFile + ".png" : outFile,
+    inputDir + slash + fullfileName,
     "-o",
-    isAlpha ? outFile + ".png" : outFile,
+    outFile,
-    "-s",
+    customWidth ? "" : `-s ${scale}`,
-    scale,
     "-m",
     modelsPath,
     "-n",
     model,
-    gpuId ? "-g" : "",
+    gpuId ? `-g ${gpuId}` : "",
-    gpuId ? gpuId : "",
+    "-f",
-    isAlpha ? "" : "-f",
+    saveImageAs,
-    isAlpha ? "" : saveImageAs,
+    customWidth ? `-w ${customWidth}` : "",
+  ];
+};
+
+export const getDoubleUpscaleSecondPassArguments = ({
+  outFile,
+  modelsPath,
+  model,
+  gpuId,
+  saveImageAs,
+  scale,
+  customWidth,
+}: {
+  outFile: string;
+  modelsPath: string;
+  model: string;
+  gpuId: string;
+  saveImageAs: ImageFormat;
+  scale: string;
+  customWidth: string;
+}) => {
+  return [
+    "-i",
+    outFile,
+    "-o",
+    outFile,
+    "-s",
+    customWidth ? "" : `-s ${scale}`,
+    "-m",
+    modelsPath,
+    "-n",
+    model,
+    gpuId ? `-g ${gpuId}` : "",
+    "-f",
+    saveImageAs,
     customWidth ? `-w ${customWidth}` : "",
   ];
 };
@@ -141,14 +137,12 @@ export const getBatchArguments = ({
     inputDir,
     "-o",
     outputDir,
-    "-s",
+    customWidth ? "" : `-s ${scale}`,
-    scale,
     "-m",
     modelsPath,
     "-n",
     model,
-    gpuId ? "-g" : "",
+    gpuId ? `-g ${gpuId}` : "",
-    gpuId ? gpuId : "",
     "-f",
     saveImageAs,
     customWidth ? `-w ${customWidth}` : "",

electron/utils/spawn-upscayl.ts

@@ -3,11 +3,11 @@ import { execPath } from "./get-resource-paths";
 
 export const spawnUpscayl = (
   command: string[],
-  logit: (...args: any) => void
+  logit: (...args: any) => void,
 ) => {
   logit(
     "📢 Upscayl Command: ",
-    command.filter((arg) => arg !== "")
+    command.filter((arg) => arg !== ""),
   );
 
   const spawnedProcess = spawn(
@@ -16,7 +16,7 @@ export const spawnUpscayl = (
     {
       cwd: undefined,
       detached: false,
-    }
+    },
   );
 
   return {

renderer/atoms/userSettingsAtom.ts

@@ -48,10 +48,7 @@ export const viewTypeAtom = atomWithStorage<"slider" | "lens">(
 
 export const lensSizeAtom = atomWithStorage<number>("lensSize", 100);
 
-export const customWidthAtom = atomWithStorage<number | null>(
+export const customWidthAtom = atomWithStorage<number>("customWidth", 0);
-  "customWidth",
-  null,
-);
 
 export const useCustomWidthAtom = atomWithStorage<boolean>(
   "useCustomWidth",

renderer/components/settings-tab/CompressionInput.tsx

@@ -14,7 +14,8 @@ export function CompressionInput({
       </div>
       {compression > 0 && (
         <p className="text-xs text-base-content/80">
-          PNG compression is not supported at the moment.
+          PNG compression is lossless. It might not have a significant effect on
+          some images.
         </p>
       )}
       <input

renderer/components/settings-tab/ImageFormatSelect.tsx

@@ -13,8 +13,6 @@ export function ImageFormatSelect({
   saveImageAs,
   setExportType,
 }: ImageFormatSelectProps) {
-  const noImageProcessing = useAtomValue(noImageProcessingAtom);
-
   return (
     <div className="flex flex-col gap-2">
       <div className="flex flex-row gap-1">
@@ -25,29 +23,26 @@ export function ImageFormatSelect({
       </div>
       <div className="flex flex-col gap-2">
         {batchMode && <p className="text-xs text-base-content/80"></p>}
-        {noImageProcessing && (
-          <p className="text-xs text-base-content/80">
-            {batchMode && "Only PNG is supported in Batch Upscayl."} Only PNGs
-            are saved without image processing to preserve image quality.
-          </p>
-        )}
         <div className="flex flex-wrap gap-2">
           {/* PNG */}
           <button
             className={`btn ${saveImageAs === "png" && "btn-primary"}`}
-            onClick={() => setExportType("png")}>
+            onClick={() => setExportType("png")}
+          >
             PNG
           </button>
           {/* JPG */}
           <button
             className={`btn ${saveImageAs === "jpg" && "btn-primary"}`}
-            onClick={() => setExportType("jpg")}>
+            onClick={() => setExportType("jpg")}
+          >
             JPG
           </button>
           {/* WEBP */}
           <button
             className={`btn ${saveImageAs === "webp" && "btn-primary"}`}
-            onClick={() => setExportType("webp")}>
+            onClick={() => setExportType("webp")}
+          >
             WEBP
           </button>
         </div>

renderer/components/settings-tab/ImageScaleSelect.tsx

@@ -20,10 +20,16 @@ export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
         Anything above 4X (except 16X Double Upscayl) only resizes the image and
         does not use AI upscaling.
       </p>
+      {parseInt(scale) >= 6 && (
+        <p className="text-xs text-base-content/80 text-red-500">
+          This may cause performance issues on some devices!
+        </p>
+      )}
       <input
         type="range"
         min="1"
         max="16"
+        placeholder="Example: 1320"
         value={scale}
         onChange={(e: any) => {
           setScale(e.target.value.toString());

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -10,6 +10,8 @@ import {
   progressAtom,
   rememberOutputFolderAtom,
   scaleAtom,
+  customWidthAtom,
+  useCustomWidthAtom,
 } from "../../../atoms/userSettingsAtom";
 import { featureFlags } from "@common/feature-flags";
 import getModelScale from "@common/check-model-scale";
@@ -66,6 +68,8 @@ function LeftPaneImageSteps({
   const [progress, setProgress] = useAtom(progressAtom);
   const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
   const [open, setOpen] = React.useState(false);
+  const [customWidth, setCustomWidth] = useAtom(customWidthAtom);
+  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
 
   const [targetWidth, setTargetWidth] = useState<number>(null);
   const [targetHeight, setTargetHeight] = useState<number>(null);
@@ -143,22 +147,14 @@ function LeftPaneImageSteps({
     let doubleScale = parseInt(scale) * parseInt(scale);
     let singleScale = parseInt(scale);
 
-    if (noImageProcessing) {
+    if (useCustomWidth) {
-      let initialScale = parseInt(getModelScale(model));
-      doubleScale = initialScale * initialScale;
-      singleScale = initialScale;
     }
 
     if (doubleUpscayl) {
       const newWidth = dimensions.width * doubleScale;
       const newHeight = dimensions.height * doubleScale;
-      if (newWidth < 32768 || newHeight < 32768) {
+      newDimensions.width = newWidth;
-        newDimensions.width = newWidth;
+      newDimensions.height = newHeight;
-        newDimensions.height = newHeight;
-      } else {
-        newDimensions.width = 32384;
-        newDimensions.height = 32384;
-      }
     } else {
       newDimensions.width = dimensions.width * singleScale;
       newDimensions.height = dimensions.height * singleScale;
@@ -195,11 +191,13 @@ function LeftPaneImageSteps({
       </div>
 
       {/* STEP 1 */}
-      <div data-tooltip-id="tooltip" data-tooltip-content={imagePath}>
+      <div className="animate-step-in">
         <p className="step-heading">Step 1</p>
         <button
           className="btn btn-primary"
           onClick={!batchMode ? selectImageHandler : selectFolderHandler}
+          data-tooltip-id="tooltip"
+          data-tooltip-content={imagePath}
         >
           Select {batchMode ? "Folder" : "Image"}
         </button>
@@ -255,7 +253,7 @@ function LeftPaneImageSteps({
             <button
               className="badge badge-neutral badge-sm cursor-help"
               data-tooltip-id="tooltip"
-              data-tooltip-content="Enable this option to get a 16x upscayl (we just run upscayl twice). Note that this may not always work properly with all images, for example, images with really large resolutions."
+              data-tooltip-content="Enable this option to run upscayl twice on an image. Note that this may cause a significant increase in processing time and possibly performance issues for scales greater than 4X."
             >
               ?
             </button>
@@ -264,11 +262,7 @@ function LeftPaneImageSteps({
       </div>
 
       {/* STEP 3 */}
-      <div
+      <div className="animate-step-in">
-        className="animate-step-in"
-        data-tooltip-content={outputPath}
-        data-tooltip-id="tooltip"
-      >
         <div className="flex flex-col pb-2">
           <div className="step-heading flex items-center gap-2">
             <span className="leading-none">Step 3</span>
@@ -298,7 +292,12 @@ function LeftPaneImageSteps({
             Defaults to {!batchMode ? "Image's" : "Folder's"} path
           </p>
         )}
-        <button className="btn btn-primary" onClick={outputHandler}>
+        <button
+          className="btn btn-primary"
+          data-tooltip-content={outputPath}
+          data-tooltip-id="tooltip"
+          onClick={outputHandler}
+        >
           Set Output Folder
         </button>
       </div>
@@ -333,7 +332,10 @@ function LeftPaneImageSteps({
         </button>
       </div>
 
-      <Tooltip className="z-50 max-w-sm" id="tooltip" />
+      <Tooltip
+        className="z-[999] max-w-sm break-words !bg-secondary"
+        id="tooltip"
+      />
     </div>
   );
 }

renderer/components/upscayl-tab/view/ProgressBar.tsx

@@ -24,7 +24,7 @@ function ProgressBar({
 
   return (
     <div className="absolute z-50 flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
-      <div className="rounded-btn flex flex-col items-center bg-base-100/50 p-4 backdrop-blur-lg">
+      <div className="flex flex-col items-center rounded-btn bg-base-100/50 p-4 backdrop-blur-lg">
         <img
           src="icon.png"
           alt="Upscayl Icon"
@@ -42,12 +42,6 @@ function ProgressBar({
         <p className="animate-pulse rounded-full px-2 pb-3 text-sm font-medium">
           Doing the Upscayl magic...
         </p>
-        {batchMode && (
-          <p className="rounded-btn w-64 pb-4 text-center text-xs text-base-content/70">
-            Info: The images will be converted and scaled after the upscaling
-            process.
-          </p>
-        )}
         <button onClick={stopHandler} className="btn btn-outline">
           STOP
         </button>

renderer/pages/index.tsx

@@ -499,8 +499,8 @@ const Home = () => {
           scale,
           noImageProcessing,
           compression: compression.toString(),
+          customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
-          customWidth: customWidth.toString(),
         });
         logit("🏁 DOUBLE_UPSCAYL");
       } else if (batchMode) {
@@ -515,7 +515,7 @@ const Home = () => {
           scale,
           noImageProcessing,
           compression: compression.toString(),
-          customWidth: customWidth.toString(),
+          customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
         });
         logit("🏁 FOLDER_UPSCAYL");
@@ -531,7 +531,7 @@ const Home = () => {
           overwrite,
           noImageProcessing,
           compression: compression.toString(),
-          customWidth: customWidth.toString(),
+          customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
         });
         logit("🏁 UPSCAYL");

renderer/styles/globals.css

@@ -41,10 +41,73 @@
 
 @layer base {
   * {
-    @apply select-none;
+    @apply select-none border-border;
     font-family: "Poppins", sans-serif;
   }
+  body {
+    @apply bg-background text-foreground;
+  }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
   .hide-scrollbar::-webkit-scrollbar-track {
     @apply bg-transparent;
   }
@@ -166,6 +229,10 @@
   @apply rounded-lg bg-primary p-1 font-medium normal-case;
 }
 
+.__rcs-handle-button {
+  @apply border-white;
+}
+
 .mac-titlebar {
   -webkit-app-region: drag;
 }
@@ -237,81 +304,3 @@
     -webkit-transform: perspective(120px) rotateX(-360deg) rotateY(-359.9deg);
   }
 }
-
-/* SHADCN CHANGES */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}