diff --git a/src/dark.css b/src/dark.css
index a51d8ce..60137bb 100644
--- a/src/dark.css
+++ b/src/dark.css
@@ -1,154 +1,147 @@
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: hsl(0, 0%, 20%);
-    color: #fff;
-    display: flex;
-    gap: 10px;
-    flex-direction: row-reverse;
-    overflow: auto;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    padding-left: 20px;
+    padding-right: 50px;
+    font-family: "Noto Sans", sans-serif;
+    background-color: #121212;
+    color: #ffffff;
 }
 
 @media (max-width: 768px) {
-    body {
-        padding: 0px;
+    .side #toc {
+        display: none;
     }
-}
 
-.side {
-    width: 240px;
-    display: flex;
-    flex-direction: column;
-    background-color: #2a2a2a;
-    border-radius: 10px;
-    border: solid 1px #444;
-    margin-left: auto;
-    margin-right: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
-    height: auto;
-    top: 20px;
-    padding-left: 30px;
-    padding-right: 20px;
+    body {
+        display: block;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+    }
 }
 
 @media (max-width: 768px) {
-    .side {
-        display: none;
+    .article-header .title {
+        font-size: 18px;
     }
 }
 
+.side {
+    order: 1;
+    border-right: solid 1px #555;
+    padding-right: 20px;
+}
+
 .side-sticky {
     position: sticky;
     top: 20px;
 }
 
-.content {
-    padding: 40px 20px;
-    margin-left: 0px;
-    margin-right: auto;
-    border-radius: 5px;
-    max-width: 800px;
+.article-header {
+    position: relative;
     width: 100%;
-    background-color: #444;
+    height: 200px;
+    margin-bottom: 50px;
 }
 
-.article-header {
-    margin-bottom: 30px;
+.article-header .thumbnail {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    filter: blur(3px);
 }
 
-.article-body {
-    box-shadow: 0 0 10px rgba(101, 101, 101, 0.05);
-    border-radius: 10px;
-    border: solid 1px #666;
-    padding: 40px;
-    background-color: rgb(47, 47, 47);
-    padding: 40px;
+.article-header .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.article-header .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 24px;
+    border-bottom: solid 1px #555;
+    font-weight: bold;
+    background-color: #333333aa;
+}
 
+.date {
+    font-size: 14px;
+    text-align: center;
 }
 
-@media (max-width: 768px) {
-    .content {
-        width: 100%;
-        padding: 20px;
-    }
+.date::before {
+    content: "\f073";
+    font-family: "Font Awesome 5 Free";
 }
 
-.sidebar {
-    top: 20px;
-    left: 0px;
+.tag {
+    font-size: 14px;
+    text-align: center;
 }
 
-@media (max-width: 1260px) {
-    .sidebar {
-        display: none;
-    }
+.content {
+    order: 2;
+    padding: 20px;
 }
 
-.links {
-    bottom: 0px;
-    left: 0px;
+.toc_title {
+    display: none;
 }
 
-@media (max-width: 1260px) {
-    .links {
-        display: none;
-    }
+.math-block {
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
-.title {
-    font-size: 40px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #fff;
-    /* ダークなテキスト色 */
-    text-align: center;
+.math-inline {
+    display: inline-grid;
+    overflow-x: hidden;
 }
 
-h1,
-h2 {
-    color: #fff;
-    /* ダークなテキスト色 */
-    text-align: center;
-    margin-bottom: 20px;
+mjx-container {
+    display: inline-block;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100%;
 }
 
 h2 {
-    text-align: left;
+    border-left: solid 5px #4a90e2;
     padding-left: 10px;
-    border-bottom: solid 1px #dddddd;
-}
-
-p {
-    color: #ccc;
-    margin-bottom: 10px;
 }
 
-a {
-    color: #007bff;
+img {
+    max-width: 100% !important;
+    height: auto;
 }
 
-figure {
-    text-align: center;
+@media (max-width: 768px) {
+    figure {
+        margin-left: calc(50% - 50vw);
+        margin-right: calc(50% - 50vw);
+        overflow: hidden;
+        padding: 20px;
+    }
 }
 
-figcaption {
-    text-align: center;
+h3 {
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
 pre {
     padding: 10px;
-    color: #fff;
-    border: solid 1px #a8a8a8;
-    background-color: #222;
-    overflow-x: auto;
+    background-color: #1e1e1e;
+    color: #ffffff;
 }
 
-img {
-    max-width: 100%;
-    height: auto;
+.tex-equations {
+    overflow-x: auto;
 }
 
 table {
@@ -159,22 +152,16 @@ table {
 
 th,
 td {
-    border: 1px solid #ddd;
+    border: 1px solid #555;
     padding: 8px;
+    color: #ffffff;
 }
 
-.date {
-    color: #ccc;
-    font-size: 14px;
-    margin: 0 auto;
-    text-align: center;
-}
-
-.tag {
-    color: #ccc;
-    font-size: 14px;
-    margin: 0 auto;
-    text-align: center;
+@media (max-width: 768px) {
+    .exec_plot {
+        width: 100%;
+        overflow-x: auto;
+    }
 }
 
 #toc {
@@ -182,18 +169,12 @@ td {
     border-radius: 4px;
     padding: 15px;
     list-style: none;
-    border-left: solid 1px #161616;
-}
-
-.toc_title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #e8e8e8;
+    border-left: solid 1px #555;
 }
 
 #toc a {
     text-decoration: none;
-    color: #5f5f5f;
+    color: #999;
     display: block;
     margin: 5px 0;
     transition: color 0.2s;
@@ -205,12 +186,12 @@ td {
 }
 
 #toc a:hover {
-    color: #007bff;
+    color: #4a90e2;
 }
 
 #toc .active {
     font-weight: bold;
-    color: #007bff;
+    color: #4a90e2;
     font-size: 16px;
 }
 
@@ -218,44 +199,44 @@ td {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #007bff;
-    font-weight: bold;
+    color: #4a90e2;
 }
 
 .toc_H2 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #007bff;
-    font-weight: bold;
+    color: #4a90e2;
+    padding-left: 10px;
 }
 
 .toc_H3 {
     font-size: 14px;
     margin-bottom: 10px;
-    color: #007bff;
+    color: #4a90e2;
+    padding-left: 20px;
 }
 
 .content_list_h1 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
-    border-bottom: solid 1px #007bff;
-    color: #007bff;
+    border-bottom: solid 1px #4a90e2;
+    color: #4a90e2;
 }
 
 .content_list_h2 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #007bff;
+    color: #4a90e2;
 }
 
 .content_list_problem {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #007bff;
+    color: #4a90e2;
 }
 
 .badge {
@@ -263,7 +244,7 @@ td {
     border-radius: 25px;
     font-size: 14px;
     font-weight: bold;
-    color: #ccc;
+    color: #999;
     border: 1px solid #333;
     margin: 0 8px;
     float: left;
@@ -276,18 +257,18 @@ td {
     border: none;
     border-radius: 5px;
     font-size: 16px;
-    color: #fff;
+    color: #ffffff;
     cursor: pointer;
     text-align: center;
     text-decoration: none;
 }
 
 .runbutton {
-    background-color: #007bff;
+    background-color: #4a90e2;
 }
 
 .runbutton:hover {
-    background-color: #005580;
+    background-color: #336699;
 }
 
 .submitbutton {
@@ -301,7 +282,7 @@ td {
 .problem_title {
     font-size: 20px;
     font-weight: bold;
-    color: #fff;
+    color: #ffffff;
 }
 
 .editor {
@@ -309,10 +290,10 @@ td {
     height: 300px;
     font-size: 16px;
     font-family: monospace;
-    background-color: #222;
-    color: #fff;
+    background-color: #1e1e1e;
+    color: #ffffff;
     padding: 10px;
-    border: solid 1px #a8a8a8;
+    border: solid 1px #555;
 }
 
 .output,
@@ -324,9 +305,9 @@ td {
     overflow-x: auto;
     font-size: 16px;
     font-family: monospace;
-    background-color: #222;
-    color: #fff;
-    border: solid 1px #a8a8a8;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border: solid 1px #555;
 }
 
 .box-title,
@@ -334,12 +315,15 @@ td {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #ccc;
+    color: #999;
 }
 
 .inline-code,
 .code-block {
     font-family: monospace;
+    line-height: 1.5;
+    background-color: #1e1e1e;
+    color: #ffffff;
 }
 
 .success,
@@ -375,43 +359,79 @@ td {
     border-color: #ebccd1;
 }
 
-.definition::before,
-.theorem::before,
-.proof::before,
-.lemma::before {
-    font-family: serif;
-    font-size: large;
-    font-weight: 600;
-    font-style: italic;
-    display: block;
+
+.definition {
+    counter-increment: definition;
+    border: #31708f 3px dotted;
+    border-left: #31708fa1 5px solid;
 }
 
 .definition::before {
-    content: "Definition.";
+    content: "Definition " counter(definition) ".";
+}
+
+.theorem {
+    counter-increment: theorem;
+    border: #318f5a 3px dotted;
+    border-left: #318f4fa1 5px solid;
 }
 
 .theorem::before {
-    content: "Theorem.";
+    content: "Theorem " counter(theorem) ".";
+}
+
+.lemma {
+    counter-increment: lemma;
+    border: #ab5b64 3px dotted;
+    border-left: #d071a4a1 5px solid;
+}
+
+.lemma::before {
+    content: "Lemma " counter(lemma) ".";
+}
+
+.proof {
+    counter-increment: proof;
+    border: #5b64ab 3px dotted;
+    border-left: #8cc1e7a1 5px solid;
 }
 
 .proof::before {
-    content: "Proof.";
+    content: "Proof " counter(proof) ".";
 }
 
+.definition::before,
+.theorem::before,
+.proof::before,
 .lemma::before {
-    content: "Lemma.";
+    font-family: serif;
+    font-size: large;
+    font-weight: 600;
+    font-style: italic;
+    display: block;
 }
 
+
 .definition,
 .theorem,
 .proof,
 .lemma {
     padding: 12px;
-    border-left: 1px solid #444;
+    margin: 12px;
 }
 
 .proof::after {
     content: "∎";
     margin-left: auto;
     display: block;
+}
+
+iframe {
+    width: 100%;
+}
+
+
+a {
+    color: #007bff;
+    word-break: break-all;
 }
\ No newline at end of file
diff --git a/src/light.css b/src/light.css
index 93c6c38..0e6780f 100644
--- a/src/light.css
+++ b/src/light.css
@@ -1,154 +1,151 @@
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: rgb(248, 248, 248);
-    color: #333;
-    display: flex;
-    gap: 10px;
-    flex-direction: row-reverse;
-    overflow: auto;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    padding-left: 20px;
+    padding-right: 50px;
+    font-family: "Noto Sans", sans-serif;
 }
 
+
 @media (max-width: 768px) {
+    .side #toc {
+        display: none;
+    }
+
     body {
-        padding: 0px;
+        display: block;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
     }
 }
 
-.side {
-    width: 240px;
-    display: flex;
-    flex-direction: column;
-    background-color: rgba(246, 246, 246, 0.177);
-    border-radius: 10px;
-    border: solid 1px rgba(236, 236, 236, 0.472);
-    margin-left: auto;
-    margin-right: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
-    height: auto;
-    top: 20px;
-    padding-left: 30px;
-    padding-right: 20px;
-}
 
 @media (max-width: 768px) {
-    .side {
-        display: none;
+    .article-header .title {
+        font-size: 18px;
     }
 }
 
+
+
+.side {
+    order: 1;
+    border-right: solid 1px #ddd;
+    padding-right: 20px;
+}
+
 .side-sticky {
     position: sticky;
     top: 20px;
 }
 
-.content {
-    padding: 40px 40px;
-    margin-left: 0px;
-    margin-right: auto;
-    border-radius: 5px;
-    max-width: 800px;
+.article-header {
+    position: relative;
     width: 100%;
+    height: 200px;
+    margin-bottom: 50px;
 }
 
-.article-header {
-    margin-bottom: 30px;
-
+.article-header .thumbnail {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    filter: blur(3px);
 }
 
-.article-body {
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-    border-radius: 5px;
-    border: solid 1px rgba(236, 236, 236, 0.472);
-    padding: 40px;
-    background-color: #ffffff64;
-    border-radius: 5px;
-    padding: 40px;
+.article-header .thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.article-header .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 24px;
+    border-bottom: solid 1px #ddd;
+    font-weight: bold;
+    background-color: #44444477;
 }
 
-
-@media (max-width: 768px) {
-    .content {
-        width: 100%;
-        padding: 20px;
-    }
+.date {
+    font-size: 14px;
+    text-align: center;
 }
 
-.sidebar {
-    top: 20px;
-    left: 0px;
+.date::before {
+    content: "\f073";
+    font-family: "Font Awesome 5 Free";
 }
 
-@media (max-width: 1260px) {
-    .sidebar {
-        display: none;
-    }
+.tag {
+    font-size: 14px;
+    text-align: center;
 }
 
-.links {
-    bottom: 0px;
-    left: 0px;
+.content {
+    order: 2;
+    padding: 20px;
 }
 
-@media (max-width: 1260px) {
-    .links {
-        display: none;
-    }
+.toc_title {
+    display: none;
 }
 
+.math-block {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
 
-
-.title {
-    font-size: 40px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #333;
-    text-align: center;
+.math-inline {
+    display: inline-grid;
+    overflow-x: hidden;
+    ;
 }
 
-h1,
-h2 {
-    color: #323232;
-    text-align: center;
-    margin-bottom: 20px;
+mjx-container {
+    display: inline-block;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100%;
 }
 
 h2 {
-    text-align: left;
+    border-left: solid 5px #85c0ff;
     padding-left: 10px;
-    border-bottom: solid 1px #5b5b5b;
 }
 
-p {
-    color: #666;
-    margin-bottom: 10px;
-}
 
-a {
-    color: #006699;
+img {
+    max-width: 100% !important;
+    height: auto;
 }
 
-figure {
-    text-align: center;
+@media (max-width: 768px) {
+    figure {
+        margin-left: calc(50% - 50vw);
+        margin-right: calc(50% - 50vw);
+        overflow: hidden;
+        padding: 20px;
+    }
 }
 
-figcaption {
-    text-align: center;
+
+h3 {
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
 pre {
     padding: 10px;
-    color: #333;
-    border: solid 1px #a8a8a8;
-    overflow-x: auto;
+    background-color: #f8f8f8
 }
 
-img {
-    max-width: 100%;
-    height: auto;
+.tex-equations {
+    overflow-x: auto;
 }
 
 table {
@@ -163,18 +160,11 @@ td {
     padding: 8px;
 }
 
-.date {
-    color: #666;
-    font-size: 14px;
-    margin: 0 auto;
-    text-align: center;
-}
-
-.tag {
-    color: #666;
-    font-size: 14px;
-    margin: 0 auto;
-    text-align: center;
+@media (max-width: 768px) {
+    .exec_plot {
+        width: 100%;
+        overflow-x: auto;
+    }
 }
 
 #toc {
@@ -182,19 +172,12 @@ td {
     border-radius: 4px;
     padding: 15px;
     list-style: none;
-    /* 左側に棒 */
-    border-left: solid 1px #161616;
-}
-
-.toc_title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #2a2a2a;
+    border-left: solid 1px #ddd;
 }
 
 #toc a {
     text-decoration: none;
-    color: #5f5f5f;
+    color: #777;
     display: block;
     margin: 5px 0;
     transition: color 0.2s;
@@ -215,50 +198,55 @@ td {
     font-size: 16px;
 }
 
+
+
 .toc_H1 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #006699;
+    color: #007bff;
     font-weight: bold;
 }
 
-
 .toc_H2 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #006699;
+    color: #007bff;
     font-weight: bold;
+    padding-left: 10px;
 }
 
 .toc_H3 {
     font-size: 14px;
     margin-bottom: 10px;
-    color: #006699;
+    color: #007bff;
+    padding-left: 20px;
 }
 
+
+
+
 .content_list_h1 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
-    border-bottom: solid 1px #006699;
-    color: #006699;
+    border-bottom: solid 1px #007bff;
+    color: #007bff;
 }
 
-
 .content_list_h2 {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #006699;
+    color: #007bff;
 }
 
 .content_list_problem {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #006699;
+    color: #007bff;
 }
 
 .badge {
@@ -266,8 +254,8 @@ td {
     border-radius: 25px;
     font-size: 14px;
     font-weight: bold;
-    color: #666;
-    border: 1px solid #333;
+    color: #777;
+    border: 1px solid #444;
     margin: 0 8px;
     float: left;
 }
@@ -286,7 +274,7 @@ td {
 }
 
 .runbutton {
-    background-color: #006699;
+    background-color: #007bff;
 }
 
 .runbutton:hover {
@@ -312,10 +300,10 @@ td {
     height: 300px;
     font-size: 16px;
     font-family: monospace;
-    background-color: #F2F2F2;
+    background-color: #f0f0f0;
     color: #333;
     padding: 10px;
-    border: solid 1px #a8a8a8;
+    border: solid 1px #ddd;
 }
 
 .output,
@@ -327,9 +315,9 @@ td {
     overflow-x: auto;
     font-size: 16px;
     font-family: monospace;
-    background-color: #F2F2F2;
+    background-color: #f0f0f0;
     color: #333;
-    border: solid 1px #a8a8a8;
+    border: solid 1px #ddd;
 }
 
 .box-title,
@@ -337,15 +325,16 @@ td {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 10px;
-    color: #666;
+    color: #777;
 }
 
 .inline-code,
 .code-block {
     font-family: monospace;
+    line-height: 1.5;
+    background-color: #f0f0f0;
 }
 
-
 .success,
 .info,
 .warning,
@@ -379,43 +368,78 @@ td {
     border-color: #ebccd1;
 }
 
-.definition::before,
-.theorem::before,
-.proof::before,
-.lemma::before {
-    font-family: serif;
-    font-size: large;
-    font-weight: 600;
-    font-style: italic;
-    display: block;
+.definition {
+    counter-increment: definition;
+    border: #31708f 3px dotted;
+    border-left: #31708fa1 5px solid;
 }
 
 .definition::before {
-    content: "Definition.";
+    content: "Definition " counter(definition) ".";
+}
+
+.theorem {
+    counter-increment: theorem;
+    border: #318f5a 3px dotted;
+    border-left: #318f4fa1 5px solid;
 }
 
 .theorem::before {
-    content: "Theorem.";
+    content: "Theorem " counter(theorem) ".";
+}
+
+.lemma {
+    counter-increment: lemma;
+    border: #ab5b64 3px dotted;
+    border-left: #d071a4a1 5px solid;
+}
+
+.lemma::before {
+    content: "Lemma " counter(lemma) ".";
+}
+
+.proof {
+    counter-increment: proof;
+    border: #5b64ab 3px dotted;
+    border-left: #8cc1e7a1 5px solid;
 }
 
 .proof::before {
-    content: "Proof.";
+    content: "Proof " counter(proof) ".";
 }
 
+.definition::before,
+.theorem::before,
+.proof::before,
 .lemma::before {
-    content: "Lemma.";
+    font-family: serif;
+    font-size: large;
+    font-weight: 600;
+    font-style: italic;
+    display: block;
 }
 
+
 .definition,
 .theorem,
 .proof,
 .lemma {
     padding: 12px;
-    border-left: 1px solid;
+    margin: 12px;
 }
 
 .proof::after {
     content: "∎";
     margin-left: auto;
     display: block;
+}
+
+iframe {
+    width: 100%;
+}
+
+
+a {
+    color: #007bff;
+    word-break: break-all;
 }
\ No newline at end of file