From 6534dc58ab313bdf390e1ae7828cd81ee22a9f8a Mon Sep 17 00:00:00 2001
From: Yu Cong <sxlxcsxlxc@gmail.com>
Date: Sun, 22 Mar 2026 12:36:46 +0800
Subject: [PATCH] codex update the css.

---
 css/chao-theorems.css | 120 ++++++---
 css/default.css       | 585 +++++++++++++++++++++++++++++++-----------
 css/pygentize.css     | 112 +++++---
 css/sidenotes.css     | 114 ++++----
 4 files changed, 661 insertions(+), 270 deletions(-)

diff --git a/css/chao-theorems.css b/css/chao-theorems.css
index c67a99d..1f78a99 100644
--- a/css/chao-theorems.css
+++ b/css/chao-theorems.css
@@ -1,88 +1,130 @@
 .theorem-environment {
-  font-style: italic;
-  margin-top: 1em;
-  background-color: whitesmoke;
+    position: relative;
+    margin: 1.5rem 0;
+    padding: 1rem 1.25rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
+    font-style: italic;
+}
+
+.theorem-environment > :first-child {
+    margin-top: 0;
+}
+
+.theorem-environment > :last-child {
+    margin-bottom: 0;
 }
 
 .theorem-header {
-  font-weight: bold;
-  font-style: normal;
+    color: var(--color-text);
+    font-weight: 700;
+    font-style: normal;
 }
 
 .theorem-header .index:before {
-  content: ' ';
+    content: " ";
 }
 
 .theorem-header .name:before {
-  content: ' (';
+    content: " (";
 }
 
 .theorem-header .name:after {
-  content: ')';
+    content: ")";
 }
 
 .theorem-header:after {
-  content: '.\2002\2002';
+    content: ".\2002\2002";
 }
 
