3.0 update

- adds pastel palette
- updates color syntax
- updates docs
- adds dsgn. banner

8 files changed, 2967 insertions, 330 deletions

diff --git a/demo/asset/style/uchu-pastel-reduced.css b/demo/asset/style/uchu-pastel-reduced.css
new file mode 100644
index 0000000..2733545
--- /dev/null
+++ b/demo/asset/style/uchu-pastel-reduced.css
@@ -0,0 +1,56 @@
+/* Generated from src/index.ts — do not edit by hand */
+
+:root {
+  --uchu-light-blue-raw: 0.8966 0.046 260.67;
+  --uchu-light-blue: oklch(0.9 0.028 261);
+  --uchu-blue-raw: 0.8017 0.091 258.88;
+  --uchu-blue: oklch(0.6 0.096 259);
+  --uchu-dark-blue-raw: 0.7094 0.136 258.06;
+  --uchu-dark-blue: oklch(0.41 0.096 262);
+  --uchu-light-gray-raw: 0.9557 0.003 286.35;
+  --uchu-light-gray: oklch(0.96 0.004 287);
+  --uchu-gray-raw: 0.9204 0.002 197.12;
+  --uchu-gray: oklch(0.85 0.004 195);
+  --uchu-dark-gray-raw: 0.8828 0.003 286.34;
+  --uchu-dark-gray: oklch(0.63 0.004 215);
+  --uchu-light-green-raw: 0.9396 0.05 148.74;
+  --uchu-light-green: oklch(0.94 0.032 149);
+  --uchu-green-raw: 0.8877 0.096 147.71;
+  --uchu-green: oklch(0.78 0.1 146);
+  --uchu-dark-green-raw: 0.8374 0.139 146.57;
+  --uchu-dark-green: oklch(0.57 0.088 146);
+  --uchu-light-orange-raw: 0.9383 0.037 56.93;
+  --uchu-light-orange: oklch(0.94 0.02 55);
+  --uchu-orange-raw: 0.8837 0.072 55.8;
+  --uchu-orange: oklch(0.78 0.076 55);
+  --uchu-dark-orange-raw: 0.8356 0.107 56.49;
+  --uchu-dark-orange: oklch(0.57 0.068 54);
+  --uchu-light-pink-raw: 0.958 0.023 354.27;
+  --uchu-light-pink: oklch(0.96 0.016 353);
+  --uchu-pink-raw: 0.9214 0.046 352.31;
+  --uchu-pink: oklch(0.85 0.048 353);
+  --uchu-dark-pink-raw: 0.889 0.066 354.39;
+  --uchu-dark-pink: oklch(0.64 0.044 354);
+  --uchu-light-purple-raw: 0.891 0.046 305.24;
+  --uchu-light-purple: oklch(0.89 0.028 304);
+  --uchu-purple-raw: 0.7868 0.091 305;
+  --uchu-purple: oklch(0.57 0.1 304);
+  --uchu-dark-purple-raw: 0.685 0.136 303.78;
+  --uchu-dark-purple: oklch(0.37 0.1 303);
+  --uchu-light-red-raw: 0.8898 0.052 3.28;
+  --uchu-light-red: oklch(0.89 0.032 2);
+  --uchu-red-raw: 0.7878 0.109 4.54;
+  --uchu-red: oklch(0.59 0.12 8);
+  --uchu-dark-red-raw: 0.6986 0.162 7.82;
+  --uchu-dark-red: oklch(0.41 0.104 12);
+  --uchu-light-yellow-raw: 0.9705 0.039 91.2;
+  --uchu-light-yellow: oklch(0.97 0.024 94);
+  --uchu-yellow-raw: 0.95 0.07 92.39;
+  --uchu-yellow: oklch(0.9 0.068 91);
+  --uchu-dark-yellow-raw: 0.9276 0.098 92.58;
+  --uchu-dark-yellow: oklch(0.69 0.064 91);
+  --uchu-light-yin-raw: 0.9187 0.003 264.54;
+  --uchu-light-yin: oklch(0.9187 0.003 264.54);
+  --uchu-yang: oklch(0.994 0 0);
+  --uchu-yin: oklch(0.1438 0.007 256.88);
+}
diff --git a/demo/asset/style/uchu-pastel.css b/demo/asset/style/uchu-pastel.css
new file mode 100644
index 0000000..836d370
--- /dev/null
+++ b/demo/asset/style/uchu-pastel.css
@@ -0,0 +1,168 @@
+/* Generated from src/colors.ts — do not edit by hand */
+
+:root {
+  --uchu-blue-1-raw: 0.8966 0.046 260.67;
+  --uchu-blue-1: oklch(0.9 0.028 261);
+  --uchu-blue-2-raw: 0.8017 0.091 258.88;
+  --uchu-blue-2: oklch(0.8 0.048 260);
+  --uchu-blue-3-raw: 0.7094 0.136 258.06;
+  --uchu-blue-3: oklch(0.7 0.072 259);
+  --uchu-blue-4-raw: 0.6239 0.181 258.33;
+  --uchu-blue-4: oklch(0.6 0.096 259);
+  --uchu-blue-5-raw: 0.5487 0.222 260.33;
+  --uchu-blue-5: oklch(0.51 0.124 262);
+  --uchu-blue-6-raw: 0.5115 0.204 260.17;
+  --uchu-blue-6: oklch(0.48 0.112 261);
+  --uchu-blue-7-raw: 0.4736 0.185 259.89;
+  --uchu-blue-7: oklch(0.44 0.1 261);
+  --uchu-blue-8-raw: 0.4348 0.17 260.2;
+  --uchu-blue-8: oklch(0.41 0.096 262);
+  --uchu-blue-9-raw: 0.3953 0.15 259.87;
+  --uchu-blue-9: oklch(0.37 0.084 261);
+  --uchu-gray-1-raw: 0.9557 0.003 286.35;
+  --uchu-gray-1: oklch(0.96 0.004 287);
+  --uchu-gray-2-raw: 0.9204 0.002 197.12;
+  --uchu-gray-2: oklch(0.92 0.004 195);
+  --uchu-gray-3-raw: 0.8828 0.003 286.34;
+  --uchu-gray-3: oklch(0.88 0.004 287);
+  --uchu-gray-4-raw: 0.8468 0.002 197.12;
+  --uchu-gray-4: oklch(0.85 0.004 195);
+  --uchu-gray-5-raw: 0.8073 0.002 247.84;
+  --uchu-gray-5: oklch(0.81 0.004 243);
+  --uchu-gray-6-raw: 0.7503 0.002 247.85;
+  --uchu-gray-6: oklch(0.75 0.004 245);
+  --uchu-gray-7-raw: 0.6901 0.003 286.32;
+  --uchu-gray-7: oklch(0.69 0.008 286);
+  --uchu-gray-8-raw: 0.6312 0.004 219.55;
+  --uchu-gray-8: oklch(0.63 0.004 215);
+  --uchu-gray-9-raw: 0.5682 0.004 247.89;
+  --uchu-gray-9: oklch(0.57 0.004 269);
+  --uchu-green-1-raw: 0.9396 0.05 148.74;
+  --uchu-green-1: oklch(0.94 0.032 149);
+  --uchu-green-2-raw: 0.8877 0.096 147.71;
+  --uchu-green-2: oklch(0.88 0.056 148);
+  --uchu-green-3-raw: 0.8374 0.139 146.57;
+  --uchu-green-3: oklch(0.83 0.076 147);
+  --uchu-green-4-raw: 0.7933 0.179 145.62;
+  --uchu-green-4: oklch(0.78 0.1 146);
+  --uchu-green-5-raw: 0.7523 0.209 144.64;
+  --uchu-green-5: oklch(0.73 0.116 145);
+  --uchu-green-6-raw: 0.7003 0.194 144.71;
+  --uchu-green-6: oklch(0.68 0.108 145);
+  --uchu-green-7-raw: 0.6424 0.175 144.92;
+  --uchu-green-7: oklch(0.63 0.1 145);
+  --uchu-green-8-raw: 0.5883 0.158 145.05;
+  --uchu-green-8: oklch(0.57 0.088 146);
+  --uchu-green-9-raw: 0.5277 0.138 145.41;
+  --uchu-green-9: oklch(0.51 0.08 146);
+  --uchu-orange-1-raw: 0.9383 0.037 56.93;
+  --uchu-orange-1: oklch(0.94 0.02 55);
+  --uchu-orange-2-raw: 0.8837 0.072 55.8;
+  --uchu-orange-2: oklch(0.88 0.04 56);
+  --uchu-orange-3-raw: 0.8356 0.107 56.49;
+  --uchu-orange-3: oklch(0.83 0.056 57);
+  --uchu-orange-4-raw: 0.7875 0.141 54.32;
+  --uchu-orange-4: oklch(0.78 0.076 55);
+  --uchu-orange-5-raw: 0.7461 0.171 51.56;
+  --uchu-orange-5: oklch(0.73 0.092 53);
+  --uchu-orange-6-raw: 0.6933 0.157 52.18;
+  --uchu-orange-6: oklch(0.68 0.084 54);
+  --uchu-orange-7-raw: 0.638 0.142 52.1;
+  --uchu-orange-7: oklch(0.62 0.076 54);
+  --uchu-orange-8-raw: 0.5828 0.128 52.2;
+  --uchu-orange-8: oklch(0.57 0.068 54);
+  --uchu-orange-9-raw: 0.5249 0.113 51.98;
+  --uchu-orange-9: oklch(0.51 0.06 53);
+  --uchu-pink-1-raw: 0.958 0.023 354.27;
+  --uchu-pink-1: oklch(0.96 0.016 353);
+  --uchu-pink-2-raw: 0.9214 0.046 352.31;
+  --uchu-pink-2: oklch(0.92 0.028 351);
+  --uchu-pink-3-raw: 0.889 0.066 354.39;
+  --uchu-pink-3: oklch(0.89 0.036 355);
+  --uchu-pink-4-raw: 0.8543 0.09 354.1;
+  --uchu-pink-4: oklch(0.85 0.048 353);
+  --uchu-pink-5-raw: 0.8223 0.112 355.33;
+  --uchu-pink-5: oklch(0.82 0.06 354);
+  --uchu-pink-6-raw: 0.7637 0.101 355.37;
+  --uchu-pink-6: oklch(0.76 0.056 354);
+  --uchu-pink-7-raw: 0.7023 0.092 354.96;
+  --uchu-pink-7: oklch(0.7 0.048 355);
+  --uchu-pink-8-raw: 0.6411 0.084 353.91;
+  --uchu-pink-8: oklch(0.64 0.044 354);
+  --uchu-pink-9-raw: 0.5768 0.074 353.14;
+  --uchu-pink-9: oklch(0.58 0.04 353);
+  --uchu-purple-1-raw: 0.891 0.046 305.24;
+  --uchu-purple-1: oklch(0.89 0.028 304);
+  --uchu-purple-2-raw: 0.7868 0.091 305;
+  --uchu-purple-2: oklch(0.79 0.052 307);
+  --uchu-purple-3-raw: 0.685 0.136 303.78;
+  --uchu-purple-3: oklch(0.68 0.072 305);
+  --uchu-purple-4-raw: 0.5847 0.181 302.06;
+  --uchu-purple-4: oklch(0.57 0.1 304);
+  --uchu-purple-5-raw: 0.4939 0.215 298.31;
+  --uchu-purple-5: oklch(0.46 0.128 303);
+  --uchu-purple-6-raw: 0.4611 0.198 298.4;
+  --uchu-purple-6: oklch(0.43 0.116 303);
+  --uchu-purple-7-raw: 0.4277 0.181 298.49;
+  --uchu-purple-7: oklch(0.4 0.108 302);
+  --uchu-purple-8-raw: 0.3946 0.164 298.29;
+  --uchu-purple-8: oklch(0.37 0.1 303);
+  --uchu-purple-9-raw: 0.3601 0.145 298.35;
+  --uchu-purple-9: oklch(0.34 0.084 302);
+  --uchu-red-1-raw: 0.8898 0.052 3.28;
+  --uchu-red-1: oklch(0.89 0.032 2);
+  --uchu-red-2-raw: 0.7878 0.109 4.54;
+  --uchu-red-2: oklch(0.78 0.06 3);
+  --uchu-red-3-raw: 0.6986 0.162 7.82;
+  --uchu-red-3: oklch(0.68 0.088 5);
+  --uchu-red-4-raw: 0.6273 0.209 12.37;
+  --uchu-red-4: oklch(0.59 0.12 8);
+  --uchu-red-5-raw: 0.5863 0.231 19.6;
+  --uchu-red-5: oklch(0.52 0.136 14);
+  --uchu-red-6-raw: 0.5441 0.214 19.06;
+  --uchu-red-6: oklch(0.49 0.128 13);
+  --uchu-red-7-raw: 0.4995 0.195 18.34;
+  --uchu-red-7: oklch(0.45 0.116 13);
+  --uchu-red-8-raw: 0.458 0.177 17.7;
+  --uchu-red-8: oklch(0.41 0.104 12);
+  --uchu-red-9-raw: 0.4117 0.157 16.58;
+  --uchu-red-9: oklch(0.37 0.092 11);
+  --uchu-yellow-1-raw: 0.9705 0.039 91.2;
+  --uchu-yellow-1: oklch(0.97 0.024 94);
+  --uchu-yellow-2-raw: 0.95 0.07 92.39;
+  --uchu-yellow-2: oklch(0.95 0.036 92);
+  --uchu-yellow-3-raw: 0.9276 0.098 92.58;
+  --uchu-yellow-3: oklch(0.92 0.052 92);
+  --uchu-yellow-4-raw: 0.9092 0.125 92.56;
+  --uchu-yellow-4: oklch(0.9 0.068 91);
+  --uchu-yellow-5-raw: 0.89 0.146 91.5;
+  --uchu-yellow-5: oklch(0.88 0.084 92);
+  --uchu-yellow-6-raw: 0.8239 0.133 91.5;
+  --uchu-yellow-6: oklch(0.82 0.076 92);
+  --uchu-yellow-7-raw: 0.7584 0.122 92.21;
+  --uchu-yellow-7: oklch(0.75 0.068 92);
+  --uchu-yellow-8-raw: 0.6914 0.109 91.04;
+  --uchu-yellow-8: oklch(0.69 0.064 91);
+  --uchu-yellow-9-raw: 0.6229 0.097 91.9;
+  --uchu-yellow-9: oklch(0.62 0.056 90);
+  --uchu-yin-1-raw: 0.9187 0.003 264.54;
+  --uchu-yin-1: oklch(0.9187 0.003 264.54);
+  --uchu-yin-2-raw: 0.8461 0.004 286.31;
+  --uchu-yin-2: oklch(0.8461 0.004 286.31);
+  --uchu-yin-3-raw: 0.7689 0.004 247.87;
+  --uchu-yin-3: oklch(0.7689 0.004 247.87);
+  --uchu-yin-4-raw: 0.6917 0.004 247.88;
+  --uchu-yin-4: oklch(0.6917 0.004 247.88);
+  --uchu-yin-5-raw: 0.6101 0.005 271.34;
+  --uchu-yin-5: oklch(0.6101 0.005 271.34);
+  --uchu-yin-6-raw: 0.5279 0.005 271.32;
+  --uchu-yin-6: oklch(0.5279 0.005 271.32);
+  --uchu-yin-7-raw: 0.4387 0.005 271.3;
+  --uchu-yin-7: oklch(0.4387 0.005 271.3);
+  --uchu-yin-8-raw: 0.3502 0.005 236.66;
+  --uchu-yin-8: oklch(0.3502 0.005 236.66);
+  --uchu-yin-9-raw: 0.2511 0.006 258.36;
+  --uchu-yin-9: oklch(0.2511 0.006 258.36);
+  --uchu-yang: oklch(0.994 0 0);
+  --uchu-yin: oklch(0.1438 0.007 256.88);
+}
diff --git a/demo/asset/style/uchu-reduced.css b/demo/asset/style/uchu-reduced.css
index 11bf87d..3fbef8d 100644
--- a/demo/asset/style/uchu-reduced.css
+++ b/demo/asset/style/uchu-reduced.css
@@ -1,56 +1,56 @@
 /* Generated from src/index.ts — do not edit by hand */
 
 :root {
-  --uchu-light-blue-raw: 89.66% 0.046 260.67;
-  --uchu-light-blue: oklch(89.66% 0.046 260.67);
-  --uchu-blue-raw: 80.17% 0.091 258.88;
-  --uchu-blue: oklch(62.39% 0.181 258.33);
-  --uchu-dark-blue-raw: 70.94% 0.136 258.06;
-  --uchu-dark-blue: oklch(43.48% 0.17 260.2);
-  --uchu-light-gray-raw: 95.57% 0.003 286.35;
-  --uchu-light-gray: oklch(95.57% 0.003 286.35);
-  --uchu-gray-raw: 92.04% 0.002 197.12;
-  --uchu-gray: oklch(84.68% 0.002 197.12);
-  --uchu-dark-gray-raw: 88.28% 0.003 286.34;
-  --uchu-dark-gray: oklch(63.12% 0.004 219.55);
-  --uchu-light-green-raw: 93.96% 0.05 148.74;
-  --uchu-light-green: oklch(93.96% 0.05 148.74);
-  --uchu-green-raw: 88.77% 0.096 147.71;
-  --uchu-green: oklch(79.33% 0.179 145.62);
-  --uchu-dark-green-raw: 83.74% 0.139 146.57;
-  --uchu-dark-green: oklch(58.83% 0.158 145.05);
-  --uchu-light-orange-raw: 93.83% 0.037 56.93;
-  --uchu-light-orange: oklch(93.83% 0.037 56.93);
-  --uchu-orange-raw: 88.37% 0.072 55.8;
-  --uchu-orange: oklch(78.75% 0.141 54.32);
-  --uchu-dark-orange-raw: 83.56% 0.107 56.49;
-  --uchu-dark-orange: oklch(58.28% 0.128 52.2);
-  --uchu-light-pink-raw: 95.8% 0.023 354.27;
-  --uchu-light-pink: oklch(95.8% 0.023 354.27);
-  --uchu-pink-raw: 92.14% 0.046 352.31;
-  --uchu-pink: oklch(85.43% 0.09 354.1);
-  --uchu-dark-pink-raw: 88.9% 0.066 354.39;
-  --uchu-dark-pink: oklch(64.11% 0.084 353.91);
-  --uchu-light-purple-raw: 89.1% 0.046 305.24;
-  --uchu-light-purple: oklch(89.1% 0.046 305.24);
-  --uchu-purple-raw: 78.68% 0.091 305;
-  --uchu-purple: oklch(58.47% 0.181 302.06);
-  --uchu-dark-purple-raw: 68.5% 0.136 303.78;
-  --uchu-dark-purple: oklch(39.46% 0.164 298.29);
-  --uchu-light-red-raw: 88.98% 0.052 3.28;
-  --uchu-light-red: oklch(88.98% 0.052 3.28);
-  --uchu-red-raw: 78.78% 0.109 4.54;
-  --uchu-red: oklch(62.73% 0.209 12.37);
-  --uchu-dark-red-raw: 69.86% 0.162 7.82;
-  --uchu-dark-red: oklch(45.8% 0.177 17.7);
-  --uchu-light-yellow-raw: 97.05% 0.039 91.2;
-  --uchu-light-yellow: oklch(97.05% 0.039 91.2);
-  --uchu-yellow-raw: 95% 0.07 92.39;
-  --uchu-yellow: oklch(90.92% 0.125 92.56);
-  --uchu-dark-yellow-raw: 92.76% 0.098 92.58;
-  --uchu-dark-yellow: oklch(69.14% 0.109 91.04);
-  --uchu-light-yin-raw: 91.87% 0.003 264.54;
-  --uchu-light-yin: oklch(91.87% 0.003 264.54);
-  --uchu-yang: oklch(99.4% 0 0);
-  --uchu-yin: oklch(14.38% 0.007 256.88);
+  --uchu-light-blue-raw: 0.8966 0.046 260.67;
+  --uchu-light-blue: oklch(0.8966 0.046 260.67);
+  --uchu-blue-raw: 0.8017 0.091 258.88;
+  --uchu-blue: oklch(0.6239 0.181 258.33);
+  --uchu-dark-blue-raw: 0.7094 0.136 258.06;
+  --uchu-dark-blue: oklch(0.4348 0.17 260.2);
+  --uchu-light-gray-raw: 0.9557 0.003 286.35;
+  --uchu-light-gray: oklch(0.9557 0.003 286.35);
+  --uchu-gray-raw: 0.9204 0.002 197.12;
+  --uchu-gray: oklch(0.8468 0.002 197.12);
+  --uchu-dark-gray-raw: 0.8828 0.003 286.34;
+  --uchu-dark-gray: oklch(0.6312 0.004 219.55);
+  --uchu-light-green-raw: 0.9396 0.05 148.74;
+  --uchu-light-green: oklch(0.9396 0.05 148.74);
+  --uchu-green-raw: 0.8877 0.096 147.71;
+  --uchu-green: oklch(0.7933 0.179 145.62);
+  --uchu-dark-green-raw: 0.8374 0.139 146.57;
+  --uchu-dark-green: oklch(0.5883 0.158 145.05);
+  --uchu-light-orange-raw: 0.9383 0.037 56.93;
+  --uchu-light-orange: oklch(0.9383 0.037 56.93);
+  --uchu-orange-raw: 0.8837 0.072 55.8;
+  --uchu-orange: oklch(0.7875 0.141 54.32);
+  --uchu-dark-orange-raw: 0.8356 0.107 56.49;
+  --uchu-dark-orange: oklch(0.5828 0.128 52.2);
+  --uchu-light-pink-raw: 0.958 0.023 354.27;
+  --uchu-light-pink: oklch(0.958 0.023 354.27);
+  --uchu-pink-raw: 0.9214 0.046 352.31;
+  --uchu-pink: oklch(0.8543 0.09 354.1);
+  --uchu-dark-pink-raw: 0.889 0.066 354.39;
+  --uchu-dark-pink: oklch(0.6411 0.084 353.91);
+  --uchu-light-purple-raw: 0.891 0.046 305.24;
+  --uchu-light-purple: oklch(0.891 0.046 305.24);
+  --uchu-purple-raw: 0.7868 0.091 305;
+  --uchu-purple: oklch(0.5847 0.181 302.06);
+  --uchu-dark-purple-raw: 0.685 0.136 303.78;
+  --uchu-dark-purple: oklch(0.3946 0.164 298.29);
+  --uchu-light-red-raw: 0.8898 0.052 3.28;
+  --uchu-light-red: oklch(0.8898 0.052 3.28);
+  --uchu-red-raw: 0.7878 0.109 4.54;
+  --uchu-red: oklch(0.6273 0.209 12.37);
+  --uchu-dark-red-raw: 0.6986 0.162 7.82;
+  --uchu-dark-red: oklch(0.458 0.177 17.7);
+  --uchu-light-yellow-raw: 0.9705 0.039 91.2;
+  --uchu-light-yellow: oklch(0.9705 0.039 91.2);
+  --uchu-yellow-raw: 0.95 0.07 92.39;
+  --uchu-yellow: oklch(0.9092 0.125 92.56);
+  --uchu-dark-yellow-raw: 0.9276 0.098 92.58;
+  --uchu-dark-yellow: oklch(0.6914 0.109 91.04);
+  --uchu-light-yin-raw: 0.9187 0.003 264.54;
+  --uchu-light-yin: oklch(0.9187 0.003 264.54);
+  --uchu-yang: oklch(0.994 0 0);
+  --uchu-yin: oklch(0.1438 0.007 256.88);
 }
