From ae21139325820f8e8a3a26e44a3932a19df56a0a Mon Sep 17 00:00:00 2001
From: Double-Cloth <Double-Cloth@outlook.com>
Date: Mon, 13 Jul 2026 09:45:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=20CSS=20=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/Whalgebra.html | 130 ++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 58 deletions(-)

diff --git a/dist/Whalgebra.html b/dist/Whalgebra.html
index fe8dab4..91e8773 100644
--- a/dist/Whalgebra.html
+++ b/dist/Whalgebra.html
@@ -18071,6 +18071,20 @@
             /* 强制声明页面只支持浅色模式 */
             color-scheme: light;
 
+            /* 复用样式 */
+            --layout-bar-height: 6.5dvh;
+            --layout-screen-height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+            --layout-action-height: min(12dvmin, 7dvh);
+            --layout-print-content-width: 99dvw;
+            --layout-print-row-width: 98dvw;
+            --layout-print-content-height: calc(92.5dvh - var(--layout-action-height));
+            --layout-content-row-height: min(7.5dvh, 9dvmin);
+            --layout-print-header-height: 7dvh;
+            --layout-setting-width: min(65dvw, 90dvmin);
+            --layout-explain-width: min(90dvw, 100dvmin);
+            --layout-explain-half-width: min(45dvw, 50dvmin);
+            --layout-explain-bar-height: 7dvh;
+
             /* 基础中性色 */
             --white: 0 0% 100%;
             --black: 0 0% 0%;
@@ -18403,7 +18417,7 @@
             align-items: center;
             justify-content: center;
             width: max(7dvw, 10dvmin);
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             transition: background 0.13s ease-out,
             box-shadow 0.13s ease-out;
             border-radius: 2.5dvmin;
@@ -18434,7 +18448,7 @@
             display: flex;
             overflow: visible;
             width: 100dvw;
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             border-radius: 0 0 2.5dvmin 2.5dvmin;
 
             background: linear-gradient(145deg, hsl(var(--white) / 0.46), hsl(var(--white) / 0.1) 42%, hsl(var(--black) / 0.07)),
@@ -18454,7 +18468,7 @@
             align-items: center;
             justify-content: center;
             width: calc(100dvw - max(14dvw, 20dvmin));
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             transition: all 0.24s ease;
         }
 
@@ -18464,7 +18478,7 @@
 
         #head_inputs {
             width: calc(99.4dvw - max(14dvw, 20dvmin));
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             margin-left: 0.6dvw;
         }
 
@@ -18480,7 +18494,7 @@
 
         #screen_title {
             width: 100dvw;
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             border-bottom: 0.5dvmin solid hsl(var(--line-teal));
             background-color: transparent;
         }
@@ -18510,7 +18524,7 @@
             align-items: center;
             justify-content: right;
             width: calc(min(7.5dvh, 12dvmin) + 0.55dvw);
-            height: calc(6.5dvh - 0.5dvmin);
+            height: calc(var(--layout-bar-height) - 0.5dvmin);
         }
 
         #back_btn {
@@ -18564,7 +18578,7 @@
 
         .ScreenMain {
             width: 100dvw;
-            height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+            height: var(--layout-screen-height);
 
             background-color: hsl(var(--page-background));
             box-shadow: inset 0 0 0 0.12dvmin hsl(var(--shadow-grey-1) / 0.18),
@@ -18616,7 +18630,7 @@
 
         #screen_1 > div.Lines {
             z-index: 1;
-            height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+            height: var(--layout-screen-height);
         }
 
         #screen_1 > div.Lines:first-child {
@@ -18788,7 +18802,7 @@
 
         #screen_2_0,
         #screen_4 {
-            height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+            height: var(--layout-screen-height);
             padding-top: calc(7.25dvh - min(4dvh, 6.75dvmin));
         }
 
@@ -18802,7 +18816,7 @@
 
         #screen_2_1,
         #screen_3 {