-.theorem-header+p {
-  display: inline;
-}
-
-.Proof .type {
-  font-style: italic;
-  font-weight: normal;
+.theorem-header + p {
+    display: inline;
 }
 
 .Proof {
-  font-style: normal;
-  position: relative;
+    padding-right: 2.5rem;
+    font-style: normal;
+}
+
+.Proof .type {
+    color: var(--color-linkh);
+    font-weight: 400;
+    font-style: italic;
 }
 
 .Proof:after {
-  content: '∎';
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
+    content: "\220e";
+    position: absolute;
+    right: 1rem;
+    bottom: 0.85rem;
+    color: var(--color-tag1);
 }
 
 table.postindex {
-  width: 100%;
+    width: 100%;
+    border: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: transparent;
+    box-shadow: none;
 }
 
 table.postindex cite {
-  font-style: normal;
+    font-style: normal;
+}
+
+table.postindex td {
+    padding: 0.65rem 0;
+    border: 0;
+    border-bottom: 1px solid var(--color-border);
+    background: transparent;
+}
+
+table.postindex tr:nth-child(even) td {
+    background: transparent;
+}
+
+table.postindex tr:last-child td {
+    border-bottom: 0;
 }
 
 table.postindex td.right {
-  text-align: right;
-  width: 11ex;
+    width: 11ex;
+    color: var(--color-tag1);
+    text-align: right;
+    white-space: nowrap;
 }
 
 .header-section-number {
-  margin-right: 10px;
+    margin-right: 0.55rem;
+    color: var(--color-tag1);
 }
 
 .header-section-number:after {
-  content: '.';
+    content: ".";
 }
 
 .csl-entry {
-  display: table;
-  width: 100%;
-  table-layout: auto;
+    display: table;
+    width: 100%;
+    margin-bottom: 0.75rem;
+    table-layout: auto;
 }
 
 .csl-left-margin {
-  display: table-cell;
-  padding-right: 0.5em;
-  white-space: nowrap;
-  width: 1px;
+    display: table-cell;
+    width: 1px;
+    padding-right: 0.75em;
+    color: var(--color-tag1);
+    white-space: nowrap;
 }
 
 .csl-right-inline {
-  display: table-cell;
+    display: table-cell;
+}
+
+.csl-right-inline a {
+    word-break: break-all;
 }
-.csl-right-inline a{
-  word-break: break-all;
-}
\ No newline at end of file
diff --git a/css/default.css b/css/default.css
index 642ada1..b3d7e67 100644
--- a/css/default.css
+++ b/css/default.css
@@ -1,69 +1,170 @@
 :root {
-    --color-text: black;
-    --color-tag1: gray;
-    --color-tag2: darkolivegreen;
-    --color-bg: white;
-    --color-link: #337ab7;
-    --color-linkhbg: #e6f0ff;
-    --color-linkh: #002266;
-    --color-bq: olivedrab;
-    --color-notice: #fb4f4f;
+    color-scheme: light;
+    --color-text: #162031;
+    --color-tag1: #6c788c;
+    --color-tag2: #547157;
+    --color-bg: #f3f6fb;
+    --color-surface: rgba(255, 255, 255, 0.84);
+    --color-surface-strong: #ffffff;
+    --color-surface-muted: #edf3fb;
+    --color-border: rgba(22, 32, 49, 0.12);
+    --color-border-strong: rgba(22, 32, 49, 0.2);
+    --color-link: #225b9c;
+    --color-link-line: rgba(34, 91, 156, 0.28);
+    --color-linkhbg: rgba(89, 143, 211, 0.16);
+    --color-linkh: #163a63;
+    --color-bq: #628b72;
+    --color-notice: #d0455a;
+    --color-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+    --color-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
+    --code-bg: #f6f8fc;
+    --code-border: rgba(55, 65, 81, 0.14);
+    --page-glow-1: rgba(144, 187, 241, 0.18);
+    --page-glow-2: rgba(99, 141, 118, 0.14);
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-text: white;
-        --color-bg: black;
+        color-scheme: dark;
+        --color-text: #e7edf7;
+        --color-tag1: #9aa7bb;
+        --color-tag2: #9abf9c;
+        --color-bg: #0b1020;
+        --color-surface: rgba(15, 23, 42, 0.78);
+        --color-surface-strong: #101827;
+        --color-surface-muted: #162238;
+        --color-border: rgba(148, 163, 184, 0.18);
+        --color-border-strong: rgba(148, 163, 184, 0.26);
+        --color-link: #8bc3ff;
+        --color-link-line: rgba(139, 195, 255, 0.35);
+        --color-linkhbg: rgba(139, 195, 255, 0.16);
+        --color-linkh: #d9ecff;
+        --color-bq: #8db59a;
+        --color-notice: #ff8b8b;
+        --color-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+        --color-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.3);
+        --code-bg: #0f172a;
+        --code-border: rgba(148, 163, 184, 0.22);
+        --page-glow-1: rgba(71, 119, 183, 0.22);
+        --page-glow-2: rgba(74, 118, 90, 0.18);
     }
 }
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 html {
     scrollbar-gutter: stable;
+    scroll-behavior: smooth;
     font-size: 14pt;
 }
 
 body {
-    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    box-sizing: content-box;
+    margin: 0;
+    font-family: "Lato", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
     font-size: 1rem;
-    line-height: 125%;
+    line-height: 1.5;
     color: var(--color-text);
-    background-color: var(--color-bg);
+    background:
+        radial-gradient(circle at top, var(--page-glow-1), transparent 38%),
+        radial-gradient(circle at right top, var(--page-glow-2), transparent 30%),
+        var(--color-bg);
+    background-attachment: fixed;
     text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
 }
+
 body.lang-zh {
     text-align: left;
 }
 