diff --git a/demo/asset/style/uchu.css b/demo/asset/style/uchu.css
index d74d64e..49100b7 100644
--- a/demo/asset/style/uchu.css
+++ b/demo/asset/style/uchu.css
@@ -1,168 +1,168 @@
 /* Generated from src/colors.ts — do not edit by hand */
 
 :root {
-  --uchu-blue-1-raw: 89.66% 0.046 260.67;
-  --uchu-blue-1: oklch(89.66% 0.046 260.67);
-  --uchu-blue-2-raw: 80.17% 0.091 258.88;
-  --uchu-blue-2: oklch(80.17% 0.091 258.88);
-  --uchu-blue-3-raw: 70.94% 0.136 258.06;
-  --uchu-blue-3: oklch(70.94% 0.136 258.06);
-  --uchu-blue-4-raw: 62.39% 0.181 258.33;
-  --uchu-blue-4: oklch(62.39% 0.181 258.33);
-  --uchu-blue-5-raw: 54.87% 0.222 260.33;
-  --uchu-blue-5: oklch(54.87% 0.222 260.33);
-  --uchu-blue-6-raw: 51.15% 0.204 260.17;
-  --uchu-blue-6: oklch(51.15% 0.204 260.17);
-  --uchu-blue-7-raw: 47.36% 0.185 259.89;
-  --uchu-blue-7: oklch(47.36% 0.185 259.89);
-  --uchu-blue-8-raw: 43.48% 0.17 260.2;
-  --uchu-blue-8: oklch(43.48% 0.17 260.2);
-  --uchu-blue-9-raw: 39.53% 0.15 259.87;
-  --uchu-blue-9: oklch(39.53% 0.15 259.87);
-  --uchu-gray-1-raw: 95.57% 0.003 286.35;
-  --uchu-gray-1: oklch(95.57% 0.003 286.35);
-  --uchu-gray-2-raw: 92.04% 0.002 197.12;
-  --uchu-gray-2: oklch(92.04% 0.002 197.12);
-  --uchu-gray-3-raw: 88.28% 0.003 286.34;
-  --uchu-gray-3: oklch(88.28% 0.003 286.34);
-  --uchu-gray-4-raw: 84.68% 0.002 197.12;
-  --uchu-gray-4: oklch(84.68% 0.002 197.12);
-  --uchu-gray-5-raw: 80.73% 0.002 247.84;
-  --uchu-gray-5: oklch(80.73% 0.002 247.84);
-  --uchu-gray-6-raw: 75.03% 0.002 247.85;
-  --uchu-gray-6: oklch(75.03% 0.002 247.85);
-  --uchu-gray-7-raw: 69.01% 0.003 286.32;
-  --uchu-gray-7: oklch(69.01% 0.003 286.32);
-  --uchu-gray-8-raw: 63.12% 0.004 219.55;
-  --uchu-gray-8: oklch(63.12% 0.004 219.55);
-  --uchu-gray-9-raw: 56.82% 0.004 247.89;
-  --uchu-gray-9: oklch(56.82% 0.004 247.89);
-  --uchu-green-1-raw: 93.96% 0.05 148.74;
-  --uchu-green-1: oklch(93.96% 0.05 148.74);
-  --uchu-green-2-raw: 88.77% 0.096 147.71;
-  --uchu-green-2: oklch(88.77% 0.096 147.71);
-  --uchu-green-3-raw: 83.74% 0.139 146.57;
-  --uchu-green-3: oklch(83.74% 0.139 146.57);
-  --uchu-green-4-raw: 79.33% 0.179 145.62;
-  --uchu-green-4: oklch(79.33% 0.179 145.62);
-  --uchu-green-5-raw: 75.23% 0.209 144.64;
-  --uchu-green-5: oklch(75.23% 0.209 144.64);
-  --uchu-green-6-raw: 70.03% 0.194 144.71;
-  --uchu-green-6: oklch(70.03% 0.194 144.71);
-  --uchu-green-7-raw: 64.24% 0.175 144.92;
-  --uchu-green-7: oklch(64.24% 0.175 144.92);
-  --uchu-green-8-raw: 58.83% 0.158 145.05;
-  --uchu-green-8: oklch(58.83% 0.158 145.05);
-  --uchu-green-9-raw: 52.77% 0.138 145.41;
-  --uchu-green-9: oklch(52.77% 0.138 145.41);
-  --uchu-orange-1-raw: 93.83% 0.037 56.93;
-  --uchu-orange-1: oklch(93.83% 0.037 56.93);
-  --uchu-orange-2-raw: 88.37% 0.072 55.8;
-  --uchu-orange-2: oklch(88.37% 0.072 55.8);
-  --uchu-orange-3-raw: 83.56% 0.107 56.49;
-  --uchu-orange-3: oklch(83.56% 0.107 56.49);
-  --uchu-orange-4-raw: 78.75% 0.141 54.32;
-  --uchu-orange-4: oklch(78.75% 0.141 54.32);
-  --uchu-orange-5-raw: 74.61% 0.171 51.56;
-  --uchu-orange-5: oklch(74.61% 0.171 51.56);
-  --uchu-orange-6-raw: 69.33% 0.157 52.18;
-  --uchu-orange-6: oklch(69.33% 0.157 52.18);
-  --uchu-orange-7-raw: 63.8% 0.142 52.1;
-  --uchu-orange-7: oklch(63.8% 0.142 52.1);
-  --uchu-orange-8-raw: 58.28% 0.128 52.2;
-  --uchu-orange-8: oklch(58.28% 0.128 52.2);
-  --uchu-orange-9-raw: 52.49% 0.113 51.98;
-  --uchu-orange-9: oklch(52.49% 0.113 51.98);
-  --uchu-pink-1-raw: 95.8% 0.023 354.27;
-  --uchu-pink-1: oklch(95.8% 0.023 354.27);
-  --uchu-pink-2-raw: 92.14% 0.046 352.31;
-  --uchu-pink-2: oklch(92.14% 0.046 352.31);
-  --uchu-pink-3-raw: 88.9% 0.066 354.39;
-  --uchu-pink-3: oklch(88.9% 0.066 354.39);
-  --uchu-pink-4-raw: 85.43% 0.09 354.1;
-  --uchu-pink-4: oklch(85.43% 0.09 354.1);
-  --uchu-pink-5-raw: 82.23% 0.112 355.33;
-  --uchu-pink-5: oklch(82.23% 0.112 355.33);
-  --uchu-pink-6-raw: 76.37% 0.101 355.37;
-  --uchu-pink-6: oklch(76.37% 0.101 355.37);
-  --uchu-pink-7-raw: 70.23% 0.092 354.96;
-  --uchu-pink-7: oklch(70.23% 0.092 354.96);
-  --uchu-pink-8-raw: 64.11% 0.084 353.91;
-  --uchu-pink-8: oklch(64.11% 0.084 353.91);
-  --uchu-pink-9-raw: 57.68% 0.074 353.14;
-  --uchu-pink-9: oklch(57.68% 0.074 353.14);
-  --uchu-purple-1-raw: 89.1% 0.046 305.24;
-  --uchu-purple-1: oklch(89.1% 0.046 305.24);
-  --uchu-purple-2-raw: 78.68% 0.091 305;
-  --uchu-purple-2: oklch(78.68% 0.091 305);
-  --uchu-purple-3-raw: 68.5% 0.136 303.78;
-  --uchu-purple-3: oklch(68.5% 0.136 303.78);
-  --uchu-purple-4-raw: 58.47% 0.181 302.06;
-  --uchu-purple-4: oklch(58.47% 0.181 302.06);
-  --uchu-purple-5-raw: 49.39% 0.215 298.31;
-  --uchu-purple-5: oklch(49.39% 0.215 298.31);
-  --uchu-purple-6-raw: 46.11% 0.198 298.4;
-  --uchu-purple-6: oklch(46.11% 0.198 298.4);
-  --uchu-purple-7-raw: 42.77% 0.181 298.49;
-  --uchu-purple-7: oklch(42.77% 0.181 298.49);
-  --uchu-purple-8-raw: 39.46% 0.164 298.29;
-  --uchu-purple-8: oklch(39.46% 0.164 298.29);
-  --uchu-purple-9-raw: 36.01% 0.145 298.35;
-  --uchu-purple-9: oklch(36.01% 0.145 298.35);
-  --uchu-red-1-raw: 88.98% 0.052 3.28;
-  --uchu-red-1: oklch(88.98% 0.052 3.28);
-  --uchu-red-2-raw: 78.78% 0.109 4.54;
-  --uchu-red-2: oklch(78.78% 0.109 4.54);
-  --uchu-red-3-raw: 69.86% 0.162 7.82;
-  --uchu-red-3: oklch(69.86% 0.162 7.82);
-  --uchu-red-4-raw: 62.73% 0.209 12.37;
-  --uchu-red-4: oklch(62.73% 0.209 12.37);
-  --uchu-red-5-raw: 58.63% 0.231 19.6;
-  --uchu-red-5: oklch(58.63% 0.231 19.6);
-  --uchu-red-6-raw: 54.41% 0.214 19.06;
-  --uchu-red-6: oklch(54.41% 0.214 19.06);
-  --uchu-red-7-raw: 49.95% 0.195 18.34;
-  --uchu-red-7: oklch(49.95% 0.195 18.34);
-  --uchu-red-8-raw: 45.8% 0.177 17.7;
-  --uchu-red-8: oklch(45.8% 0.177 17.7);
-  --uchu-red-9-raw: 41.17% 0.157 16.58;
-  --uchu-red-9: oklch(41.17% 0.157 16.58);
-  --uchu-yellow-1-raw: 97.05% 0.039 91.2;
-  --uchu-yellow-1: oklch(97.05% 0.039 91.2);
-  --uchu-yellow-2-raw: 95% 0.07 92.39;
-  --uchu-yellow-2: oklch(95% 0.07 92.39);
-  --uchu-yellow-3-raw: 92.76% 0.098 92.58;
-  --uchu-yellow-3: oklch(92.76% 0.098 92.58);
-  --uchu-yellow-4-raw: 90.92% 0.125 92.56;
-  --uchu-yellow-4: oklch(90.92% 0.125 92.56);
-  --uchu-yellow-5-raw: 89% 0.146 91.5;
-  --uchu-yellow-5: oklch(89% 0.146 91.5);
-  --uchu-yellow-6-raw: 82.39% 0.133 91.5;
-  --uchu-yellow-6: oklch(82.39% 0.133 91.5);
-  --uchu-yellow-7-raw: 75.84% 0.122 92.21;
-  --uchu-yellow-7: oklch(75.84% 0.122 92.21);
-  --uchu-yellow-8-raw: 69.14% 0.109 91.04;
-  --uchu-yellow-8: oklch(69.14% 0.109 91.04);
-  --uchu-yellow-9-raw: 62.29% 0.097 91.9;
-  --uchu-yellow-9: oklch(62.29% 0.097 91.9);
-  --uchu-yin-1-raw: 91.87% 0.003 264.54;
-  --uchu-yin-1: oklch(91.87% 0.003 264.54);
-  --uchu-yin-2-raw: 84.61% 0.004 286.31;
-  --uchu-yin-2: oklch(84.61% 0.004 286.31);
-  --uchu-yin-3-raw: 76.89% 0.004 247.87;
-  --uchu-yin-3: oklch(76.89% 0.004 247.87);
-  --uchu-yin-4-raw: 69.17% 0.004 247.88;
-  --uchu-yin-4: oklch(69.17% 0.004 247.88);
-  --uchu-yin-5-raw: 61.01% 0.005 271.34;
-  --uchu-yin-5: oklch(61.01% 0.005 271.34);
-  --uchu-yin-6-raw: 52.79% 0.005 271.32;
-  --uchu-yin-6: oklch(52.79% 0.005 271.32);
-  --uchu-yin-7-raw: 43.87% 0.005 271.3;
-  --uchu-yin-7: oklch(43.87% 0.005 271.3);
-  --uchu-yin-8-raw: 35.02% 0.005 236.66;
-  --uchu-yin-8: oklch(35.02% 0.005 236.66);
-  --uchu-yin-9-raw: 25.11% 0.006 258.36;
-  --uchu-yin-9: oklch(25.11% 0.006 258.36);
-  --uchu-yang: oklch(99.4% 0 0);
-  --uchu-yin: oklch(14.38% 0.007 256.88);
+  --uchu-blue-1-raw: 0.8966 0.046 260.67;
+  --uchu-blue-1: oklch(0.8966 0.046 260.67);
+  --uchu-blue-2-raw: 0.8017 0.091 258.88;
+  --uchu-blue-2: oklch(0.8017 0.091 258.88);
+  --uchu-blue-3-raw: 0.7094 0.136 258.06;
+  --uchu-blue-3: oklch(0.7094 0.136 258.06);
+  --uchu-blue-4-raw: 0.6239 0.181 258.33;
+  --uchu-blue-4: oklch(0.6239 0.181 258.33);
+  --uchu-blue-5-raw: 0.5487 0.222 260.33;
+  --uchu-blue-5: oklch(0.5487 0.222 260.33);
+  --uchu-blue-6-raw: 0.5115 0.204 260.17;
+  --uchu-blue-6: oklch(0.5115 0.204 260.17);
+  --uchu-blue-7-raw: 0.4736 0.185 259.89;
+  --uchu-blue-7: oklch(0.4736 0.185 259.89);
+  --uchu-blue-8-raw: 0.4348 0.17 260.2;
+  --uchu-blue-8: oklch(0.4348 0.17 260.2);
+  --uchu-blue-9-raw: 0.3953 0.15 259.87;
+  --uchu-blue-9: oklch(0.3953 0.15 259.87);
+  --uchu-gray-1-raw: 0.9557 0.003 286.35;
+  --uchu-gray-1: oklch(0.9557 0.003 286.35);
+  --uchu-gray-2-raw: 0.9204 0.002 197.12;
+  --uchu-gray-2: oklch(0.9204 0.002 197.12);
+  --uchu-gray-3-raw: 0.8828 0.003 286.34;
+  --uchu-gray-3: oklch(0.8828 0.003 286.34);
+  --uchu-gray-4-raw: 0.8468 0.002 197.12;
+  --uchu-gray-4: oklch(0.8468 0.002 197.12);
+  --uchu-gray-5-raw: 0.8073 0.002 247.84;
+  --uchu-gray-5: oklch(0.8073 0.002 247.84);
+  --uchu-gray-6-raw: 0.7503 0.002 247.85;
+  --uchu-gray-6: oklch(0.7503 0.002 247.85);
+  --uchu-gray-7-raw: 0.6901 0.003 286.32;
+  --uchu-gray-7: oklch(0.6901 0.003 286.32);
+  --uchu-gray-8-raw: 0.6312 0.004 219.55;
+  --uchu-gray-8: oklch(0.6312 0.004 219.55);
+  --uchu-gray-9-raw: 0.5682 0.004 247.89;
+  --uchu-gray-9: oklch(0.5682 0.004 247.89);
+  --uchu-green-1-raw: 0.9396 0.05 148.74;
+  --uchu-green-1: oklch(0.9396 0.05 148.74);
+  --uchu-green-2-raw: 0.8877 0.096 147.71;
+  --uchu-green-2: oklch(0.8877 0.096 147.71);
+  --uchu-green-3-raw: 0.8374 0.139 146.57;
+  --uchu-green-3: oklch(0.8374 0.139 146.57);
+  --uchu-green-4-raw: 0.7933 0.179 145.62;
+  --uchu-green-4: oklch(0.7933 0.179 145.62);
+  --uchu-green-5-raw: 0.7523 0.209 144.64;
+  --uchu-green-5: oklch(0.7523 0.209 144.64);
+  --uchu-green-6-raw: 0.7003 0.194 144.71;
+  --uchu-green-6: oklch(0.7003 0.194 144.71);
+  --uchu-green-7-raw: 0.6424 0.175 144.92;
+  --uchu-green-7: oklch(0.6424 0.175 144.92);
+  --uchu-green-8-raw: 0.5883 0.158 145.05;
+  --uchu-green-8: oklch(0.5883 0.158 145.05);
+  --uchu-green-9-raw: 0.5277 0.138 145.41;
+  --uchu-green-9: oklch(0.5277 0.138 145.41);
+  --uchu-orange-1-raw: 0.9383 0.037 56.93;
+  --uchu-orange-1: oklch(0.9383 0.037 56.93);
+  --uchu-orange-2-raw: 0.8837 0.072 55.8;
+  --uchu-orange-2: oklch(0.8837 0.072 55.8);
+  --uchu-orange-3-raw: 0.8356 0.107 56.49;
+  --uchu-orange-3: oklch(0.8356 0.107 56.49);
+  --uchu-orange-4-raw: 0.7875 0.141 54.32;
+  --uchu-orange-4: oklch(0.7875 0.141 54.32);
+  --uchu-orange-5-raw: 0.7461 0.171 51.56;
+  --uchu-orange-5: oklch(0.7461 0.171 51.56);
+  --uchu-orange-6-raw: 0.6933 0.157 52.18;
+  --uchu-orange-6: oklch(0.6933 0.157 52.18);
+  --uchu-orange-7-raw: 0.638 0.142 52.1;
+  --uchu-orange-7: oklch(0.638 0.142 52.1);
+  --uchu-orange-8-raw: 0.5828 0.128 52.2;
+  --uchu-orange-8: oklch(0.5828 0.128 52.2);
+  --uchu-orange-9-raw: 0.5249 0.113 51.98;
+  --uchu-orange-9: oklch(0.5249 0.113 51.98);
+  --uchu-pink-1-raw: 0.958 0.023 354.27;
+  --uchu-pink-1: oklch(0.958 0.023 354.27);
+  --uchu-pink-2-raw: 0.9214 0.046 352.31;
+  --uchu-pink-2: oklch(0.9214 0.046 352.31);
+  --uchu-pink-3-raw: 0.889 0.066 354.39;
+  --uchu-pink-3: oklch(0.889 0.066 354.39);
+  --uchu-pink-4-raw: 0.8543 0.09 354.1;
+  --uchu-pink-4: oklch(0.8543 0.09 354.1);
+  --uchu-pink-5-raw: 0.8223 0.112 355.33;
+  --uchu-pink-5: oklch(0.8223 0.112 355.33);
+  --uchu-pink-6-raw: 0.7637 0.101 355.37;
+  --uchu-pink-6: oklch(0.7637 0.101 355.37);
+  --uchu-pink-7-raw: 0.7023 0.092 354.96;
+  --uchu-pink-7: oklch(0.7023 0.092 354.96);
+  --uchu-pink-8-raw: 0.6411 0.084 353.91;
+  --uchu-pink-8: oklch(0.6411 0.084 353.91);
+  --uchu-pink-9-raw: 0.5768 0.074 353.14;
+  --uchu-pink-9: oklch(0.5768 0.074 353.14);
+  --uchu-purple-1-raw: 0.891 0.046 305.24;
+  --uchu-purple-1: oklch(0.891 0.046 305.24);
+  --uchu-purple-2-raw: 0.7868 0.091 305;
+  --uchu-purple-2: oklch(0.7868 0.091 305);
+  --uchu-purple-3-raw: 0.685 0.136 303.78;
+  --uchu-purple-3: oklch(0.685 0.136 303.78);
+  --uchu-purple-4-raw: 0.5847 0.181 302.06;
+  --uchu-purple-4: oklch(0.5847 0.181 302.06);
+  --uchu-purple-5-raw: 0.4939 0.215 298.31;
+  --uchu-purple-5: oklch(0.4939 0.215 298.31);
+  --uchu-purple-6-raw: 0.4611 0.198 298.4;
+  --uchu-purple-6: oklch(0.4611 0.198 298.4);
+  --uchu-purple-7-raw: 0.4277 0.181 298.49;
+  --uchu-purple-7: oklch(0.4277 0.181 298.49);
+  --uchu-purple-8-raw: 0.3946 0.164 298.29;
+  --uchu-purple-8: oklch(0.3946 0.164 298.29);
+  --uchu-purple-9-raw: 0.3601 0.145 298.35;
+  --uchu-purple-9: oklch(0.3601 0.145 298.35);
+  --uchu-red-1-raw: 0.8898 0.052 3.28;
+  --uchu-red-1: oklch(0.8898 0.052 3.28);
+  --uchu-red-2-raw: 0.7878 0.109 4.54;
+  --uchu-red-2: oklch(0.7878 0.109 4.54);
+  --uchu-red-3-raw: 0.6986 0.162 7.82;
+  --uchu-red-3: oklch(0.6986 0.162 7.82);
+  --uchu-red-4-raw: 0.6273 0.209 12.37;
+  --uchu-red-4: oklch(0.6273 0.209 12.37);
+  --uchu-red-5-raw: 0.5863 0.231 19.6;
+  --uchu-red-5: oklch(0.5863 0.231 19.6);
+  --uchu-red-6-raw: 0.5441 0.214 19.06;
+  --uchu-red-6: oklch(0.5441 0.214 19.06);
+  --uchu-red-7-raw: 0.4995 0.195 18.34;
+  --uchu-red-7: oklch(0.4995 0.195 18.34);
+  --uchu-red-8-raw: 0.458 0.177 17.7;
+  --uchu-red-8: oklch(0.458 0.177 17.7);
+  --uchu-red-9-raw: 0.4117 0.157 16.58;
+  --uchu-red-9: oklch(0.4117 0.157 16.58);
+  --uchu-yellow-1-raw: 0.9705 0.039 91.2;
+  --uchu-yellow-1: oklch(0.9705 0.039 91.2);
+  --uchu-yellow-2-raw: 0.95 0.07 92.39;
+  --uchu-yellow-2: oklch(0.95 0.07 92.39);
+  --uchu-yellow-3-raw: 0.9276 0.098 92.58;
+  --uchu-yellow-3: oklch(0.9276 0.098 92.58);
+  --uchu-yellow-4-raw: 0.9092 0.125 92.56;
+  --uchu-yellow-4: oklch(0.9092 0.125 92.56);
+  --uchu-yellow-5-raw: 0.89 0.146 91.5;
+  --uchu-yellow-5: oklch(0.89 0.146 91.5);
+  --uchu-yellow-6-raw: 0.8239 0.133 91.5;
+  --uchu-yellow-6: oklch(0.8239 0.133 91.5);
+  --uchu-yellow-7-raw: 0.7584 0.122 92.21;
+  --uchu-yellow-7: oklch(0.7584 0.122 92.21);
+  --uchu-yellow-8-raw: 0.6914 0.109 91.04;
+  --uchu-yellow-8: oklch(0.6914 0.109 91.04);
+  --uchu-yellow-9-raw: 0.6229 0.097 91.9;
+  --uchu-yellow-9: oklch(0.6229 0.097 91.9);
+  --uchu-yin-1-raw: 0.9187 0.003 264.54;
+  --uchu-yin-1: oklch(0.9187 0.003 264.54);
+  --uchu-yin-2-raw: 0.8461 0.004 286.31;
+  --uchu-yin-2: oklch(0.8461 0.004 286.31);
+  --uchu-yin-3-raw: 0.7689 0.004 247.87;
+  --uchu-yin-3: oklch(0.7689 0.004 247.87);
+  --uchu-yin-4-raw: 0.6917 0.004 247.88;
+  --uchu-yin-4: oklch(0.6917 0.004 247.88);
+  --uchu-yin-5-raw: 0.6101 0.005 271.34;
+  --uchu-yin-5: oklch(0.6101 0.005 271.34);
+  --uchu-yin-6-raw: 0.5279 0.005 271.32;
+  --uchu-yin-6: oklch(0.5279 0.005 271.32);
+  --uchu-yin-7-raw: 0.4387 0.005 271.3;
+  --uchu-yin-7: oklch(0.4387 0.005 271.3);
+  --uchu-yin-8-raw: 0.3502 0.005 236.66;
+  --uchu-yin-8: oklch(0.3502 0.005 236.66);
+  --uchu-yin-9-raw: 0.2511 0.006 258.36;
+  --uchu-yin-9: oklch(0.2511 0.006 258.36);
+  --uchu-yang: oklch(0.994 0 0);
+  --uchu-yin: oklch(0.1438 0.007 256.88);
 }
