update: UI of VDF test page

.gitignore

@@ -68,12 +68,9 @@ package-lock.json
 .env.production.local
 .env.local
 
-# Fresh build directory
-_fresh/
 # npm dependencies
 node_modules/
 
-
 # project specific
 logs/
 __pycache__
@@ -85,3 +82,6 @@ ml/data/
 ml/filter/checkpoints
 scripts
 model/
+
+
+.astro

.idea/cvsa.iml

@@ -19,6 +19,13 @@
       <excludeFolder url="file://$MODULE_DIR$/.zed" />
       <excludeFolder url="file://$MODULE_DIR$/packages/frontend/.astro" />
       <excludeFolder url="file://$MODULE_DIR$/scripts" />
+      <excludeFolder url="file://$MODULE_DIR$/.astro" />
+      <excludeFolder url="file://$MODULE_DIR$/ml/pred/checkpoints" />
+      <excludeFolder url="file://$MODULE_DIR$/ml/pred/observed" />
+      <excludeFolder url="file://$MODULE_DIR$/ml/pred/runs" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/backend/logs" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/core/net/logs" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/crawler/logs" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

packages/frontend/src/components/InfoPage/MetadataRow.astro

@@ -0,0 +1,8 @@
+---
+const { title, description } = Astro.props;
+---
+
+<tr>
+	<td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">{title}</td>
+	<td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{description}</td>
+</tr>