+::selection {
+    background-color: var(--color-linkhbg);
+    color: var(--color-linkh);
+}
+
+main,
+.text-space {
+    min-width: 0;
+}
+
 body a {
     color: var(--color-link);
-    text-decoration: none;
+    text-decoration: underline;
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.18em;
+    text-decoration-color: var(--color-link-line);
+    transition:
+        color 0.18s ease,
+        background-color 0.18s ease,
+        text-decoration-color 0.18s ease;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+
+body a:visited {
+    color: var(--color-link);
 }
 
 .text-space a:hover {
     background-color: var(--color-linkhbg);
     color: var(--color-linkh);
-    text-decoration: none;
-}
-details {
-    background-color: var(--color-linkhbg);
-}
-summary:hover {
-    cursor: pointer;
+    text-decoration-color: transparent;
+    border-radius: 0.2rem;
 }
 
-/*mathML*/
-.htmlmathparagraph, mtext,math {
-    font-family: Lete Sans Math;
+body a:focus-visible {
+    outline: 2px solid var(--color-link);
+    outline-offset: 3px;
+    border-radius: 0.25rem;
 }
+
+details {
+    margin: 1.25rem 0;
+    padding: 0.85rem 1rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
+}
+
+details[open] summary {
+    margin-bottom: 0.75rem;
+}
+
+details > :last-child {
+    margin-bottom: 0;
+}
+
+summary {
+    font-weight: 700;
+}
+
+summary:hover {
+    cursor: pointer;
+    color: var(--color-linkh);
+}
+
+/* mathML */
+.htmlmathparagraph,
+mtext,
+math {
+    font-family: "Lete Sans Math";
+}
+
 .math-container,
 #math-container {
     display: block;
     overflow-x: auto;
     overflow-y: hidden;
-    padding: .5em;
+    padding: 0.5em;
 }
 
 .math-container.math-container-tagged {
@@ -72,7 +173,7 @@ summary:hover {
     align-items: center;
     column-gap: 1rem;
     overflow: visible;
-    padding: .5em 0;
+    padding: 0.5em 0;
 }
 
 .math-container.math-container-tagged .math-tag-spacer {
@@ -83,7 +184,7 @@ summary:hover {
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
-    padding: .5em 0;
+    padding: 0.5em 0;
 }
 
 .math-container.math-container-tagged .math-tag {
@@ -105,6 +206,7 @@ summary:hover {
 }
 
 p {
+    margin: 0 0 1rem;
     hyphens: auto;
 }
 
@@ -117,21 +219,25 @@ header {
     font-family: "IosevkaC", sans-serif;
 }
 
-/* top bar*/
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
+}
+
+.navright {
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .navright a {
     margin: 0 0 0 1em;
 }
 
-/* Links inside the navbar */
 .navbar a {
-    text-decoration: none;
     color: var(--color-text);
+    text-decoration: none;
 }
 
 .navbar a:visited {
@@ -139,37 +245,32 @@ header {
 }
 
 nav {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.75rem;
     text-align: right;
-    border-bottom: solid 1px var(--color-text);
+    border-bottom: 1px solid var(--color-border-strong);
 }
 
 nav a {
-    font-size: 1.2rem;
-    /*margin-left: 0.5em;*/
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     vertical-align: middle;
+    font-size: 1.05rem;
     text-decoration: none;
 }
 
 .uri {
-    word-wrap: break-word;
-    /* Legacy support */
-    overflow-wrap: break-word;
-    /* Modern property */
-    word-break: break-all;
-    /* Break long words if necessary */
+    overflow-wrap: anywhere;
+    word-break: break-word;
     white-space: normal;
-    /* Allow wrapping */
 }
 
-
-
 footer {
-    color: var(--color-text);
-    font-size: 0.8rem;
-    margin-top: 2em;
+    margin-top: 3rem;
+    padding-right: 0.2rem;
+    color: var(--color-tag1);
+    font-size: 0.82rem;
     text-align: right;
-    padding-right: 1em;
 }
 
 h1,
@@ -179,47 +280,63 @@ h4,
 h5,
 h6 {
     text-align: left;
+    text-wrap: balance;
 }
 
 .pagetitle {
+    margin: 0;
     font-size: 2rem;
-    font-weight: normal;
+    font-weight: 400;
     font-style: normal;
     text-align: left;
-    line-height: 100%;
+    line-height: 1;
+    letter-spacing: -0.03em;
 }
 
 h1 {
-    margin-top: 1em;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
     font-size: 1.44rem;
-    font-weight: bold;
+    font-weight: 700;
     font-style: normal;
-    text-align: left;
-    line-height: 100%;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
 }
 
 h2 {
-    margin-top: 1em;
+    margin-top: 1.75rem;
+    margin-bottom: 0.7rem;
     font-size: 1.2rem;
-    font-weight: bold;
-    font-style: normal
+    font-weight: 700;
+    font-style: normal;
+    line-height: 1.2;
 }
 
 h3 {
-    margin-top: 1em;
+    margin-top: 1.5rem;
+    margin-bottom: 0.6rem;
     font-size: 1rem;
-    font-weight: bold;
-    font-style: normal
+    font-weight: 700;
+    font-style: normal;
+    line-height: 1.25;
+}
+
+h4,
+h5,
+h6 {
+    margin-top: 1.35rem;
+    margin-bottom: 0.55rem;
+    line-height: 1.3;
 }
 
 article .header {
+    color: var(--color-tag1);
     font-size: 1rem;
     font-style: normal;
-    color: var(--color-tag1);
     text-align: left;
+    letter-spacing: 0.02em;
 }
 
-
 .info {
     color: var(--color-tag2);
     font-size: 1rem;
@@ -239,196 +356,351 @@ article .header {
 }
 
 section.body {
-    margin-top: 2rem;
+    margin-top: 1.75rem;
+}
+
+section.body > :first-child {
+    margin-top: 0;
 }
 
 .ascii-art {
+    overflow-x: auto;
     font-family: monospace;
-    line-height: normal;
+    line-height: 1.2;
 }
 
 blockquote {
-    margin: 1rem 0;
-    padding: 0 0 0 1.5em;
-    border-left: 3px solid var(--color-bq);
+    margin: 1.5rem 0;
+    padding: 1rem 1.25rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-left: 4px solid var(--color-bq);
+    border-radius: 0 1rem 1rem 0;
+    box-shadow: var(--color-shadow-soft);
 }
 
 blockquote p {
     margin: 0;
 }
 
-ol {
-    padding-left: 2em;
-}
+ol,
 ul {
-    list-style-type: square;
+    margin: 0 0 1.1rem;
     padding-left: 2em;
 }
-li {
-    margin-bottom: 0.15em;
-}
 
-table,
+ul {
+    list-style-type: square;
+}
+
+li {
+    margin-bottom: 0.3em;
+    padding-left: 0.15em;
+}
+
+li::marker {
+    color: var(--color-tag2);
+}
+
+table {
+    margin: 1.5rem 0;
+    border: 1px solid var(--color-border-strong);
+    border-collapse: collapse;
+    background-color: var(--color-surface-strong);
+    box-shadow: var(--color-shadow-soft);
+}
+
 th,
 td {
-    border: 1px solid darkolivegreen;
-    border-collapse: collapse;
+    padding: 0.65rem 0.8rem;
+    border: 1px solid var(--color-border);
     text-align: left;
+    vertical-align: top;
+}
+
+th {
+    background-color: var(--color-surface-muted);
+}
+
+tr:nth-child(even) td {
+    background-color: var(--color-surface);
 }
 
 figure {
     display: flex;
     flex-flow: column;
-    padding: 5px;
-    margin: auto;
+    gap: 0.75rem;
+    padding: 0.9rem;
+    margin: 1.5rem auto;
     max-width: 80%;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1.25rem;
+    box-shadow: var(--color-shadow-soft);
 }
 
+figure img {
+    border-radius: 0.9rem;
+}
 
 figcaption {
-    /* font: italic smaller sans-serif; */
-    padding: 3px;
+    padding: 0 0.25rem;
+    color: var(--color-tag1);
+    font-size: 0.92rem;
     text-align: center;
 }
 
 .caption {
-    display: none
+    display: none;
 }
 
 .centerimg img {
-    margin: 0 auto 0 auto;
     display: block;
+    margin: 0 auto;
 }
 
-
-div.highlight,
-pre code {
-    margin: auto;
-    padding: 10px;
+pre,
+div.highlight {
+    margin: 1.5rem 0;
+    padding: 1rem 1.1rem;
     overflow: auto;
+    background-color: var(--code-bg);
+    border: 1px solid var(--code-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
+}
+
+pre code,
+div.highlight pre,
+div.highlight pre code {
     display: block;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
 }
 
 code {
+    display: inline;
+    margin: 0;
+    padding: 0.12em 0.35em;
+    background-color: var(--code-bg);
+    border: 1px solid var(--code-border);
+    border-radius: 0.45rem;
     font-family: "IosevkaC", monospace;
-    margin: 0 auto;
-    display: inline-block;
-    padding: 0px 2px;
-    border-radius: 2px;
+    font-size: 0.92em;
     font-variant-ligatures: none;
     font-kerning: none;
     text-rendering: optimizeSpeed;
 }
 
-
 .draft-notice {
+    display: table;
+    margin: 1.5rem auto;
+    padding: 0.85rem 1rem;
     color: var(--color-notice);
-    margin: 1em auto;
-    text-align: center
+    text-align: center;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-left: 4px solid var(--color-notice);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
 }
 
-
 .subtitle {
-    text-align: left;
+    margin-top: 0.5rem;
+    color: var(--color-tag1);
     font-size: 1.2rem;
-    margin-top: 0
+    line-height: 1.4;
+    text-align: left;
 }
+
+.subtitle p {
+    margin: 0.2rem 0;
+}
+
 .gallery {
-    margin-top: 2em;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 12px;
+    gap: 1rem;
+    margin-top: 2em;
 }
 
 .gallery img {
+    display: block;
     width: 100%;
     max-width: 320px;
-    display: block;
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
 }
 
-/* phones -- no sidebar no sidenotes*/
-@media (max-width: 768px) {
-    body {
-        /* width: 90%; */
-        margin: auto;
-        padding: 0 5%;
-        text-align: left;
-        max-width: 876px;
-    }
-    mjx-container[display="true"]
-    /*, .katex-display */ {
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-
-    /* .katex-display>.katex>.katex-html>.tag {
-        display: inline-block;
-        position: relative;
-        padding-left: 10pt;
-    } */
+hr {
+    margin: 2rem 0;
+    border: 0;
+    border-top: 1px solid var(--color-border-strong);
 }
 
 .toc {
     display: none;
 }
 
-/* sidebar. no sidenotes */
+/* phones: no sidebar, no sidenotes */
+@media (max-width: 768px) {
+    body {
+        max-width: 876px;
+        margin: auto;
+        padding: 1rem 5% 3rem;
+        text-align: left;
+        background-attachment: scroll;
+    }
+
+    mjx-container[display="true"] {
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    figure {
+        max-width: 100%;
+    }
+}
+
+/* sidebar, no sidenotes */
 @media (min-width: 769px) {
     body {
-        max-width: 1350px;
-        display: -webkit-flex;
-        -webkit-flex-flow: row wrap;
-        display: -ms-flexbox;
-        -ms-flex-flow: row wrap;
+        display: flex;
         flex-flow: row wrap;
         width: 95%;
-        padding-right: 5%;
+        max-width: 1350px;
         margin: auto;
+        padding: 1.5rem 5% 3rem 0;
     }
 
     .toc {
-        margin-top: 5rem;
+        display: inline-block;
+        width: 33%;
+        margin-top: 4.5rem;
         margin-left: 0;
         margin-right: 0;
-        width: 33%;
-        display: inline-block;
     }
 
     div#contents ul,
     div#contents-big ul {
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-        padding-left: 1em;
-        line-height: 1.2;
+        margin-top: 0.3em;
+        margin-bottom: 0.3em;
+        margin-left: 0.1rem;
+        padding-left: 1.45rem;
+        line-height: 1.25;
         list-style-type: decimal;
-        margin-left: 0
     }
 
     div#contents-big ul ul {
         list-style-type: none;
+        margin-top: 0.15rem;
+        margin-left: 0.2rem;
+        padding-left: 0.8rem;
+        border-left: 1px solid var(--color-border);
     }
 
-    div#contents-big li+li {
-        margin-top: 0.5em
+    div#contents-big li + li {
+        margin-top: 0.18rem;
+    }
+
+    div#contents-big li::marker {
+        color: var(--color-tag1);
+        font-family: "IosevkaC", sans-serif;
     }
 
     div#contents-big {
-        font-size: 80%;
-        padding-top: 0;
-        padding-left: 1rem;
-        text-align: left;
-        max-width: 60%;
-        clear: both;
-        margin-right: 4em;
         position: sticky;
-        top: 5rem;
-        left: 100%
+        top: 6rem;
+        left: 100%;
+        clear: both;
+        max-width: 68%;
+        margin-right: 4em;
+        padding: 0.8rem 1.15rem 0.9rem 1.45rem;
+        background-color: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: 1.25rem;
+        box-shadow: var(--color-shadow-soft);
+        backdrop-filter: blur(14px);
+        font-size: 80%;
+        text-align: left;
     }
 
     div#contents-big .mini-header {
-        font-weight: bold;
-        margin: 0;
+        margin: 0 0 0.45rem;
+        color: var(--color-tag1);
+        font-weight: 700;
         font-variant: small-caps;
+        letter-spacing: 0.08em;
+    }
+
+    div#contents-big a {
+        color: var(--color-text);
+        text-decoration: none;
+    }
+
+    div#contents-big li > a {
+        display: block;
+        margin-left: 0;
+        padding: 0.14rem 0.32rem;
+        border-radius: 0.55rem;
+        border: 1px solid transparent;
+        transition:
+            color 0.18s ease,
+            background-color 0.18s ease,
+            border-color 0.18s ease,
+            transform 0.18s ease;
+    }
+
+    div#contents-big a:visited {
+        color: var(--color-text);
+    }
+
+    div#contents-big a:hover {
+        background-color: var(--color-linkhbg);
+        color: var(--color-linkh);
+    }
+
+    div#contents-big li > a:hover,
+    div#contents-big li > a:focus-visible {
+        border-color: var(--color-border);
+        transform: translateX(2px);
+    }
+
+    div#contents-big li > a:focus-visible,
+    div#contents-big .mini-header a:focus-visible {
+        outline: 2px solid var(--color-link);
+        outline-offset: 2px;
+    }
+
+    div#contents-big .mini-header a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-left: 0.25rem;
+        background-color: var(--color-surface-muted);
+        border: 1px solid var(--color-border);
+        border-radius: 999px;
+        color: var(--color-link);
+        font-size: 0.78rem;
+        line-height: 1;
+        vertical-align: middle;
+        transition:
+            color 0.18s ease,
+            background-color 0.18s ease,
+            border-color 0.18s ease;
+    }
+
+    div#contents-big .mini-header a:hover {
+        background-color: var(--color-linkhbg);
+        border-color: var(--color-border-strong);
+        color: var(--color-linkh);
+        transform: none;
     }
 
     .text-space {
@@ -437,7 +709,8 @@ code {
         max-width: 875px;
     }
 }