-            height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+            height: var(--layout-screen-height);
             padding-top: max(4dvh - 6.75dvmin, 0px);
             grid-template-rows: repeat(3, 9.5dvh);
         }
@@ -19042,7 +19056,7 @@
             display: flex;
             overflow: visible;
             align-items: center;
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             border-radius: 3dvmin;
 
             background: radial-gradient(ellipse at 42% -18%, hsl(var(--white) / 0.78), transparent 60%),
@@ -19057,7 +19071,7 @@
             overflow: hidden;
             align-items: center;
             justify-content: center;
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
             transition: all 0.18s;
             border-radius: 3dvmin;
         }
@@ -19396,7 +19410,7 @@
 
         #load {
             width: max(32dvw, 45dvmin);
-            height: calc(min(12dvmin, 7dvh) + 37dvmin + 2dvh);
+            height: calc(var(--layout-action-height) + 37dvmin + 2dvh);
             border-radius: 3dvmin;
 
             /* 启用背景色，使用定义的局部变量 */
@@ -19538,7 +19552,7 @@
             align-items: center;
             justify-content: center;
             width: 100dvw;
-            height: 6.5dvh;
+            height: var(--layout-bar-height);
         }
 
         #print_close,
@@ -19547,7 +19561,7 @@
             align-items: center;
             justify-content: center;
             width: max(25dvw, 35dvmin);
-            height: min(12dvmin, 7dvh);
+            height: var(--layout-action-height);
             margin: 0.5dvh auto auto;
             transition: all 0.2s ease;
             border-radius: 2.5dvmin;
@@ -19578,14 +19592,14 @@
         /* print_content 部分 */
 
         #print_content {
-            width: 99dvw;
-            height: calc(92.5dvh - min(12dvmin, 7dvh));
+            width: var(--layout-print-content-width);
+            height: var(--layout-print-content-height);
             margin-left: 1dvw;
         }
 
         #print_content > div {
-            width: 99dvw;
-            height: calc(92.5dvh - min(12dvmin, 7dvh));
+            width: var(--layout-print-content-width);
+            height: var(--layout-print-content-height);
         }
 
         #print_content > div > div:not(.NotPrintDefault),
@@ -19593,8 +19607,8 @@
             display: flex;
             align-items: center;
             justify-content: left;
-            width: 98dvw;
-            height: min(7.5dvh, 9dvmin);
+            width: var(--layout-print-row-width);
+            height: var(--layout-content-row-height);
         }
 
         #print_content > div:not(#print_content_2) div > p:first-of-type {
@@ -19606,14 +19620,14 @@
         }
 
         .MultipleLines {
-            width: 98dvw;
+            width: var(--layout-print-row-width);
         }
 
         .MultipleLines > div {
             width: -moz-max-content;
             width: max-content;
 
-            height: min(7.5dvh, 9dvmin);
+            height: var(--layout-content-row-height);
         }
 
         #print_content_1 > div:nth-child(7),
@@ -19675,7 +19689,7 @@
             display: grid;
             align-items: center;
             width: 100%;
-            height: min(12dvmin, 7dvh);
+            height: var(--layout-action-height);
             margin: auto;
             grid-column: 1 / -1;
             grid-template-columns: subgrid;
@@ -19697,7 +19711,7 @@
             top: 50%;
             left: 50%;
             width: max(85dvmin, 68dvw);
-            height: min(12dvmin, 7dvh);
+            height: var(--layout-action-height);
             transition: all 0.3s ease;
             transform: translate(-50%, -50%);
             border-radius: 2.5dvmin;
@@ -19822,7 +19836,7 @@
 
         #export {
             display: grid;
-            width: 98dvw;
+            width: var(--layout-print-row-width);
             height: min(13dvmin, 10dvh);
             border-bottom: 0.5dvmin solid hsl(var(--shadow-grey-2));
             gap: 0;
@@ -19868,7 +19882,7 @@
             position: relative;
             display: flex;
             justify-content: center;