packages/frontend/src/components/VDFtester.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-    import { N_ARRAY } from "src/const"; // 假设你的常量文件现在导出 N_ARRAY
+    import { N_ARRAY } from "src/const";
+    import { fade } from "svelte/transition";
+
+	let bigintSupported = typeof BigInt !== 'undefined';
 
     function generateRandomBigInt(min: bigint, max: bigint) {
         const range = max - min;
@@ -68,11 +71,13 @@
 `;
 
     let isBenchmarking = false;
+
     interface BenchmarkResult {
         N: bigint;
         difficulty: bigint;
         time: number;
     }
+
     let benchmarkResults: BenchmarkResult[] = [];
     let currentProgress = 0;
     let currentN: bigint | null = null;
@@ -89,6 +94,10 @@
         });
     });
 
+    const preferredBits = 1024;
+	let closetBits = 0;
+	let speedSample: BenchmarkResult;
+
     async function startBenchmark() {
         if (testCombinations.length === 0) {
             alert("No N values provided in src/const N_ARRAY.");
@@ -106,6 +115,10 @@
 
         worker.onmessage = (event) => {
             const { type, N: resultNStr, difficulty: resultDifficultyStr, time, progress } = event.data;
+			if (Math.abs(Number(resultDifficultyStr) - preferredBits) < Math.abs(Number(resultDifficultyStr) - closetBits)) {
+				closetBits = Number(resultDifficultyStr);
+			}
+
             const resultN = BigInt(resultNStr);
             const resultDifficulty = BigInt(resultDifficultyStr);
 
@@ -142,78 +155,125 @@
         return benchmarkResults.reduce((acc, result) => acc + result.time, 0);
     }
 
-    function getAccumulatedDifficulty() {
-        return benchmarkResults.reduce((acc, result) => acc + Number(result.difficulty), 0);
-    }
-
 	function getSpeed() {
-        return (getAccumulatedDifficulty() / getAccumulatedTime()) * 1000;
+		speedSample = benchmarkResults.filter((result) => result.difficulty === BigInt(closetBits)).sort((a, b) => a.time - b.time)[0];
+		if (!speedSample) {
+			return 0;
+		}
+		return Number(speedSample.difficulty) / speedSample.time * 1000;
 	}
 </script>
 
 <div
-    class="md:bg-zinc-50 md:dark:bg-zinc-800 p-6 rounded-md md:border dark:border-zinc-700 mb-6 mt-8 md:w-2/3 lg:w-1/2 xl:w-[37%] md:mx-auto"
+    class="relative mt-8 md:mt-20 md:bg-surface-container-high md:dark:bg-dark-surface-container-high
+    p-6 rounded-md mb-6 md:w-2/3 lg:w-1/2 xl:w-[37%] md:mx-auto"
 >
-    <h2 class="text-xl font-bold mb-4 text-zinc-800 dark:text-zinc-200">VDF Benchmark</h2>
+    <h2 class="text-xl font-[500] mb-4">VDF 基准测试</h2>
 
-    {#if !isBenchmarking}
+	{#if !bigintSupported}
+		<p class="text-error dark:text-dark-error">
+			⚠️ 您的浏览器不支持 BigInt，无法运行基准测试。
+		</p>
+	{:else if !isBenchmarking}
 		<button
-            class="bg-blue-500 hover:bg-blue-600 duration-100 text-white font-bold py-2 px-4 rounded"
+				class="bg-primary dark:bg-dark-primary duration-100 text-on-primary dark:text-dark-on-primary
+                font-medium py-2 px-4 rounded hover:brightness-90"
 				on:click={startBenchmark}
+				disabled={!bigintSupported}
 		>
-            Start Benchmark
+			开始测试
 		</button>
 	{/if}
 
     {#if isBenchmarking}
-        <p class="mb-8 text-zinc-700 dark:text-zinc-300">
+        <p class="mb-8">
-            Benchmarking in progress... ({currentTestIndex + 1}/{testCombinations.length})
+            正在测试: {currentTestIndex + 1}/{testCombinations.length}
         </p>
         {#if currentN !== null && currentDifficulty !== null}
-            <p class="mb-2 text-zinc-700 dark:text-zinc-300">N Bits: {currentN.toString(2).length}</p>
+            <p class="mb-2">密钥长度: {currentN.toString(2).length} 比特</p>
-            <p class="mb-2 text-zinc-700 dark:text-zinc-300">Difficulty: {currentDifficulty}</p>
+            <p class="mb-2">难度: {currentDifficulty.toLocaleString()}</p>
-            <div class="w-full bg-zinc-300 dark:bg-neutral-700 rounded-full h-1 relative overflow-hidden">
+            <div class="w-full rounded-full h-1 relative overflow-hidden">
                 <div
-                    class="bg-black dark:bg-white h-full rounded-full relative"
+                    class="bg-primary dark:bg-dark-primary h-full rounded-full absolute"
                     style="width: {currentProgress}%"
                 ></div>
+                <div
+                    class="bg-secondary-container dark:bg-dark-secondary-container h-full rounded-full absolute right-0"
+                    style="width: calc({100 - currentProgress}% - 0.25rem)"
+                ></div>
+                <div class="bg-primary dark:bg-dark-primary h-full w-1 rounded-full absolute right-0"></div>
             </div>
         {/if}
     {/if}
 
     {#if benchmarkResults.length > 0 && !isBenchmarking}
-        <h3 class="text-lg font-bold mt-4 mb-2 text-zinc-800 dark:text-zinc-200">Benchmark Results</h3>
+        <h3 class="text-lg font-medium mt-4 mb-2">测试结果</h3>
-        <p class="mb-4 text-zinc-700 dark:text-zinc-300 text-sm">
+        <p class="mb-4 text-sm">
-            <b>Summary:</b>
+            测试在 {(getAccumulatedTime() / 1000).toFixed(3)} 秒内完成. <br/>
-            {getAccumulatedDifficulty()}
+			速度: {Math.round(getSpeed()).toLocaleString()} 迭代 / 秒. <br/>
-            calculations done in {getAccumulatedTime().toFixed(1)}ms,
+			<span class="text-sm text-on-surface-variant dark:text-dark-on-surface-variant">
-            speed: {getSpeed().toFixed(2)} op/s
+				速度是在 N = {preferredBits} bits, T = {speedSample.difficulty} 的测试中测量的.
+			</span>
         </p>
-        <table class="w-full text-sm text-left rtl:text-right text-zinc-500 dark:text-zinc-400">
+        <table class="w-full text-sm text-left rtl:text-right mt-4">
-            <thead
+            <thead class="text-sm uppercase font-medium border-b border-outline dark:border-dark-outline">
-                class="text-xs text-zinc-700 uppercase dark:text-zinc-400 border-b border-zinc-400 dark:border-zinc-500"
-            >
                 <tr>
-                    <th scope="col" class="px-6 py-3">Time (ms)</th>
+                    <th scope="col" class="px-6 py-3">耗时 (ms)</th>
                     <th scope="col" class="px-6 py-3">N (bits)</th>
-                    <th scope="col" class="px-6 py-3">T (log10)</th>
+                    <th scope="col" class="px-6 py-3">T (迭代)</th>
                 </tr>
             </thead>
             <tbody>
                 {#each benchmarkResults as result}
-                    <tr class="border-b dark:border-zinc-700 border-zinc-200">
+                    <tr class="border-b border-outline-variant dark:border-dark-outline-variant">
-                        <td class="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap dark:text-white"
+                        <td class="px-6 py-4 whitespace-nowrap">
-                            >{result.time.toFixed(2)}</td
+                            {result.time.toFixed(2)}
-                        >
+                        </td>
-                        <td class="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap dark:text-white"
+                        <td class="px-6 py-4 whitespace-nowrap">
-                            >{result.N.toString(2).length}</td
+                            {result.N.toString(2).length}
-                        >
+                        </td>
-                        <td class="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap dark:text-white"
+                        <td class="px-6 py-4 whitespace-nowrap">
-                            >{Math.log10(Number(result.difficulty)).toFixed(2)}</td
+                            {Number(result.difficulty)}
-                        >
+                        </td>
                     </tr>
                 {/each}
             </tbody>
         </table>
     {/if}
 </div>
+
+{#if !isBenchmarking}
+    <div
+        class={"md:w-2/3 lg:w-1/2 xl:w-[37%] md:mx-auto mx-6 mb-12 " +
+            (benchmarkResults.length > 0 && !isBenchmarking ? "" : "absolute left-1/2 -translate-x-1/2 top-72")}
+        transition:fade={{ duration: 200 }}
+    >
+        <h2 class="text-lg font-medium">关于本页</h2>
+        <div class="text-sm text-on-surface-variant dark:text-dark-on-surface-variant">
+            <p>
+                这是一个性能测试页面，<br />
+                旨在测试我们的一个 VDF (Verifiable Delayed Function, 可验证延迟函数) 实现的性能。<br />
+                这是一个数学函数，它驱动了整个网站的验证码（CAPTCHA）。<br />
+                通过使用该函数，我们可以让您无需通过点选图片或滑动滑块既可完成验证， 同时防御我们的网站，使其免受自动程序的攻击。
+                <br />
+            </p>
+            <p>
+                点击 <i>Start Benchmark</i> 按钮，会自动测试并展示结果。<br />
+            </p>
+            <p>
+                你可以将结果发送至邮箱: <a href="mailto:contact@alikia2x.com">contact@alikia2x.com</a>
+                或 QQ：<a href="https://qm.qq.com/q/WS8zyhlcEU">1559913735</a>，并附上自己的设备信息
+                （例如，手机型号、电脑的 CPU 型号等）。<br />
+                我们会根据测试结果，优化我们的实现，使性能更优。<br />
+                感谢你的支持！<br />
+            </p>
+        </div>
+    </div>
+{/if}
+
+<style lang="postcss">
+    @reference "tailwindcss";
+    p {
+        @apply my-2;
+    }
+</style>

packages/frontend/src/pages/login/index.astro

@@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
 
 <Layout title="登录">
 	<main class="relative flex-grow pt-36 px-4 md:w-full md:flex md:items-center md:flex-col">
-		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-container md:dark:bg-dark-container">
+		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-surface-container md:dark:bg-dark-surface-container">
 			<h1 class="text-5xl leading-[4rem] font-extralight">登录</h1>
 			<p class="mt-4 leading-8 font-medium">很抱歉，但您现在无法登录。</p>
 			<p class="text-sm text-on-surface-variant dark:text-dark-on-surface-variant">因为目前还没有写好啦~</p>

packages/frontend/src/pages/register/index.astro

@@ -5,7 +5,7 @@ import RightArrow from "@components/icon/RightArrow.astro";
 
 <Layout title="注册">
 	<main class="relative flex-grow pt-36 px-4 md:w-full md:flex md:items-center md:flex-col">
-		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-container md:dark:bg-dark-container">
+		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-surface-container md:dark:bg-dark-container">
 			<h1 class="text-5xl leading-[4rem] font-extralight">欢迎</h1>
 			<p class="mt-2.5 md:mt-4">
 				欢迎来到中 V 档案馆。<br/>

packages/frontend/src/pages/song/[id]/info.astro

@@ -4,6 +4,7 @@ import TitleBar from "@components/TitleBar.astro";
 import pg from "pg";
 import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
+import MetadataRow from "@components/InfoPage/MetadataRow.astro";
 
 const databaseHost = import.meta.env.DB_HOST
 const databaseName = import.meta.env.DB_NAME
@@ -121,50 +122,17 @@ interface Snapshot {
                 <div class="overflow-x-auto max-w-full px-2">
                     <table class="table-fixed">
                         <tbody>
-                            <tr>
+                            <MetadataRow title={id} description={videoInfo?.id}/>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">ID</td>
+                            <MetadataRow title={videoInfo?.aid} description={videoInfo?.aid}/>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td>
+                            <MetadataRow title={videoInfo?.bvid} description={videoInfo?.bvid}/>
-                            </tr>
+                            <MetadataRow title="标题" description={videoInfo?.title}/>
-                            <tr>
+                            <MetadataRow title="描述" description={videoInfo?.description}/>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">AID</td>
+                            <MetadataRow title="UID" description={videoInfo?.uid}/>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td>
+                            <MetadataRow title="标签" description={videoInfo?.tags}/>
-                            </tr>
+                            <MetadataRow title="发布时间" description={format(new Date(videoInfo?.pubdate), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })}/>
-                            <tr>
+                            <MetadataRow title="时长 (秒)" description={videoInfo?.duration}/>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">BVID</td>
+                            <MetadataRow title="创建时间" description={format(new Date(videoInfo?.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })}/>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td>
+                            <MetadataRow title="封面" description={videoInfo?.cover_url}/>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标题</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">描述</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">UID</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标签</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">发布时间</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">时长 (秒)</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">创建时间</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
-                            </tr>
-                            <tr>
-                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">封面</td>
-                                <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td>
-                            </tr>
                         </tbody>
                     </table>
                 </div>

packages/frontend/src/styles/global.css

@@ -7,14 +7,101 @@
     --color-on-surface-variant: #534341;
     --color-dark-on-surface-variant: #d8c2be;
     --color-dark-surface-container-high: #322826;
-    --color-dark-container: #271d1c;
+    --color-dark-surface-container: #271d1c;
-    --color-container: #fceae7;
+    --color-surface-container: #fceae7;
     --color-on-surface: #231918;
     --color-dark-on-surface: #f1dfdc;
     --color-surface: #fff8f6;
     --color-dark-surface: #1a1110;
     --color-primary: #904b40;
     --color-dark-primary: #ffb2b7;
+    --color-primary-container: #ffdad4;
+    --color-dark-primary-container: #73342a;
+    --color-on-primary: #ffffff;
+    --color-dark-on-primary: #561e16;
+    --color-dark-primary-fixed-dim: #ffb4a8;
+    --color-secondary-container: #ffdad4;
+    --color-dark-secondary-container: #5d3f3b;
+
+    --color-surface-tint: rgb(144 75 64);
+    --color-dark-surface-tint: rgb(255 180 168);
+    --color-on-primary-container: rgb(115 52 42);
+    --color-dark-on-primary-container: rgb(255 218 212);
+    --color-secondary: rgb(119 86 81);
+    --color-dark-secondary: rgb(231 189 182);
+    --color-on-secondary: rgb(255 255 255);
+    --color-dark-on-secondary: rgb(68 41 37);
+    --color-on-secondary-container: rgb(93 63 59);
+    --color-dark-on-secondary-container: rgb(255 218 212);
+    --color-tertiary: rgb(112 92 46);
+    --color-dark-tertiary: rgb(222 196 140);
+    --color-on-tertiary: rgb(255 255 255);
+    --color-dark-on-tertiary: rgb(62 46 4);
+    --color-tertiary-container: rgb(251 223 166);
+    --color-dark-tertiary-container: rgb(86 68 25);
+    --color-on-tertiary-container: rgb(86 68 25);
+    --color-dark-on-tertiary-container: rgb(251 223 166);
+    --color-error: rgb(186 26 26);
+    --color-dark-error: rgb(255 180 171);
+    --color-on-error: rgb(255 255 255);
+    --color-dark-on-error: rgb(105 0 5);
+    --color-error-container: rgb(255 218 214);
+    --color-dark-error-container: rgb(147 0 10);
+    --color-on-error-container: rgb(147 0 10);
+    --color-dark-on-error-container: rgb(255 218 214);
+    --color-background: rgb(255 248 246);
+    --color-dark-background: rgb(26 17 16);
+    --color-on-background: rgb(35 25 24);
+    --color-dark-on-background: rgb(241 223 220);
+    --color-surface-variant: rgb(245 221 218);
+    --color-dark-surface-variant: rgb(83 67 65);
+    --color-outline: rgb(133 115 112);
+    --color-dark-outline: rgb(160 140 137);
+    --color-outline-variant: rgb(216 194 190);
+    --color-dark-outline-variant: rgb(83 67 65);
+    --color-shadow: rgb(0 0 0);
+    --color-dark-shadow: rgb(0 0 0);
+    --color-scrim: rgb(0 0 0);
+    --color-dark-scrim: rgb(0 0 0);
+    --color-inverse-surface: rgb(57 46 44);
+    --color-dark-inverse-surface: rgb(241 223 220);
+    --color-inverse-on-surface: rgb(255 237 234);
+    --color-dark-inverse-on-surface: rgb(57 46 44);
+    --color-inverse-primary: rgb(255 180 168);
+    --color-dark-inverse-primary: rgb(144 75 64);
+    --color-primary-fixed: rgb(255 218 212);
+    --color-dark-primary-fixed: rgb(255 218 212);
+    --color-on-primary-fixed: rgb(58 9 5);
+    --color-dark-on-primary-fixed: rgb(58 9 5);
+    --color-primary-fixed-dim: rgb(255 180 168);
+    --color-on-primary-fixed-variant: rgb(115 52 42);
+    --color-dark-on-primary-fixed-variant: rgb(115 52 42);
+    --color-secondary-fixed: rgb(255 218 212);
+    --color-dark-secondary-fixed: rgb(255 218 212);
+    --color-on-secondary-fixed: rgb(44 21 18);
+    --color-dark-on-secondary-fixed: rgb(44 21 18);
+    --color-secondary-fixed-dim: rgb(231 189 182);
+    --color-dark-secondary-fixed-dim: rgb(231 189 182);
+    --color-on-secondary-fixed-variant: rgb(93 63 59);
+    --color-dark-on-secondary-fixed-variant: rgb(93 63 59);
+    --color-tertiary-fixed: rgb(251 223 166);
+    --color-dark-tertiary-fixed: rgb(251 223 166);
+    --color-on-tertiary-fixed: rgb(37 26 0);
+    --color-dark-on-tertiary-fixed: rgb(37 26 0);
+    --color-tertiary-fixed-dim: rgb(222 196 140);
+    --color-dark-tertiary-fixed-dim: rgb(222 196 140);
+    --color-on-tertiary-fixed-variant: rgb(86 68 25);
+    --color-dark-on-tertiary-fixed-variant: rgb(86 68 25);
+    --color-surface-dim: rgb(232 214 211);
+    --color-dark-surface-dim: rgb(26 17 16);
+    --color-surface-bright: rgb(255 248 246);
+    --color-dark-surface-bright: rgb(66 55 53);
+    --color-surface-container-lowest: rgb(255 255 255);
+    --color-dark-surface-container-lowest: rgb(20 12 11);
+    --color-surface-container-low: rgb(255 240 238);
+    --color-dark-surface-container-low: rgb(35 25 24);
+    --color-surface-container-highest: rgb(241 223 220);
+    --color-dark-surface-container-highest: rgb(61 50 48);
 }
 
 a {