diff --git a/demo/index.html b/demo/index.html
index e71570f..14fd9f3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,7 @@
 
     <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
     <meta name="referrer" content="strict-origin"/>
-    <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/>
+    <meta name="theme-color" content="oklch(0.9557 0.003 286.35)"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
     <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
@@ -25,7 +25,7 @@
     <link rel="icon" href="./favicon.svg"/>
 
     <link href="./asset/style/uchu.css" rel="stylesheet"/>
-    <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+    <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
 
     <style>
       body {
@@ -316,7 +316,7 @@
                 }
               }
 
-              &:not(:first-of-type) {
+              &:nth-child(2) {
                 color: var(--uchu-pink-9);
 
                 &:not(:hover) {
@@ -327,6 +327,31 @@
                   background-color: var(--uchu-pink-2);
                 }
               }
+
+              &:nth-child(3) {
+                color: oklch(0.58 0.04 353);
+
+                &:not(:hover) {
+                  background-color: oklch(0.89 0.036 355);
+                }
+
+                &:hover {
+                  background-color: oklch(0.92 0.028 351);
+                }
+              }
+
+              &:nth-child(4) {
+                border: 1px solid var(--uchu-yin-1);
+                color: var(--uchu-yin-7);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-yin-1);
+                }
+              }
             }
           }
 