-            width: 98dvw;
+            width: var(--layout-print-row-width);
             height: min(calc(8dvh + 0.5dvmin), 11.5dvmin);
             margin-top: 1dvmin;
         }
@@ -19978,7 +19992,7 @@
 
         #statistics_results {
             overflow: hidden;
-            width: 98dvw;
+            width: var(--layout-print-row-width);
             margin-top: 1dvmin;
         }
 
@@ -19991,7 +20005,7 @@
         }
 
         #statistics_results_window > div {
-            width: 98dvw;
+            width: var(--layout-print-row-width);
         }
 
         #statistics_results_window.ResultX {
@@ -20008,8 +20022,8 @@
 
         #print_content_2 div.Lines {
             z-index: 1;
-            top: 6.5dvh;
-            height: calc(92.5dvh - min(12dvmin, 7dvh));
+            top: var(--layout-bar-height);
+            height: var(--layout-print-content-height);
             border-radius: 100dvmax;
         }
 
@@ -20034,7 +20048,7 @@
         #print_content_2:not(.TwoFunc) #print_grid_line_error {
             top: 7.5dvh;
             left: calc((199dvw - 0.5dvmin) / 3);
-            height: calc(85dvh - min(12dvmin, 7dvh));
+            height: calc(85dvh - var(--layout-action-height));
         }
 
         #print_content_2.TwoFunc :is(#print_content_2_head,
@@ -20050,13 +20064,13 @@
         #print_content_2_head,
         #print_content_2_inner > div {
             display: grid;
-            width: 98dvw;
+            width: var(--layout-print-row-width);
             gap: 0.5dvmin;
         }
 
         #print_content_2_head {
-            height: 7dvh;
-            grid-template-rows: 7dvh;
+            height: var(--layout-print-header-height);
+            grid-template-rows: var(--layout-print-header-height);
         }
 
         #print_content_2_head > div {
@@ -20064,12 +20078,12 @@
         }
 
         #print_content_2_inner {
-            width: 99dvw;
-            height: calc(85.5dvh - min(12dvmin, 7dvh));
+            width: var(--layout-print-content-width);
+            height: calc(85.5dvh - var(--layout-action-height));
         }
 
         #print_content_2_inner > div {
-            grid-template-rows: min(7.5dvh, 9dvmin);
+            grid-template-rows: var(--layout-content-row-height);
         }
 
         #print_content_2_inner > div > div {
@@ -20078,7 +20092,7 @@
         }
 
         #print_content_2_inner > div > div > div {
-            height: min(7.5dvh, 9dvmin);
+            height: var(--layout-content-row-height);
         }
 
         #print_content_2_inner > div.Odd,
@@ -20096,13 +20110,13 @@
         #print_content_2_error {
             position: absolute;
             z-index: 2;
-            top: 6.5dvh;
+            top: var(--layout-bar-height);
             left: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             width: 100dvw;
-            height: calc(92.5dvh - min(12dvmin, 7dvh));
+            height: var(--layout-print-content-height);
         }
 
         #number_table_error {
@@ -20139,9 +20153,9 @@
         #setting {
             position: absolute;
             z-index: 4;
-            top: 6.5dvh;
+            top: var(--layout-bar-height);
             overflow: hidden;
-            width: min(65dvw, 90dvmin);
+            width: var(--layout-setting-width);
             height: 93.5dvh;
             transition: all 0.3s ease;
             border-radius: 0 2.5dvmin 2.5dvmin 0;
@@ -20392,7 +20406,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            width: min(65dvw, 90dvmin);
+            width: var(--layout-setting-width);
             height: 6dvh;
         }
 