-/* sidebar+sidenotes */
+
+/* sidebar + sidenotes */
 @media (min-width: 1200px) {
     body {
         width: 75%;
@@ -446,7 +719,6 @@ code {
 }
 
 @media print {
-
     .no-print,
     .no-print * {
         display: none !important;
@@ -454,5 +726,16 @@ code {
 
     body {
         margin: auto;
+        background: white;
+    }
+
+    blockquote,
+    details,
+    div#contents-big,
+    figure,
+    pre,
+    div.highlight,
+    table {
+        box-shadow: none;
     }
 }
diff --git a/css/pygentize.css b/css/pygentize.css
index acc1557..055983e 100644
--- a/css/pygentize.css
+++ b/css/pygentize.css
@@ -1,35 +1,79 @@
-
-code.sourceCode
-{
-    background: inherit
+:root {
+    --syntax-alert: #c2410c;
+    --syntax-annotation: #0f766e;
+    --syntax-attribute: #2563eb;
+    --syntax-number: #7c3aed;
+    --syntax-control: #4d7c0f;
+    --syntax-char: #0f766e;
+    --syntax-constant: #9f1239;
+    --syntax-comment: #7b8794;
+    --syntax-doc: #b45309;
+    --syntax-type-bg: #efe7ff;
+    --syntax-error: #dc2626;
+    --syntax-function: #0f4c81;
+    --syntax-import: #0d9488;
+    --syntax-preprocessor: #92400e;
+    --syntax-special: #0369a1;
+    --syntax-string: #15803d;
+    --syntax-variable: #1d4ed8;
 }
-pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
-code span.al { color: #CB4B16; font-weight: bold; } /* Alert */
-code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
-code span.at { color: #7d9029; } /* Attribute */
-code span.bn { color: #D33682; } /* BaseN */
-code span.bu { } /* BuiltIn */
-code span.cf { color: #5F8700; font-weight: bold; } /* ControlFlow */
-code span.ch { color: #16801a; } /* Char */
-code span.cn { color: #880000; } /* Constant */
-code span.co { color: #93A1A1; font-style: italic; } /* Comment */
-code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
-code span.do { color: #ba2121; font-style: italic; } /* Documentation */
-code span.dt { background-color: #f8edff; } /* DataType */
-code span.dv { color: #D33682; } /* DecVal */
-code span.er { color: #D30102; font-weight: bold; } /* Error */
-code span.ex { } /* Extension */
-code span.fl { color: #D33682; } /* Float */
-code span.fu {  } /* Function */
-code span.im { color: #D70000} /* Import */
-code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
-code span.kw { font-weight: bold; } /* Keyword */
-code span.op { font-weight: bold; } /* Operator */
-code span.ot { font-weight: bold; } /* Other */
-code span.pp { color: #bc7a00; } /* Preprocessor */
-code span.sc { color: #4070a0; } /* SpecialChar */
-code span.ss { color: #bb6688; } /* SpecialString */
-code span.st { color: #16801a; } /* String */
-code span.va { color: #19177c; } /* Variable */
-code span.vs { color: #4070a0; } /* VerbatimString */
-code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
\ No newline at end of file
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --syntax-alert: #fdba74;
+        --syntax-annotation: #99f6e4;
+        --syntax-attribute: #93c5fd;
+        --syntax-number: #d8b4fe;
+        --syntax-control: #bef264;
+        --syntax-char: #86efac;
+        --syntax-constant: #fda4af;
+        --syntax-comment: #94a3b8;
+        --syntax-doc: #fcd34d;
+        --syntax-type-bg: rgba(216, 180, 254, 0.16);
+        --syntax-error: #f87171;
+        --syntax-function: #bfdbfe;
+        --syntax-import: #5eead4;
+        --syntax-preprocessor: #fdba74;
+        --syntax-special: #7dd3fc;
+        --syntax-string: #86efac;
+        --syntax-variable: #c4b5fd;
+    }
+}
+
+code.sourceCode {
+    background: inherit;
+}
+
+pre > code.sourceCode > span > a:first-child::before {
+    text-decoration: underline;
+}
+
+code span.al { color: var(--syntax-alert); font-weight: 700; }
+code span.an { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
+code span.at { color: var(--syntax-attribute); }
+code span.bn { color: var(--syntax-number); }
+code span.bu { color: var(--syntax-function); }
+code span.cf { color: var(--syntax-control); font-weight: 700; }
+code span.ch { color: var(--syntax-char); }
+code span.cn { color: var(--syntax-constant); }
+code span.co { color: var(--syntax-comment); font-style: italic; }
+code span.cv { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
+code span.do { color: var(--syntax-doc); font-style: italic; }
+code span.dt { background-color: var(--syntax-type-bg); }
+code span.dv { color: var(--syntax-number); }
+code span.er { color: var(--syntax-error); font-weight: 700; }
+code span.ex { color: var(--syntax-function); }
+code span.fl { color: var(--syntax-number); }
+code span.fu { color: var(--syntax-function); }
+code span.im { color: var(--syntax-import); }
+code span.in { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
+code span.kw { color: var(--syntax-control); font-weight: 700; }
+code span.op { color: var(--syntax-function); font-weight: 700; }
+code span.ot { color: var(--syntax-special); font-weight: 700; }
+code span.pp { color: var(--syntax-preprocessor); }
+code span.sc { color: var(--syntax-special); }
+code span.ss { color: var(--syntax-number); }
+code span.st { color: var(--syntax-string); }
+code span.va { color: var(--syntax-variable); }
+code span.vs { color: var(--syntax-special); }
+code span.wa { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
diff --git a/css/sidenotes.css b/css/sidenotes.css
index 5bc87ad..7c72bca 100644
--- a/css/sidenotes.css
+++ b/css/sidenotes.css
@@ -1,5 +1,5 @@
-/* 
-This file is copied from 
+/*
+This file is copied from
 https://github.com/slotThe/slotThe.github.io/blob/main/css/sidenotes.css
 with minor modifications made by Yu Cong.
 
@@ -19,127 +19,148 @@ body {
 .sidenote,
 .marginnote,
 .marginnote-left {
+    position: relative;
     float: right;
     clear: right;
-    margin-right: -42%;
     width: 36%;
-    margin-top: 0.3rem;
+    margin-top: 0.45rem;
+    margin-right: -42%;
     margin-bottom: 0;
-    font-size: 0.8em;
-    line-height: 1.2;
+    padding: 0.85rem 1rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
+    backdrop-filter: blur(14px);
     vertical-align: baseline;
-    position: relative;
+    font-size: 0.82em;
+    line-height: 1.45;
     text-align: left;
 }
+
 @media (max-width: 1200px) {
     .sidenote,
     .marginnote,
     .marginnote-left {
-        margin-right: -40%;
         width: 33%;
+        margin-right: -40%;
     }
 }
 
 .marginnote-left {
+    position: relative;
     float: left;
     clear: left;
-    margin-left: -32%;
     width: 25%;
-    position: relative;
+    margin-left: -32%;
     text-align: right;
 }
-/* The first condition is for the case of a left-aligned layout (on a
-   smaller screen), and the second condition for a more centered layout
-   on a larger screen.  It's a bit awkward, sadly :/ */
-@media (max-width: 1349px) or ((min-width: 1367px) and (max-width: 1620px)) {
+
+/* The first condition is for the case of a left-aligned layout
+   (on a smaller screen), and the second condition for a more centered
+   layout on a larger screen. */
+@media (max-width: 1349px), (min-width: 1367px) and (max-width: 1620px) {
     .marginnote-left {
-        margin-left: -33%;
         width: 30%;
+        margin-left: -33%;
     }
 }
 
-.sidenote code {
-    font-size: 0.94em;
+.sidenote > :first-child,
+.marginnote > :first-child,
+.marginnote-left > :first-child {
+    margin-top: 0;
 }
 
-/* For some reason, although only `overflow-x` is set in `default.css`,
-   block code in side and marginnotes gets a vertical (!) scrollbar no
-   matter what; disable that.
-*/
+.sidenote > :last-child,
+.marginnote > :last-child,
+.marginnote-left > :last-child {
+    margin-bottom: 0;
+}
+
+.sidenote code {
+    font-size: 0.92em;
+}
+
+/* Block code in side and margin notes gets a vertical scrollbar on some
+   browsers; disable that. */
 div .marginnote pre,
 div .sidenote pre {
+    margin: 0.75rem 0;
     overflow-y: hidden;
 }
 
 .sidenote-number {
-    counter-increment: sidenote-counter;
     color: var(--color-link);
+    counter-increment: sidenote-counter;
+    font-family: "IosevkaC", sans-serif;
 }
 
 .sidenote-number:after,
 .sidenote:before {
     position: relative;
     vertical-align: baseline;
+    color: var(--color-link);
+    font-family: "IosevkaC", sans-serif;
 }
 
 .sidenote-number:after {
     content: counter(sidenote-counter);
-    font-size: 0.8rem;
     top: -0.5rem;
+    font-size: 0.8rem;
+    font-weight: 700;
 }
 
-/* Properly position siednote number and adjust position of sidenote
+/* Properly position sidenote number and adjust position of sidenote
    paragraphs:
     https://github.com/edwardtufte/tufte-css/issues/93#issuecomment-670695382
 */
 .sidenote::before {
     content: counter(sidenote-counter) " ";
-    font-size: 0.8rem;
-    top: -0.55rem;
     position: absolute;
+    top: -0.55rem;
     right: calc(100% + 0.5em);
+    font-size: 0.8rem;
+    font-weight: 700;
 }
 
 .sidenote p {
-    margin: 1em 0;
+    margin: 0.85em 0;
 }
 
-.sidenote p:first-child {
-    margin-top: 0;
-}
-
-.sidenote p:last-child {
-    margin-bottom: 0;
-}
-
-/* */
-
 input.margin-toggle {
     display: none;
 }
 
 label.sidenote-number {
     display: inline-block;
-    max-height: 2rem; /* should be less than or equal to paragraph line-height */
+    max-height: 2rem;
 }
 
 label.margin-toggle:not(.sidenote-number) {
     display: none;
+    color: var(--color-link);
+    font-family: "IosevkaC", sans-serif;
 }
 
 .iframe-wrapper {
     position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
-    padding-top: 25px;
     height: 0;
+    padding-top: 25px;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: var(--color-shadow-soft);
 }
 
 .iframe-wrapper iframe {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
+    border: 0;
 }
 
 @media (max-width: 1200px) {
@@ -153,23 +174,24 @@ label.margin-toggle:not(.sidenote-number) {
         display: none;
     }
 
-    /* Linkify sidenotes iff they are clickable */
+    /* Linkify sidenotes iff they are clickable. */
     .margin-toggle,
     .sidenote-number:after {
         color: var(--color-link);
-        text-decoration: none;
+        text-decoration: underline;
+        text-decoration-color: var(--color-link-line);
     }
 
     .margin-toggle:checked + .sidenote,
     .margin-toggle:checked + .marginnote,
     .margin-toggle:checked + .marginnote-left {
-        display: block;
+        position: relative;
         float: left;
         left: 1rem;
         clear: both;
+        display: block;
         width: 95%;
         margin: 1rem 2.5%;
-        position: relative;
         text-align: left;
     }