@@ -845,6 +870,86 @@
       .notify {
         background-color: oklch(var(--uchu-yin-9-raw) / 85%);
       }
+
+      .dsgn {
+        background-color: var(--uchu-yin);
+        color: var(--uchu-yang);
+        cursor: default;
+        font-family: monospace;
+        font-size: 12px;
+        letter-spacing: 0.025rem;
+        line-height: 1;
+        overflow: hidden;
+        padding: 0.5ch 2ch;
+        padding-top: 0.5ch;
+        position: relative;
+        text-transform: lowercase;
+
+        &:hover {
+          animation: gradient 15s ease infinite;
+         	background-image: linear-gradient(45deg, var(--uchu-pink-4), var(--uchu-blue-4), var(--uchu-red-4), var(--uchu-purple-4));
+         	background-size: 400% 400%;
+
+          &::after {
+            animation: 1s ease-in-out hover-dsgn;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+        }
+
+        &::before {
+          width: 100%; height: 1px;
+
+          background-color: oklch(var(--uchu-yang-raw) / 10%);
+          left: 0;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-gray-1);
+          left: -10ch;
+          opacity: 0.3;
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        a {
+          color: inherit;
+          font-weight: 600;
+          text-decoration: underline;
+        }
+      }
+
+      @keyframes gradient {
+       	0% {
+      		background-position: 0% 50%;
+       	}
+
+       	50% {
+      		background-position: 100% 50%;
+       	}
+
+       	100% {
+      		background-position: 0% 50%;
+       	}
+      }
+
+      @keyframes hover-dsgn {
+        0% {
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        100% {
+          opacity: 0;
+          transform: skew(40deg, 0deg) translateX(103vw);
+        }
+      }
     </style>
 
     <script src="./asset/script/shared.js"></script>
@@ -877,12 +982,14 @@
       <nav class="links">
         <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
         <a class="link" href="./simple.html">Simple Palette</a>
+        <a class="link" href="./pastel.html">Pastel Palette</a>
+        <a class="link" href="./pastel-simple.html">Simple Pastel Palette</a>
       </nav>
     </section>
 
     <section class="gray" id="uchu_gray">
       <div class="info">
-        <p>oklch(95.57% 0.003 286.35)</p>
+        <p>oklch(0.9557 0.003 286.35)</p>
         <h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -890,49 +997,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(92.04% 0.002 197.12)</p>
+          <p>oklch(0.9204 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(88.28% 0.003 286.34)</p>
+          <p>oklch(0.8828 0.003 286.34)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(84.68% 0.002 197.12)</p>
+          <p>oklch(0.8468 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(80.73% 0.002 247.84)</p>
+          <p>oklch(0.8073 0.002 247.84)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(75.03% 0.002 247.85)</p>
+          <p>oklch(0.7503 0.002 247.85)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(69.01% 0.003 286.32)</p>
+          <p>oklch(0.6901 0.003 286.32)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(63.12% 0.004 219.55)</p>
+          <p>oklch(0.6312 0.004 219.55)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(56.82% 0.004 247.89)</p>
+          <p>oklch(0.5682 0.004 247.89)</p>
         </li>
       </ul>
     </section>
 
     <section class="red" id="uchu_red">
       <div class="info">
-        <p>oklch(88.98% 0.052 3.28)</p>
+        <p>oklch(0.8898 0.052 3.28)</p>
         <h2><span>var(</span>--uchu-red-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -940,49 +1047,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(78.78% 0.109 4.54)</p>
+          <p>oklch(0.7878 0.109 4.54)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(69.86% 0.162 7.82)</p>
+          <p>oklch(0.6986 0.162 7.82)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(62.73% 0.209 12.37)</p>
+          <p>oklch(0.6273 0.209 12.37)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(58.63% 0.231 19.6)</p>
+          <p>oklch(0.5863 0.231 19.6)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(54.41% 0.214 19.06)</p>
+          <p>oklch(0.5441 0.214 19.06)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(49.95% 0.195 18.34)</p>
+          <p>oklch(0.4995 0.195 18.34)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(45.8% 0.177 17.7)</p>
+          <p>oklch(0.458 0.177 17.7)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(41.17% 0.157 16.58)</p>
+          <p>oklch(0.4117 0.157 16.58)</p>
         </li>
       </ul>
     </section>
 
     <section class="pink" id="uchu_pink">
       <div class="info">
-        <p>oklch(95.8% 0.023 354.27)</p>
+        <p>oklch(0.958 0.023 354.27)</p>
         <h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -990,49 +1097,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(92.14% 0.046 352.31)</p>
+          <p>oklch(0.9214 0.046 352.31)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(88.9% 0.066 354.39)</p>
+          <p>oklch(0.889 0.066 354.39)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(85.43% 0.09 354.1)</p>
+          <p>oklch(0.8543 0.09 354.1)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(82.23% 0.112 355.33)</p>
+          <p>oklch(0.8223 0.112 355.33)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(76.37% 0.101 355.37)</p>
+          <p>oklch(0.7637 0.101 355.37)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(70.23% 0.092 354.96)</p>
+          <p>oklch(0.7023 0.092 354.96)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(64.11% 0.084 353.91)</p>
+          <p>oklch(0.6411 0.084 353.91)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(57.68% 0.074 353.14)</p>
+          <p>oklch(0.5768 0.074 353.14)</p>
         </li>
       </ul>
     </section>
 
     <section class="purple" id="uchu_purple">
       <div class="info">
-        <p>oklch(89.1% 0.046 305.24)</p>
+        <p>oklch(0.891 0.046 305.24)</p>
         <h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1040,49 +1147,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(78.68% 0.091 305)</p>
+          <p>oklch(0.7868 0.091 305)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(68.5% 0.136 303.78)</p>
+          <p>oklch(0.685 0.136 303.78)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(58.47% 0.181 302.06)</p>
+          <p>oklch(0.5847 0.181 302.06)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(49.39% 0.215 298.31)</p>
+          <p>oklch(0.4939 0.215 298.31)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(46.11% 0.198 298.4)</p>
+          <p>oklch(0.4611 0.198 298.4)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(42.77% 0.181 298.49)</p>
+          <p>oklch(0.4277 0.181 298.49)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(39.46% 0.164 298.29)</p>
+          <p>oklch(0.3946 0.164 298.29)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(36.01% 0.145 298.35)</p>
+          <p>oklch(0.3601 0.145 298.35)</p>
         </li>
       </ul>
     </section>
 
     <section class="blue" id="uchu_blue">
       <div class="info">
-        <p>oklch(89.66% 0.046 260.67)</p>
+        <p>oklch(0.8966 0.046 260.67)</p>
         <h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1090,49 +1197,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(80.17% 0.091 258.88)</p>
+          <p>oklch(0.8017 0.091 258.88)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(70.94% 0.136 258.06)</p>
+          <p>oklch(0.7094 0.136 258.06)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(62.39% 0.181 258.33)</p>
+          <p>oklch(0.6239 0.181 258.33)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(54.87% 0.222 260.33)</p>
+          <p>oklch(0.5487 0.222 260.33)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(51.15% 0.204 260.17)</p>
+          <p>oklch(0.5115 0.204 260.17)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(47.36% 0.185 259.89)</p>
+          <p>oklch(0.4736 0.185 259.89)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(43.48% 0.17 260.2)</p>
+          <p>oklch(0.4348 0.17 260.2)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(39.53% 0.15 259.87)</p>
+          <p>oklch(0.3953 0.15 259.87)</p>
         </li>
       </ul>
     </section>
 
     <section class="green" id="uchu_green">
       <div class="info">
-        <p>oklch(93.96% 0.05 148.74)</p>
+        <p>oklch(0.9396 0.05 148.74)</p>
         <h2><span>var(</span>--uchu-green-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1140,49 +1247,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(88.77% 0.096 147.71)</p>
+          <p>oklch(0.8877 0.096 147.71)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(83.74% 0.139 146.57)</p>
+          <p>oklch(0.8374 0.139 146.57)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(79.33% 0.179 145.62)</p>
+          <p>oklch(0.7933 0.179 145.62)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(75.23% 0.209 144.64)</p>
+          <p>oklch(0.7523 0.209 144.64)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(70.03% 0.194 144.71)</p>
+          <p>oklch(0.7003 0.194 144.71)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(64.24% 0.175 144.92)</p>
+          <p>oklch(0.6424 0.175 144.92)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(58.83% 0.158 145.05)</p>
+          <p>oklch(0.5883 0.158 145.05)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(52.77% 0.138 145.41)</p>
+          <p>oklch(0.5277 0.138 145.41)</p>
         </li>
       </ul>
     </section>
 
     <section class="yellow" id="uchu_yellow">
       <div class="info">
-        <p>oklch(97.05% 0.039 91.2)</p>
+        <p>oklch(0.9705 0.039 91.2)</p>
         <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1190,49 +1297,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(95% 0.07 92.39)</p>
+          <p>oklch(0.95 0.07 92.39)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(92.76% 0.098 92.58)</p>
+          <p>oklch(0.9276 0.098 92.58)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(90.92% 0.125 92.56)</p>
+          <p>oklch(0.9092 0.125 92.56)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(89% 0.146 91.5)</p>
+          <p>oklch(0.89 0.146 91.5)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(82.39% 0.133 91.5)</p>
+          <p>oklch(0.8239 0.133 91.5)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(75.84% 0.122 92.21)</p>
+          <p>oklch(0.7584 0.122 92.21)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(69.14% 0.109 91.04)</p>
+          <p>oklch(0.6914 0.109 91.04)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(62.29% 0.097 91.9)</p>
+          <p>oklch(0.6229 0.097 91.9)</p>
         </li>
       </ul>
     </section>
 
     <section class="orange" id="uchu_orange">
       <div class="info">
-        <p>oklch(93.83% 0.037 56.93)</p>
+        <p>oklch(0.9383 0.037 56.93)</p>
         <h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1240,49 +1347,49 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(88.37% 0.072 55.8)</p>
+          <p>oklch(0.8837 0.072 55.8)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(83.56% 0.107 56.49)</p>
+          <p>oklch(0.8356 0.107 56.49)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(78.75% 0.141 54.32)</p>
+          <p>oklch(0.7875 0.141 54.32)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(74.61% 0.171 51.56)</p>
+          <p>oklch(0.7461 0.171 51.56)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(69.33% 0.157 52.18)</p>
+          <p>oklch(0.6933 0.157 52.18)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(63.8% 0.142 52.1)</p>
+          <p>oklch(0.638 0.142 52.1)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(58.28% 0.128 52.2)</p>
+          <p>oklch(0.5828 0.128 52.2)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(52.49% 0.113 51.98)</p>
+          <p>oklch(0.5249 0.113 51.98)</p>
         </li>
       </ul>
     </section>
 
     <section class="yin" id="uchu_yin">
       <div class="info">
-        <p>oklch(91.87% 0.003 264.54)</p>
+        <p>oklch(0.9187 0.003 264.54)</p>
         <h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
         <h3>1</h3>
       </div>
@@ -1290,42 +1397,42 @@
       <ul class="swatches">
         <li class="swatch">
           <h3>2</h3>
-          <p>oklch(84.61% 0.004 286.31)</p>
+          <p>oklch(0.8461 0.004 286.31)</p>
         </li>
 
         <li class="swatch">
           <h3>3</h3>
-          <p>oklch(76.89% 0.004 247.87)</p>
+          <p>oklch(0.7689 0.004 247.87)</p>
         </li>
 
         <li class="swatch">
           <h3>4</h3>
-          <p>oklch(69.17% 0.004 247.88)</p>
+          <p>oklch(0.6917 0.004 247.88)</p>
         </li>
 
         <li class="swatch">
           <h3>5</h3>
-          <p>oklch(61.01% 0.005 271.34)</p>
+          <p>oklch(0.6101 0.005 271.34)</p>
         </li>
 
         <li class="swatch">
           <h3>6</h3>
-          <p>oklch(52.79% 0.005 271.32)</p>
+          <p>oklch(0.5279 0.005 271.32)</p>
         </li>
 
         <li class="swatch">
           <h3>7</h3>
-          <p>oklch(43.87% 0.005 271.3)</p>
+          <p>oklch(0.4387 0.005 271.3)</p>
         </li>
 
         <li class="swatch">
           <h3>8</h3>
-          <p>oklch(35.02% 0.005 236.66)</p>
+          <p>oklch(0.3502 0.005 236.66)</p>
         </li>
 
         <li class="swatch">
           <h3>9</h3>
-          <p>oklch(25.11% 0.006 258.36)</p>
+          <p>oklch(0.2511 0.006 258.36)</p>
         </li>
       </ul>
     </section>
@@ -1334,6 +1441,10 @@
       <p>Color value added to clipboard</p>
     </aside>
 
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
     <script>
       const swatches = document.querySelectorAll([".info", ".swatch"]);
       let notifierTimeout;
diff --git a/demo/pastel-simple.html b/demo/pastel-simple.html
new file mode 100644
index 0000000..cb5bbae
--- /dev/null
+++ b/demo/pastel-simple.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+
+    <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+    <meta name="referrer" content="strict-origin"/>
+    <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+    <meta property="og:image:height" content="600"/>
+    <meta property="og:image:secure_url" content="./asset/image/og.png"/>
+    <meta property="og:image:type" content="image/png"/>
+    <meta property="og:image:width" content="1200"/>
+    <meta property="og:locale" content="en_US"/>
+    <meta property="og:site_name" content="uchū"/>
+    <meta property="og:title" content="uchū — the color palette for internet lovers"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://uchu.style"/>
+
+    <title>uchū demo &middot; simple pastel palette</title>
+
+    <link rel="canonical" href="https://uchu.style"/>
+    <link rel="icon" href="./favicon.svg"/>
+
+    <link href="./asset/style/uchu-pastel-reduced.css" rel="stylesheet"/>
+    <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
+
+    <style>
+      body {
+        background-color: var(--uchu-yang);
+        color: var(--uchu-yin);
+      }
+
+      section {
+        a {
+          &:not([class]) {
+            &:not(:hover):not(:visited) {
+              color: var(--uchu-blue);
+            }
+
+            &:not(:visited):hover {
+              color: var(--uchu-pink);
+            }
+
+            &:not(:hover):visited {
+              color: var(--uchu-purple);
+            }
+
+            &:hover:visited {
+              color: var(--uchu-blue);
+            }
+          }
+        }
+
+        .swatches {
+          .swatch {
+            width: 50%;
+
+            h3 {
+              padding: 0 2rem 2rem 2rem;
+
+              @media (min-width: 901px) {
+                font-size: 3vw;
+              }
+
+              @media (max-width: 900px) {
+                font-size: 2rem;
+              }
+
+              span {
+                opacity: 0.3;
+              }
+            }
+          }
+        }
+
+        &.blue {
+          .info {
+            background-color: var(--uchu-light-blue);
+            color: var(--uchu-blue);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-blue);
+            color: var(--uchu-dark-blue);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-blue);
+            color: var(--uchu-light-blue);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-blue) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.gray {
+          .info {
+            background-color: var(--uchu-light-gray);
+            color: var(--uchu-dark-gray);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-gray);
+            color: var(--uchu-dark-gray);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-gray);
+            color: var(--uchu-light-gray);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-gray) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.green {
+          .info {
+            background-color: var(--uchu-light-green);
+            color: var(--uchu-dark-green);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-green);
+            color: var(--uchu-dark-green);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-green);
+            color: var(--uchu-light-green);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-green) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.intro {
+          .links {
+            .link {
+              &:first-of-type {
+                &:not(:hover) {
+                  background-color: var(--uchu-yin);
+                  color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-light-yin);
+                  color: var(--uchu-yin);
+                }
+              }
+
+              &:nth-child(2) {
+                color: var(--uchu-dark-pink);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-pink);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-light-pink);
+                }
+              }
+
+              &:nth-child(3) {
+                color: oklch(0.58 0.04 353);
+
+                &:not(:hover) {
+                  background-color: oklch(0.89 0.036 355);
+                }
+
+                &:hover {
+                  background-color: oklch(0.92 0.028 351);
+                }
+              }
+
+              &:nth-child(4) {
+                border: 1px solid var(--uchu-light-yin);
+                color: var(--uchu-yin);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-light-yin);
+                }
+              }
+            }
+          }
+
+          .palette {
+            a {
+              &.blue {
+                background-color: var(--uchu-blue);
+              }
+
+              &.gray {
+                background-color: var(--uchu-gray);
+              }
+
+              &.green {
+                background-color: var(--uchu-green);
+              }
+
+              &.orange {
+                background-color: var(--uchu-orange);
+              }
+
+              &.pink {
+                background-color: var(--uchu-pink);
+              }
+
+              &.purple {
+                background-color: var(--uchu-purple);
+              }
+
+              &.red {
+                background-color: var(--uchu-red);
+              }
+
+              &.yellow {
+                background-color: var(--uchu-yellow);
+              }
+            }
+          }
+        }
+
+        &.orange {
+          .info {
+            background-color: var(--uchu-light-orange);
+            color: var(--uchu-dark-orange);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-orange);
+            color: var(--uchu-dark-orange);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-orange);
+            color: var(--uchu-light-orange);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-orange) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.pink {
+          .info {
+            background-color: var(--uchu-light-pink);
+            color: var(--uchu-dark-pink);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-pink);
+            color: var(--uchu-dark-pink);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-pink);
+            color: var(--uchu-light-pink);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-pink) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.purple {
+          .info {
+            background-color: var(--uchu-light-purple);
+            color: var(--uchu-dark-purple);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-purple);
+            color: var(--uchu-dark-purple);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-purple);
+            color: var(--uchu-light-purple);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-purple) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.red {
+          .info {
+            background-color: var(--uchu-light-red);
+            color: var(--uchu-dark-red);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-red);
+            color: var(--uchu-dark-red);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-red);
+            color: var(--uchu-light-red);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-red) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.yellow {
+          .info {
+            background-color: var(--uchu-light-yellow);
+            color: var(--uchu-dark-yellow);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-yellow);
+            color: var(--uchu-dark-yellow);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-dark-yellow);
+            color: var(--uchu-light-yellow);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-dark-yellow) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.yin {
+          .info {
+            background-color: var(--uchu-light-yin);
+            color: var(--uchu-yin);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-yin);
+            color: var(--uchu-light-yin);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-yang);
+            color: var(--uchu-yin);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yang) 0%, transparent 100%);
+            }
+          }
+        }
+      }
+
+      .notify {
+        background-color: var(--uchu-yin);
+      }
+
+      .dsgn {
+        background-color: var(--uchu-yin);
+        color: var(--uchu-yang);
+        cursor: default;
+        font-family: monospace;
+        font-size: 12px;
+        letter-spacing: 0.025rem;
+        line-height: 1;
+        overflow: hidden;
+        padding: 0.5ch 2ch;
+        padding-top: 0.5ch;
+        position: relative;
+        text-transform: lowercase;
+
+        &:hover {
+          animation: gradient 15s ease infinite;
+         	background-image: linear-gradient(45deg, var(--uchu-pink), var(--uchu-blue), var(--uchu-red), var(--uchu-purple));
+         	background-size: 400% 400%;
+
+          &::after {
+            animation: 1s ease-in-out hover-dsgn;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+        }
+
+        &::before {
+          width: 100%; height: 1px;
+
+          background-color: var(--uchu-yang);
+          left: 0;
+          opacity: 0.1;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-light-gray);
+          left: -10ch;
+          opacity: 0.3;
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        a {
+          color: inherit;
+          font-weight: 600;
+          text-decoration: underline;
+        }
+      }
+
+      @keyframes gradient {
+       	0% {
+      		background-position: 0% 50%;
+       	}
+
+       	50% {
+      		background-position: 100% 50%;
+       	}
+
+       	100% {
+      		background-position: 0% 50%;
+       	}
+      }
+
+      @keyframes hover-dsgn {
+        0% {
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        100% {
+          opacity: 0;
+          transform: skew(40deg, 0deg) translateX(103vw);
+        }
+      }
+    </style>
+
+    <script src="./asset/script/shared.js"></script>
+  </head>
+
+  <body>
+    <audio id="speak" preload>
+      <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /-->
+      <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/>
+      <source src="./asset/audio/pronounciation.wav" type="audio/wav"/>
+      <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/>
+    </audio>
+
+    <section class="intro">
+      <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1>
+
+      <nav class="palette">
+        <a class="gray" href="#uchu_gray"></a>
+        <a class="red" href="#uchu_red"></a>
+        <a class="pink" href="#uchu_pink"></a>
+        <a class="purple" href="#uchu_purple"></a>
+        <a class="blue" href="#uchu_blue"></a>
+        <a class="green" href="#uchu_green"></a>
+        <a class="yellow" href="#uchu_yellow"></a>
+        <a class="orange" href="#uchu_orange"></a>
+      </nav>
+
+      <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p>
+
+      <nav class="links">
+        <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
+        <a class="link" href="/">Expanded Palette</a>
+        <a class="link" href="./simple.html">Simple Palette</a>
+        <a class="link" href="./pastel.html">Pastel Palette</a>
+      </nav>
+    </section>
+
+    <section class="gray" id="uchu_gray">
+      <div class="info">
+        <p>oklch(0.96 0.004 287)</p>
+        <h2><span>var(</span>--uchu-light-gray<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-gray<span>)</span></h3>
+          <p>oklch(0.85 0.004 195)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3>
+          <p>oklch(0.63 0.004 215)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="red" id="uchu_red">
+      <div class="info">
+        <p>oklch(0.89 0.032 2)</p>
+        <h2><span>var(</span>--uchu-light-red<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-red<span>)</span></h3>
+          <p>oklch(0.59 0.12 8)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-red<span>)</span></h3>
+          <p>oklch(0.41 0.104 12)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="pink" id="uchu_pink">
+      <div class="info">
+        <p>oklch(0.96 0.016 353)</p>
+        <h2><span>var(</span>--uchu-light-pink<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-pink<span>)</span></h3>
+          <p>oklch(0.85 0.048 353)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3>
+          <p>oklch(0.64 0.044 354)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="purple" id="uchu_purple">
+      <div class="info">
+        <p>oklch(0.89 0.028 304)</p>
+        <h2><span>var(</span>--uchu-light-purple<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-purple<span>)</span></h3>
+          <p>oklch(0.57 0.1 304)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3>
+          <p>oklch(0.37 0.1 303)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="blue" id="uchu_blue">
+      <div class="info">
+        <p>oklch(0.9 0.028 261)</p>
+        <h2><span>var(</span>--uchu-light-blue<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-blue<span>)</span></h3>
+          <p>oklch(0.6 0.096 259)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3>
+          <p>oklch(0.41 0.096 262)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="green" id="uchu_green">
+      <div class="info">
+        <p>oklch(0.94 0.032 149)</p>
+        <h2><span>var(</span>--uchu-light-green<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-green<span>)</span></h3>
+          <p>oklch(0.78 0.1 146)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-green<span>)</span></h3>
+          <p>oklch(0.57 0.088 146)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="yellow" id="uchu_yellow">
+      <div class="info">
+        <p>oklch(0.97 0.024 94)</p>
+        <h2><span>var(</span>--uchu-light-yellow<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-yellow<span>)</span></h3>
+          <p>oklch(0.9 0.068 91)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3>
+          <p>oklch(0.69 0.064 91)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="orange" id="uchu_orange">
+      <div class="info">
+        <p>oklch(0.94 0.02 55)</p>
+        <h2><span>var(</span>--uchu-light-orange<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-orange<span>)</span></h3>
+          <p>oklch(0.78 0.076 55)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3>
+          <p>oklch(0.57 0.068 54)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="yin" id="uchu_yin">
+      <div class="info">
+        <p>oklch(0.9187 0.003 264.54)</p>
+        <h2><span>var(</span>--uchu-light-yin<span>)</span></h2>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-yin<span>)</span></h3>
+          <p>oklch(0.1438 0.007 256.88)</p>
+        </li>
+
+        <li class="swatch">
+          <h3><span>var(</span>--uchu-yang<span>)</span></h3>
+          <p>oklch(0.994 0 0)</p>
+        </li>
+      </ul>
+    </section>
+
+    <aside class="notify">
+      <p>Color value added to clipboard</p>
+    </aside>
+
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
+    <script>
+      const swatches = document.querySelectorAll([".info", ".swatch"]);
+      let notifierTimeout;
+
+      swatches.forEach(swatch => {
+        swatch.addEventListener("click", () => {
+          const colorValue = swatch.getElementsByTagName("p")[0].textContent;
+          const notifier = document.querySelector(".notify");
+
+          notifier.classList.remove("active");
+
+          if (copyTextToClipboard(colorValue)) {
+            clearTimeout(notifierTimeout);
+            notifier.classList.add("active");
+
+            notifierTimeout = setTimeout(() => {
+              notifier.classList.remove("active");
+            }, 1500);
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/demo/pastel.html b/demo/pastel.html
new file mode 100644
index 0000000..a26e6d4
--- /dev/null
+++ b/demo/pastel.html
@@ -0,0 +1,1471 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+
+    <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+    <meta name="referrer" content="strict-origin"/>
+    <meta name="theme-color" content="oklch(0.9557 0.003 286.35)"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+    <meta property="og:image:height" content="600"/>
+    <meta property="og:image:secure_url" content="./asset/image/og.png"/>
+    <meta property="og:image:type" content="image/png"/>
+    <meta property="og:image:width" content="1200"/>
+    <meta property="og:locale" content="en_US"/>
+    <meta property="og:site_name" content="uchū"/>
+    <meta property="og:title" content="uchū — the color palette for internet lovers"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://uchu.style"/>
+
+    <title>uchū demo &middot; pastel palette</title>
+
+    <link rel="canonical" href="https://uchu.style"/>
+    <link rel="icon" href="./favicon.svg"/>
+
+    <link href="./asset/style/uchu-pastel.css" rel="stylesheet"/>
+    <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
+
+    <style>
+      body {
+        background-color: var(--uchu-yang);
+        color: var(--uchu-yin-9);
+      }
+
+      section {
+        a {
+          &:not([class]) {
+            &:not(:hover):not(:visited) {
+              color: var(--uchu-blue-5);
+            }
+
+            &:not(:visited):hover {
+              color: var(--uchu-pink-5);
+            }
+
+            &:not(:hover):visited {
+              color: var(--uchu-purple-4);
+            }
+
+            &:hover:visited {
+              color: var(--uchu-blue-5);
+            }
+          }
+        }
+
+        .swatches {
+          .swatch {
+            width: calc(100% / 8);
+
+            h3 {
+              padding: 0 1rem 1rem 0;
+            }
+          }
+        }
+
+        &.blue {
+          .info {
+            background-color: var(--uchu-blue-1);
+            color: var(--uchu-blue-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-blue-2);
+            color: var(--uchu-blue-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-blue-3);
+            color: var(--uchu-blue-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-blue-4);
+            color: var(--uchu-blue-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-blue-5);
+            color: var(--uchu-blue-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-blue-6);
+            color: var(--uchu-blue-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-blue-7);
+            color: var(--uchu-blue-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-blue-8);
+            color: var(--uchu-blue-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-blue-9);
+            color: var(--uchu-blue-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-blue-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.gray {
+          .info {
+            background-color: var(--uchu-gray-1);
+            color: var(--uchu-gray-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-gray-2);
+            color: var(--uchu-gray-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-gray-3);
+            color: var(--uchu-gray-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-gray-4);
+            color: var(--uchu-gray-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-gray-5);
+            color: var(--uchu-gray-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-gray-6);
+            color: var(--uchu-gray-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-gray-7);
+            color: var(--uchu-gray-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-gray-8);
+            color: var(--uchu-gray-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-gray-9);
+            color: var(--uchu-gray-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-gray-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.green {
+          .info {
+            background-color: var(--uchu-green-1);
+            color: var(--uchu-green-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-green-2);
+            color: var(--uchu-green-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-green-3);
+            color: var(--uchu-green-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-green-4);
+            color: var(--uchu-green-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-green-5);
+            color: var(--uchu-green-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-green-6);
+            color: var(--uchu-green-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-green-7);
+            color: var(--uchu-green-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-green-8);
+            color: var(--uchu-green-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-green-9);
+            color: var(--uchu-green-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-green-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.intro {
+          .links {
+            .link {
+              &:first-of-type {
+                color: var(--uchu-yang);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yin);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-yin-8);
+                }
+              }
+
+              &:nth-child(2) {
+                color: oklch(0.5768 0.074 353.14);
+
+                &:not(:hover) {
+                  background-color: oklch(0.889 0.066 354.39);
+                }
+
+                &:hover {
+                  background-color: oklch(0.9214 0.046 352.31);
+                }
+              }
+
+              &:nth-child(3) {
+                border: 1px solid var(--uchu-yin-1);
+                color: var(--uchu-yin-7);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-yin-1);
+                }
+              }
+
+              &:nth-child(4) {
+                color: oklch(0.58 0.04 353);
+
+                &:not(:hover) {
+                  background-color: oklch(0.89 0.036 355);
+                }
+
+                &:hover {
+                  background-color: oklch(0.92 0.028 351);
+                }
+              }
+            }
+          }
+
+          .palette {
+            a {
+              &.blue {
+                background-color: var(--uchu-blue-4);
+              }
+
+              &.gray {
+                background-color: var(--uchu-gray-4);
+              }
+
+              &.green {
+                background-color: var(--uchu-green-4);
+              }
+
+              &.orange {
+                background-color: var(--uchu-orange-4);
+              }
+
+              &.pink {
+                background-color: var(--uchu-pink-4);
+              }
+
+              &.purple {
+                background-color: var(--uchu-purple-4);
+              }
+
+              &.red {
+                background-color: var(--uchu-red-4);
+              }
+
+              &.yellow {
+                background-color: var(--uchu-yellow-4);
+              }
+            }
+          }
+        }
+
+        &.orange {
+          .info {
+            background-color: var(--uchu-orange-1);
+            color: var(--uchu-orange-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-orange-2);
+            color: var(--uchu-orange-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-orange-3);
+            color: var(--uchu-orange-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-orange-4);
+            color: var(--uchu-orange-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-orange-5);
+            color: var(--uchu-orange-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-orange-6);
+            color: var(--uchu-orange-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-orange-7);
+            color: var(--uchu-orange-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-orange-8);
+            color: var(--uchu-orange-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-orange-9);
+            color: var(--uchu-orange-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-orange-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.pink {
+          .info {
+            background-color: var(--uchu-pink-1);
+            color: var(--uchu-pink-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-pink-2);
+            color: var(--uchu-pink-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-pink-3);
+            color: var(--uchu-pink-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-pink-4);
+            color: var(--uchu-pink-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-pink-5);
+            color: var(--uchu-pink-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-pink-6);
+            color: var(--uchu-pink-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-pink-7);
+            color: var(--uchu-pink-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-pink-8);
+            color: var(--uchu-pink-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-pink-9);
+            color: var(--uchu-pink-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-pink-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.purple {
+          .info {
+            background-color: var(--uchu-purple-1);
+            color: var(--uchu-purple-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-purple-2);
+            color: var(--uchu-purple-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-purple-3);
+            color: var(--uchu-purple-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-purple-4);
+            color: var(--uchu-purple-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-purple-5);
+            color: var(--uchu-purple-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-purple-6);
+            color: var(--uchu-purple-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-purple-7);
+            color: var(--uchu-purple-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-purple-8);
+            color: var(--uchu-purple-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-purple-9);
+            color: var(--uchu-purple-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-purple-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.red {
+          .info {
+            background-color: var(--uchu-red-1);
+            color: var(--uchu-red-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-red-2);
+            color: var(--uchu-red-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-red-3);
+            color: var(--uchu-red-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-red-4);
+            color: var(--uchu-red-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-red-5);
+            color: var(--uchu-red-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-red-6);
+            color: var(--uchu-red-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-red-7);
+            color: var(--uchu-red-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-red-8);
+            color: var(--uchu-red-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-red-9);
+            color: var(--uchu-red-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-red-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.yellow {
+          .info {
+            background-color: var(--uchu-yellow-1);
+            color: var(--uchu-yellow-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-yellow-2);
+            color: var(--uchu-yellow-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-yellow-3);
+            color: var(--uchu-yellow-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-yellow-4);
+            color: var(--uchu-yellow-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-yellow-5);
+            color: var(--uchu-yellow-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-yellow-6);
+            color: var(--uchu-yellow-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-yellow-7);
+            color: var(--uchu-yellow-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-yellow-8);
+            color: var(--uchu-yellow-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-yellow-9);
+            color: var(--uchu-yellow-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yellow-9) 0%, transparent 100%);
+            }
+          }
+        }
+
+        &.yin {
+          .info {
+            background-color: var(--uchu-yin-1);
+            color: var(--uchu-yin-9);
+          }
+
+          .swatch:nth-child(1) {
+            background-color: var(--uchu-yin-2);
+            color: var(--uchu-yin-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(2) {
+            background-color: var(--uchu-yin-3);
+            color: var(--uchu-yin-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-3) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(3) {
+            background-color: var(--uchu-yin-4);
+            color: var(--uchu-yin-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-4) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(4) {
+            background-color: var(--uchu-yin-5);
+            color: var(--uchu-yin-9);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-5) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(5) {
+            background-color: var(--uchu-yin-6);
+            color: var(--uchu-yin-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-6) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(6) {
+            background-color: var(--uchu-yin-7);
+            color: var(--uchu-yin-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-7) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(7) {
+            background-color: var(--uchu-yin-8);
+            color: var(--uchu-yin-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-8) 0%, transparent 100%);
+            }
+          }
+
+          .swatch:nth-child(8) {
+            background-color: var(--uchu-yin-9);
+            color: var(--uchu-yin-1);
+
+            p::after {
+              background-image: linear-gradient(to top, var(--uchu-yin-9) 0%, transparent 100%);
+            }
+          }
+        }
+      }
+
+      .notify {
+        background-color: oklch(var(--uchu-yin-9-raw) / 85%);
+      }
+
+      .dsgn {
+        background-color: var(--uchu-yin);
+        color: var(--uchu-yang);
+        cursor: default;
+        font-family: monospace;
+        font-size: 12px;
+        letter-spacing: 0.025rem;
+        line-height: 1;
+        overflow: hidden;
+        padding: 0.5ch 2ch;
+        padding-top: 0.5ch;
+        position: relative;
+        text-transform: lowercase;
+
+        &:hover {
+          animation: gradient 15s ease infinite;
+         	background-image: linear-gradient(45deg, var(--uchu-pink-4), var(--uchu-blue-4), var(--uchu-red-4), var(--uchu-purple-4));
+         	background-size: 400% 400%;
+
+          &::after {
+            animation: 1s ease-in-out hover-dsgn;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+        }
+
+        &::before {
+          width: 100%; height: 1px;
+
+          background-color: oklch(var(--uchu-yang-raw) / 10%);
+          left: 0;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-gray-1);
+          left: -10ch;
+          opacity: 0.3;
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        a {
+          color: inherit;
+          font-weight: 600;
+          text-decoration: underline;
+        }
+      }
+
+      @keyframes gradient {
+       	0% {
+      		background-position: 0% 50%;
+       	}
+
+       	50% {
+      		background-position: 100% 50%;
+       	}
+
+       	100% {
+      		background-position: 0% 50%;
+       	}
+      }
+
+      @keyframes hover-dsgn {
+        0% {
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        100% {
+          opacity: 0;
+          transform: skew(40deg, 0deg) translateX(103vw);
+        }
+      }
+    </style>
+
+    <script src="./asset/script/shared.js"></script>
+  </head>
+
+  <body>
+    <audio id="speak" preload>
+      <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /-->
+      <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/>
+      <source src="./asset/audio/pronounciation.wav" type="audio/wav"/>
+      <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/>
+    </audio>
+
+    <section class="intro">
+      <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1>
+
+      <nav class="palette">
+        <a class="gray" href="#uchu_gray"></a>
+        <a class="red" href="#uchu_red"></a>
+        <a class="pink" href="#uchu_pink"></a>
+        <a class="purple" href="#uchu_purple"></a>
+        <a class="blue" href="#uchu_blue"></a>
+        <a class="green" href="#uchu_green"></a>
+        <a class="yellow" href="#uchu_yellow"></a>
+        <a class="orange" href="#uchu_orange"></a>
+      </nav>
+
+      <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p>
+
+      <nav class="links">
+        <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
+        <a class="link" href="/">Expanded Palette</a>
+        <a class="link" href="./simple.html">Simple Palette</a>
+        <a class="link" href="./pastel-simple.html">Simple Pastel Palette</a>
+      </nav>
+    </section>
+
+    <section class="gray" id="uchu_gray">
+      <div class="info">
+        <p>oklch(0.9557 0.003 286.35)</p>
+        <h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.9204 0.002 197.12)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.8828 0.003 286.34)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.8468 0.002 197.12)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.8073 0.002 247.84)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.7503 0.002 247.85)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.6901 0.003 286.32)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.6312 0.004 219.55)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.5682 0.004 247.89)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="red" id="uchu_red">
+      <div class="info">
+        <p>oklch(0.89 0.032 2)</p>
+        <h2><span>var(</span>--uchu-red-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.78 0.06 3)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.68 0.088 5)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.59 0.12 8)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.52 0.136 14)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.49 0.128 13)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.45 0.116 13)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.41 0.104 12)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.37 0.092 11)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="pink" id="uchu_pink">
+      <div class="info">
+        <p>oklch(0.96 0.016 353)</p>
+        <h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.92 0.028 351)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.89 0.036 355)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.85 0.048 353)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.82 0.06 354)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.76 0.056 354)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.7 0.048 355)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.64 0.044 354)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.58 0.04 353)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="purple" id="uchu_purple">
+      <div class="info">
+        <p>oklch(0.89 0.028 304)</p>
+        <h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.79 0.052 307)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.68 0.072 305)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.57 0.1 304)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.46 0.128 303)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.43 0.116 303)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.4 0.108 302)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.37 0.1 303)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.34 0.084 302)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="blue" id="uchu_blue">
+      <div class="info">
+        <p>oklch(0.9 0.028 261)</p>
+        <h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.8 0.048 260)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.7 0.072 259)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.6 0.096 259)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.51 0.124 262)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.48 0.112 261)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.44 0.1 261)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.41 0.096 262)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.37 0.084 261)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="green" id="uchu_green">
+      <div class="info">
+        <p>oklch(0.94 0.032 149)</p>
+        <h2><span>var(</span>--uchu-green-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.88 0.056 148)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.83 0.076 147)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.78 0.1 146)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.73 0.116 145)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.68 0.108 145)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.63 0.1 145)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.57 0.088 146)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.51 0.08 146)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="yellow" id="uchu_yellow">
+      <div class="info">
+        <p>oklch(0.97 0.024 94)</p>
+        <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.95 0.036 92)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.92 0.052 92)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.9 0.068 91)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.88 0.084 92)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.82 0.076 92)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.75 0.068 92)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.69 0.064 91)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.62 0.056 90)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="orange" id="uchu_orange">
+      <div class="info">
+        <p>oklch(0.94 0.02 55)</p>
+        <h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.88 0.04 56)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.83 0.056 57)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.78 0.076 55)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.73 0.092 53)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.68 0.084 54)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.62 0.076 54)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.57 0.068 54)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.51 0.06 53)</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="yin" id="uchu_yin">
+      <div class="info">
+        <p>oklch(0.9187 0.003 264.54)</p>
+        <h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
+        <h3>1</h3>
+      </div>
+
+      <ul class="swatches">
+        <li class="swatch">
+          <h3>2</h3>
+          <p>oklch(0.8461 0.004 286.31)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>3</h3>
+          <p>oklch(0.7689 0.004 247.87)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>4</h3>
+          <p>oklch(0.6917 0.004 247.88)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>5</h3>
+          <p>oklch(0.6101 0.005 271.34)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>6</h3>
+          <p>oklch(0.5279 0.005 271.32)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>7</h3>
+          <p>oklch(0.4387 0.005 271.3)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>8</h3>
+          <p>oklch(0.3502 0.005 236.66)</p>
+        </li>
+
+        <li class="swatch">
+          <h3>9</h3>
+          <p>oklch(0.2511 0.006 258.36)</p>
+        </li>
+      </ul>
+    </section>
+
+    <aside class="notify">
+      <p>Color value added to clipboard</p>
+    </aside>
+
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
+    <script>
+      const swatches = document.querySelectorAll([".info", ".swatch"]);
+      let notifierTimeout;
+
+      swatches.forEach(swatch => {
+        swatch.addEventListener("click", () => {
+          const colorValue = swatch.getElementsByTagName("p")[0].textContent;
+          const notifier = document.querySelector(".notify");
+
+          notifier.classList.remove("active");
+
+          if (copyTextToClipboard(colorValue)) {
+            clearTimeout(notifierTimeout);
+            notifier.classList.add("active");
+
+            notifierTimeout = setTimeout(() => {
+              notifier.classList.remove("active");
+            }, 1500);
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/demo/simple.html b/demo/simple.html
index e1d95f1..e475417 100644
--- a/demo/simple.html
+++ b/demo/simple.html
@@ -25,7 +25,7 @@
     <link rel="icon" href="./favicon.svg"/>
 
     <link href="./asset/style/uchu-reduced.css" rel="stylesheet"/>
-    <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+    <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
 
     <style>
       body {
@@ -166,7 +166,7 @@
                 }
               }
 
-              &:not(:first-of-type) {
+              &:nth-child(2) {
                 color: var(--uchu-dark-pink);
 
                 &:not(:hover) {
@@ -177,6 +177,31 @@
                   background-color: var(--uchu-light-pink);
                 }
               }
+
+              &:nth-child(3) {
+                color: oklch(0.58 0.04 353);
+
+                &:not(:hover) {
+                  background-color: oklch(0.89 0.036 355);
+                }
+
+                &:hover {
+                  background-color: oklch(0.92 0.028 351);
+                }
+              }
+
+              &:nth-child(4) {
+                border: 1px solid var(--uchu-light-yin);
+                color: var(--uchu-yin);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-light-yin);
+                }
+              }
             }
           }
 
@@ -371,6 +396,87 @@
       .notify {
         background-color: var(--uchu-yin);
       }
+
+      .dsgn {
+        background-color: var(--uchu-yin);
+        color: var(--uchu-yang);
+        cursor: default;
+        font-family: monospace;
+        font-size: 12px;
+        letter-spacing: 0.025rem;
+        line-height: 1;
+        overflow: hidden;
+        padding: 0.5ch 2ch;
+        padding-top: 0.5ch;
+        position: relative;
+        text-transform: lowercase;
+
+        &:hover {
+          animation: gradient 15s ease infinite;
+         	background-image: linear-gradient(45deg, var(--uchu-pink), var(--uchu-blue), var(--uchu-red), var(--uchu-purple));
+         	background-size: 400% 400%;
+
+          &::after {
+            animation: 1s ease-in-out hover-dsgn;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+        }
+
+        &::before {
+          width: 100%; height: 1px;
+
+          background-color: var(--uchu-yang);
+          left: 0;
+          opacity: 0.1;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-light-gray);
+          left: -10ch;
+          opacity: 0.3;
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        a {
+          color: inherit;
+          font-weight: 600;
+          text-decoration: underline;
+        }
+      }
+
+      @keyframes gradient {
+       	0% {
+      		background-position: 0% 50%;
+       	}
+
+       	50% {
+      		background-position: 100% 50%;
+       	}
+
+       	100% {
+      		background-position: 0% 50%;
+       	}
+      }
+
+      @keyframes hover-dsgn {
+        0% {
+          transform: skew(40deg, 0deg) translateX(-3vw);
+        }
+
+        100% {
+          opacity: 0;
+          transform: skew(40deg, 0deg) translateX(103vw);
+        }
+      }
     </style>
 
     <script src="./asset/script/shared.js"></script>
@@ -402,177 +508,179 @@
 
       <nav class="links">
         <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
-        <a class="link" href="./index.html">Expanded Palette</a>
+        <a class="link" href="/">Palette</a>
+        <a class="link" href="./pastel.html">Pastel Palette</a>
+        <a class="link" href="./pastel-simple.html">Simple Pastel Palette</a>
       </nav>
     </section>
 
     <section class="gray" id="uchu_gray">
       <div class="info">
-        <p>oklch(95.57% 0.003 286.35)</p>
+        <p>oklch(0.9557 0.003 286.35)</p>
         <h2><span>var(</span>--uchu-light-gray<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-gray<span>)</span></h3>
-          <p>oklch(84.68% 0.002 197.12)</p>
+          <p>oklch(0.8468 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3>
-          <p>oklch(63.12% 0.004 219.55)</p>
+          <p>oklch(0.6312 0.004 219.55)</p>
         </li>
       </ul>
     </section>
 
     <section class="red" id="uchu_red">
       <div class="info">
-        <p>oklch(88.98% 0.052 3.28)</p>
+        <p>oklch(0.8898 0.052 3.28)</p>
         <h2><span>var(</span>--uchu-light-red<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-red<span>)</span></h3>
-          <p>oklch(62.73% 0.209 12.37)</p>
+          <p>oklch(0.6273 0.209 12.37)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-red<span>)</span></h3>
-          <p>oklch(45.8% 0.177 17.7)</p>
+          <p>oklch(0.458 0.177 17.7)</p>
         </li>
       </ul>
     </section>
 
     <section class="pink" id="uchu_pink">
       <div class="info">
-        <p>oklch(95.8% 0.023 354.27)</p>
+        <p>oklch(0.958 0.023 354.27)</p>
         <h2><span>var(</span>--uchu-light-pink<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-pink<span>)</span></h3>
-          <p>oklch(85.43% 0.09 354.1)</p>
+          <p>oklch(0.8543 0.09 354.1)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3>
-          <p>oklch(64.11% 0.084 353.91)</p>
+          <p>oklch(0.6411 0.084 353.91)</p>
         </li>
       </ul>
     </section>
 
     <section class="purple" id="uchu_purple">
       <div class="info">
-        <p>oklch(89.1% 0.046 305.24)</p>
+        <p>oklch(0.891 0.046 305.24)</p>
         <h2><span>var(</span>--uchu-light-purple<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-purple<span>)</span></h3>
-          <p>oklch(58.47% 0.181 302.06)</p>
+          <p>oklch(0.5847 0.181 302.06)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3>
-          <p>oklch(39.46% 0.164 298.29)</p>
+          <p>oklch(0.3946 0.164 298.29)</p>
         </li>
       </ul>
     </section>
 
     <section class="blue" id="uchu_blue">
       <div class="info">
-        <p>oklch(89.66% 0.046 260.67)</p>
+        <p>oklch(0.8966 0.046 260.67)</p>
         <h2><span>var(</span>--uchu-light-blue<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-blue<span>)</span></h3>
-          <p>oklch(62.39% 0.181 258.33)</p>
+          <p>oklch(0.6239 0.181 258.33)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3>
-          <p>oklch(43.48% 0.17 260.2)</p>
+          <p>oklch(0.4348 0.17 260.2)</p>
         </li>
       </ul>
     </section>
 
     <section class="green" id="uchu_green">
       <div class="info">
-        <p>oklch(93.96% 0.05 148.74)</p>
+        <p>oklch(0.9396 0.05 148.74)</p>
         <h2><span>var(</span>--uchu-light-green<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-green<span>)</span></h3>
-          <p>oklch(79.33% 0.179 145.62)</p>
+          <p>oklch(0.7933 0.179 145.62)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-green<span>)</span></h3>
-          <p>oklch(58.83% 0.158 145.05)</p>
+          <p>oklch(0.5883 0.158 145.05)</p>
         </li>
       </ul>
     </section>
 
     <section class="yellow" id="uchu_yellow">
       <div class="info">
-        <p>oklch(97.05% 0.039 91.2)</p>
+        <p>oklch(0.9705 0.039 91.2)</p>
         <h2><span>var(</span>--uchu-light-yellow<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-yellow<span>)</span></h3>
-          <p>oklch(90.92% 0.125 92.56)</p>
+          <p>oklch(0.9092 0.125 92.56)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3>
-          <p>oklch(69.14% 0.109 91.04)</p>
+          <p>oklch(0.6914 0.109 91.04)</p>
         </li>
       </ul>
     </section>
 
     <section class="orange" id="uchu_orange">
       <div class="info">
-        <p>oklch(93.83% 0.037 56.93)</p>
+        <p>oklch(0.9383 0.037 56.93)</p>
         <h2><span>var(</span>--uchu-light-orange<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-orange<span>)</span></h3>
-          <p>oklch(78.75% 0.141 54.32)</p>
+          <p>oklch(0.7875 0.141 54.32)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3>
-          <p>oklch(58.28% 0.128 52.2)</p>
+          <p>oklch(0.5828 0.128 52.2)</p>
         </li>
       </ul>
     </section>
 
     <section class="yin" id="uchu_yin">
       <div class="info">
-        <p>oklch(91.87% 0.003 264.54)</p>
+        <p>oklch(0.9187 0.003 264.54)</p>
         <h2><span>var(</span>--uchu-light-yin<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-yin<span>)</span></h3>
-          <p>oklch(14.38% 0.007 256.88)</p>
+          <p>oklch(0.1438 0.007 256.88)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-yang<span>)</span></h3>
-          <p>oklch(99.4% 0 0)</p>
+          <p>oklch(0.994 0 0)</p>
         </li>
       </ul>
     </section>
@@ -581,6 +689,10 @@
       <p>Color value added to clipboard</p>
     </aside>
 
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
     <script>
       const swatches = document.querySelectorAll([".info", ".swatch"]);
       let notifierTimeout;