@@ -20405,10 +20419,10 @@
         .SettingSelection {
             display: grid;
             overflow: hidden;
-            width: min(65dvw, 90dvmin);
+            width: var(--layout-setting-width);
             border-bottom: var(--setting-divider-border);
             gap: 0;
-            grid-template-columns: min(65dvw, 90dvmin);
+            grid-template-columns: var(--layout-setting-width);
         }
 
         .SettingSelection > div {
@@ -20452,7 +20466,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            width: min(65dvw, 90dvmin);
+            width: var(--layout-setting-width);
             height: calc(7.5dvh + 0.5dvmin);
             border-bottom: var(--setting-divider-border);
             background: linear-gradient(155deg, hsl(var(--white) / 0.68), hsl(var(--surface-base) / 0.96) 58%, hsl(var(--shadow-grey-2) / 0.14));
@@ -20479,7 +20493,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            width: min(65dvw, 90dvmin);
+            width: var(--layout-setting-width);
             height: calc(7.5dvh - 1.5dvmin);
         }
 
@@ -20489,7 +20503,7 @@
             position: absolute;
             z-index: 4;
             overflow: hidden;
-            width: min(90dvw, 100dvmin);
+            width: var(--layout-explain-width);
             height: 80dvh;
             transition: all 0.5s ease;
             border-radius: 3.5dvmin;
@@ -20497,14 +20511,14 @@
 
         #explain.ExplainNotShow {
             top: -36.75dvh;
-            left: calc(calc(100dvw - max(3.5dvw, 5dvmin)) - min(45dvw, 50dvmin));
+            left: calc(calc(100dvw - max(3.5dvw, 5dvmin)) - var(--layout-explain-half-width));
             transform: scale(0);
             opacity: 0.86;
         }
 
         #explain:not(.ExplainNotShow) {
             top: 10dvh;
-            left: calc(50dvw - min(45dvw, 50dvmin));
+            left: calc(50dvw - var(--layout-explain-half-width));
 
             background: linear-gradient(145deg, hsl(var(--white) / 0.7), hsl(var(--explain-panel) / 0.94) 46%, hsl(var(--shadow-grey-3) / 0.22)),
             hsl(var(--explain-panel));
@@ -20523,8 +20537,8 @@
             display: flex;
             align-items: center;
             justify-content: left;
-            width: min(90dvw, 100dvmin);
-            height: 7dvh;
+            width: var(--layout-explain-width);
+            height: var(--layout-explain-bar-height);
 
             background: linear-gradient(155deg, hsl(var(--white) / 0.8), hsl(var(--explain-panel) / 0.72) 50%, hsl(var(--shadow-grey-2) / 0.16));
             box-shadow: inset 0.22dvmin 0.26dvmin 0.52dvmin hsl(var(--white) / 0.94),
@@ -20536,8 +20550,8 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            width: calc(min(90dvw, 100dvmin) - 8dvw);
-            height: 7dvh;
+            width: calc(var(--layout-explain-width) - 8dvw);
+            height: var(--layout-explain-bar-height);
         }
 
         #explain_close {
@@ -20545,7 +20559,7 @@
             align-items: center;
             justify-content: center;
             width: 8dvw;
-            height: 7dvh;
+            height: var(--layout-explain-bar-height);
             cursor: pointer;
             transition: all 0.3s ease;
         }
@@ -20583,7 +20597,7 @@
         /* explain_content 部分 */
 
         #explain_content {
-            width: min(90dvw, 100dvmin);
+            width: var(--layout-explain-width);
             height: 73dvh;
             padding-top: 1dvmin;
             border-top: 0.5dvmin dashed hsl(var(--shadow-grey-2));
@@ -20607,7 +20621,7 @@
 
         #explain_content > div:not(.Lines) {
             justify-content: center;
-            height: min(7.5dvh, 9dvmin);
+            height: var(--layout-content-row-height);
             margin: 1dvmin auto;
         }
 

From 0aa64660111e7e2d199baaf4e909f9d8d43090da Mon Sep 17 00:00:00 2001
From: Double-Cloth <Double-Cloth@outlook.com>
Date: Mon, 13 Jul 2026 10:17:14 +0800
Subject: [PATCH 2/2] build

---
 src/css/style.css | 130 +++++++++++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 58 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index dab52f3..fef74cf 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -4,6 +4,20 @@
     /* 强制声明页面只支持浅色模式 */
     color-scheme: light;
 
+    /* 复用样式 */
+    --layout-bar-height: 6.5dvh;
+    --layout-screen-height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+    --layout-action-height: min(12dvmin, 7dvh);
+    --layout-print-content-width: 99dvw;
+    --layout-print-row-width: 98dvw;
+    --layout-print-content-height: calc(92.5dvh - var(--layout-action-height));
+    --layout-content-row-height: min(7.5dvh, 9dvmin);
+    --layout-print-header-height: 7dvh;
+    --layout-setting-width: min(65dvw, 90dvmin);
+    --layout-explain-width: min(90dvw, 100dvmin);
+    --layout-explain-half-width: min(45dvw, 50dvmin);
+    --layout-explain-bar-height: 7dvh;
+
     /* 基础中性色 */
     --white: 0 0% 100%;
     --black: 0 0% 0%;
@@ -336,7 +350,7 @@ p {
     align-items: center;
     justify-content: center;
     width: max(7dvw, 10dvmin);
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     transition: background 0.13s ease-out,
     box-shadow 0.13s ease-out;
     border-radius: 2.5dvmin;
@@ -367,7 +381,7 @@ p {
     display: flex;
     overflow: visible;
     width: 100dvw;
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     border-radius: 0 0 2.5dvmin 2.5dvmin;
 
     background: linear-gradient(145deg, hsl(var(--white) / 0.46), hsl(var(--white) / 0.1) 42%, hsl(var(--black) / 0.07)),
@@ -387,7 +401,7 @@ p {
     align-items: center;
     justify-content: center;
     width: calc(100dvw - max(14dvw, 20dvmin));
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     transition: all 0.24s ease;
 }
 
@@ -397,7 +411,7 @@ p {
 
 #head_inputs {
     width: calc(99.4dvw - max(14dvw, 20dvmin));
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     margin-left: 0.6dvw;
 }
 
@@ -413,7 +427,7 @@ p {
 
 #screen_title {
     width: 100dvw;
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     border-bottom: 0.5dvmin solid hsl(var(--line-teal));
     background-color: transparent;
 }
@@ -443,7 +457,7 @@ p {
     align-items: center;
     justify-content: right;
     width: calc(min(7.5dvh, 12dvmin) + 0.55dvw);
-    height: calc(6.5dvh - 0.5dvmin);
+    height: calc(var(--layout-bar-height) - 0.5dvmin);
 }
 
 #back_btn {
@@ -497,7 +511,7 @@ p {
 
 .ScreenMain {
     width: 100dvw;
-    height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+    height: var(--layout-screen-height);
 
     background-color: hsl(var(--page-background));
     box-shadow: inset 0 0 0 0.12dvmin hsl(var(--shadow-grey-1) / 0.18),
@@ -549,7 +563,7 @@ p {
 
 #screen_1 > div.Lines {
     z-index: 1;
-    height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+    height: var(--layout-screen-height);
 }
 
 #screen_1 > div.Lines:first-child {
@@ -721,7 +735,7 @@ p {
 
 #screen_2_0,
 #screen_4 {
-    height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+    height: var(--layout-screen-height);
     padding-top: calc(7.25dvh - min(4dvh, 6.75dvmin));
 }
 
@@ -735,7 +749,7 @@ p {
 
 #screen_2_1,
 #screen_3 {
-    height: calc(36.5dvh - min(8dvh, 13.5dvmin));
+    height: var(--layout-screen-height);
     padding-top: max(4dvh - 6.75dvmin, 0px);
     grid-template-rows: repeat(3, 9.5dvh);
 }
@@ -975,7 +989,7 @@ p {
     display: flex;
     overflow: visible;
     align-items: center;
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     border-radius: 3dvmin;
 
     background: radial-gradient(ellipse at 42% -18%, hsl(var(--white) / 0.78), transparent 60%),
@@ -990,7 +1004,7 @@ p {
     overflow: hidden;
     align-items: center;
     justify-content: center;
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
     transition: all 0.18s;
     border-radius: 3dvmin;
 }
@@ -1329,7 +1343,7 @@ p {
 
 #load {
     width: max(32dvw, 45dvmin);
-    height: calc(min(12dvmin, 7dvh) + 37dvmin + 2dvh);
+    height: calc(var(--layout-action-height) + 37dvmin + 2dvh);
     border-radius: 3dvmin;
 
     /* 启用背景色，使用定义的局部变量 */
@@ -1471,7 +1485,7 @@ p {
     align-items: center;
     justify-content: center;
     width: 100dvw;
-    height: 6.5dvh;
+    height: var(--layout-bar-height);
 }
 
 #print_close,
@@ -1480,7 +1494,7 @@ p {
     align-items: center;
     justify-content: center;
     width: max(25dvw, 35dvmin);
-    height: min(12dvmin, 7dvh);
+    height: var(--layout-action-height);
     margin: 0.5dvh auto auto;
     transition: all 0.2s ease;
     border-radius: 2.5dvmin;
@@ -1511,14 +1525,14 @@ p {
 /* print_content 部分 */
 
 #print_content {
-    width: 99dvw;
-    height: calc(92.5dvh - min(12dvmin, 7dvh));
+    width: var(--layout-print-content-width);
+    height: var(--layout-print-content-height);
     margin-left: 1dvw;
 }
 
 #print_content > div {
-    width: 99dvw;
-    height: calc(92.5dvh - min(12dvmin, 7dvh));
+    width: var(--layout-print-content-width);
+    height: var(--layout-print-content-height);
 }
 
 #print_content > div > div:not(.NotPrintDefault),
@@ -1526,8 +1540,8 @@ p {
     display: flex;
     align-items: center;
     justify-content: left;
-    width: 98dvw;
-    height: min(7.5dvh, 9dvmin);
+    width: var(--layout-print-row-width);
+    height: var(--layout-content-row-height);
 }
 
 #print_content > div:not(#print_content_2) div > p:first-of-type {
@@ -1539,14 +1553,14 @@ p {
 }
 
 .MultipleLines {
-    width: 98dvw;
+    width: var(--layout-print-row-width);
 }
 
 .MultipleLines > div {
     width: -moz-max-content;
     width: max-content;
 
-    height: min(7.5dvh, 9dvmin);
+    height: var(--layout-content-row-height);
 }
 
 #print_content_1 > div:nth-child(7),
@@ -1608,7 +1622,7 @@ p {
     display: grid;
     align-items: center;
     width: 100%;
-    height: min(12dvmin, 7dvh);
+    height: var(--layout-action-height);
     margin: auto;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
@@ -1630,7 +1644,7 @@ p {
     top: 50%;
     left: 50%;
     width: max(85dvmin, 68dvw);
-    height: min(12dvmin, 7dvh);
+    height: var(--layout-action-height);
     transition: all 0.3s ease;
     transform: translate(-50%, -50%);
     border-radius: 2.5dvmin;
@@ -1755,7 +1769,7 @@ p {
 
 #export {
     display: grid;
-    width: 98dvw;
+    width: var(--layout-print-row-width);
     height: min(13dvmin, 10dvh);
     border-bottom: 0.5dvmin solid hsl(var(--shadow-grey-2));
     gap: 0;
@@ -1801,7 +1815,7 @@ p {
     position: relative;
     display: flex;
     justify-content: center;
-    width: 98dvw;
+    width: var(--layout-print-row-width);
     height: min(calc(8dvh + 0.5dvmin), 11.5dvmin);
     margin-top: 1dvmin;
 }
@@ -1911,7 +1925,7 @@ span.Ripple.IsFadingOut {
 
 #statistics_results {
     overflow: hidden;
-    width: 98dvw;
+    width: var(--layout-print-row-width);
     margin-top: 1dvmin;
 }
 
@@ -1924,7 +1938,7 @@ span.Ripple.IsFadingOut {
 }
 
 #statistics_results_window > div {
-    width: 98dvw;
+    width: var(--layout-print-row-width);
 }
 
 #statistics_results_window.ResultX {
@@ -1941,8 +1955,8 @@ span.Ripple.IsFadingOut {
 
 #print_content_2 div.Lines {
     z-index: 1;
-    top: 6.5dvh;
-    height: calc(92.5dvh - min(12dvmin, 7dvh));
+    top: var(--layout-bar-height);
+    height: var(--layout-print-content-height);
     border-radius: 100dvmax;
 }
 
@@ -1967,7 +1981,7 @@ span.Ripple.IsFadingOut {
 #print_content_2:not(.TwoFunc) #print_grid_line_error {
     top: 7.5dvh;
     left: calc((199dvw - 0.5dvmin) / 3);
-    height: calc(85dvh - min(12dvmin, 7dvh));
+    height: calc(85dvh - var(--layout-action-height));
 }
 
 #print_content_2.TwoFunc :is(#print_content_2_head,
@@ -1983,13 +1997,13 @@ span.Ripple.IsFadingOut {
 #print_content_2_head,
 #print_content_2_inner > div {
     display: grid;
-    width: 98dvw;
+    width: var(--layout-print-row-width);
     gap: 0.5dvmin;
 }
 
 #print_content_2_head {
-    height: 7dvh;
-    grid-template-rows: 7dvh;
+    height: var(--layout-print-header-height);
+    grid-template-rows: var(--layout-print-header-height);
 }
 
 #print_content_2_head > div {
@@ -1997,12 +2011,12 @@ span.Ripple.IsFadingOut {
 }
 
 #print_content_2_inner {
-    width: 99dvw;
-    height: calc(85.5dvh - min(12dvmin, 7dvh));
+    width: var(--layout-print-content-width);
+    height: calc(85.5dvh - var(--layout-action-height));
 }
 
 #print_content_2_inner > div {
-    grid-template-rows: min(7.5dvh, 9dvmin);
+    grid-template-rows: var(--layout-content-row-height);
 }
 
 #print_content_2_inner > div > div {
@@ -2011,7 +2025,7 @@ span.Ripple.IsFadingOut {
 }
 
 #print_content_2_inner > div > div > div {
-    height: min(7.5dvh, 9dvmin);
+    height: var(--layout-content-row-height);
 }
 
 #print_content_2_inner > div.Odd,
@@ -2029,13 +2043,13 @@ span.Ripple.IsFadingOut {
 #print_content_2_error {
     position: absolute;
     z-index: 2;
-    top: 6.5dvh;
+    top: var(--layout-bar-height);
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100dvw;
-    height: calc(92.5dvh - min(12dvmin, 7dvh));
+    height: var(--layout-print-content-height);
 }
 
 #number_table_error {
@@ -2072,9 +2086,9 @@ span.Ripple.IsFadingOut {
 #setting {
     position: absolute;
     z-index: 4;
-    top: 6.5dvh;
+    top: var(--layout-bar-height);
     overflow: hidden;
-    width: min(65dvw, 90dvmin);
+    width: var(--layout-setting-width);
     height: 93.5dvh;
     transition: all 0.3s ease;
     border-radius: 0 2.5dvmin 2.5dvmin 0;
@@ -2325,7 +2339,7 @@ span.Ripple.IsFadingOut {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: min(65dvw, 90dvmin);
+    width: var(--layout-setting-width);
     height: 6dvh;
 }
 
@@ -2338,10 +2352,10 @@ span.Ripple.IsFadingOut {
 .SettingSelection {
     display: grid;
     overflow: hidden;
-    width: min(65dvw, 90dvmin);
+    width: var(--layout-setting-width);
     border-bottom: var(--setting-divider-border);
     gap: 0;
-    grid-template-columns: min(65dvw, 90dvmin);
+    grid-template-columns: var(--layout-setting-width);
 }
 
 .SettingSelection > div {
@@ -2385,7 +2399,7 @@ span.Ripple.IsFadingOut {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: min(65dvw, 90dvmin);
+    width: var(--layout-setting-width);
     height: calc(7.5dvh + 0.5dvmin);
     border-bottom: var(--setting-divider-border);
     background: linear-gradient(155deg, hsl(var(--white) / 0.68), hsl(var(--surface-base) / 0.96) 58%, hsl(var(--shadow-grey-2) / 0.14));
@@ -2412,7 +2426,7 @@ span.Ripple.IsFadingOut {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: min(65dvw, 90dvmin);
+    width: var(--layout-setting-width);
     height: calc(7.5dvh - 1.5dvmin);
 }
 
@@ -2422,7 +2436,7 @@ span.Ripple.IsFadingOut {
     position: absolute;
     z-index: 4;
     overflow: hidden;
-    width: min(90dvw, 100dvmin);
+    width: var(--layout-explain-width);
     height: 80dvh;
     transition: all 0.5s ease;
     border-radius: 3.5dvmin;
@@ -2430,14 +2444,14 @@ span.Ripple.IsFadingOut {
 
 #explain.ExplainNotShow {
     top: -36.75dvh;
-    left: calc(calc(100dvw - max(3.5dvw, 5dvmin)) - min(45dvw, 50dvmin));
+    left: calc(calc(100dvw - max(3.5dvw, 5dvmin)) - var(--layout-explain-half-width));
     transform: scale(0);
     opacity: 0.86;
 }
 
 #explain:not(.ExplainNotShow) {
     top: 10dvh;
-    left: calc(50dvw - min(45dvw, 50dvmin));
+    left: calc(50dvw - var(--layout-explain-half-width));
 
     background: linear-gradient(145deg, hsl(var(--white) / 0.7), hsl(var(--explain-panel) / 0.94) 46%, hsl(var(--shadow-grey-3) / 0.22)),
     hsl(var(--explain-panel));
@@ -2456,8 +2470,8 @@ span.Ripple.IsFadingOut {
     display: flex;
     align-items: center;
     justify-content: left;
-    width: min(90dvw, 100dvmin);
-    height: 7dvh;
+    width: var(--layout-explain-width);
+    height: var(--layout-explain-bar-height);
 
     background: linear-gradient(155deg, hsl(var(--white) / 0.8), hsl(var(--explain-panel) / 0.72) 50%, hsl(var(--shadow-grey-2) / 0.16));
     box-shadow: inset 0.22dvmin 0.26dvmin 0.52dvmin hsl(var(--white) / 0.94),
@@ -2469,8 +2483,8 @@ span.Ripple.IsFadingOut {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(min(90dvw, 100dvmin) - 8dvw);
-    height: 7dvh;
+    width: calc(var(--layout-explain-width) - 8dvw);
+    height: var(--layout-explain-bar-height);
 }
 
 #explain_close {
@@ -2478,7 +2492,7 @@ span.Ripple.IsFadingOut {
     align-items: center;
     justify-content: center;
     width: 8dvw;
-    height: 7dvh;
+    height: var(--layout-explain-bar-height);
     cursor: pointer;
     transition: all 0.3s ease;
 }
@@ -2516,7 +2530,7 @@ span.Ripple.IsFadingOut {
 /* explain_content 部分 */
 
 #explain_content {
-    width: min(90dvw, 100dvmin);
+    width: var(--layout-explain-width);
     height: 73dvh;
     padding-top: 1dvmin;
     border-top: 0.5dvmin dashed hsl(var(--shadow-grey-2));
@@ -2540,7 +2554,7 @@ span.Ripple.IsFadingOut {
 
 #explain_content > div:not(.Lines) {
     justify-content: center;
-    height: min(7.5dvh, 9dvmin);
+    height: var(--layout-content-row-height);
     margin: 1dvmin auto;
 }