@charset "UTF-8";

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
   src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap; }

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
   src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
   font-weight: normal;
   font-style: italic;
   font-display: swap; }

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
   src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
   font-weight: bold;
   font-style: normal;
   font-display: swap; }

@font-face {
   font-family: "et-book-roman-old-style";
   src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
   src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap; }

:root {
   --bg: #fafafa;
   --fg: #1a1a1a;
   --gray: #6a6a6a;
   --light-gray: #d5d5d5; }

[data-theme="dark"] {
   --bg: #1a1a1a;
   --fg: #fafafa;
   --gray: #959595;
   --light-gray: #3a3a3a; }

html { font-size: 16px; }

body {
   font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
   color: var(--fg);
   background: var(--bg);
   line-height: 1.44rem;
   display: grid;
   grid-template-columns: 20% 80%;
   width: min(87.5%, 1440px);
   gap: 1.44rem;
   margin-inline: auto; }

a {
   color: var(--fg);
   opacity: 0.9;
   text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   font-style: italic;
   margin-top: 2.07rem;
   margin-bottom: 1.44rem;
   line-height: 1; }

h1 { font-size: 2.99rem; }

h2 { font-size: 2.07rem; }

h3 { font-size: 1.44rem;}

.outline-sidebar {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: sticky;
   top: 2.07rem;
   height: calc(100vh - 4rem);
   overflow-y: auto; }

.outline {
   display: flex;
   flex-direction: column;
   gap: 0.14rem; }

.outline .h1 { padding-left: 0; font-size: 0.86rem; }
.outline .h2 { padding-left: 1.2rem; font-size: 0.72rem; }
.outline .h3 { padding-left: 1.44rem; font-size: 0.58rem; }

.outline-sidebar .bottom-nav {
   display: flex;
   gap: 0.58rem 1.15rem; }

.outline-sidebar .bottom-nav a {
   font-size: 0.86rem; }

.metadata {
   color: var(--gray);
   font-size: 0.86rem; }

.metadata .date {
   margin-right: 0.29rem; }

.description {
   line-height: 1.2;
   color: var(--gray); }

.main-content {
   padding-bottom: 4.32rem; }

.main-content > * {
   margin-bottom: 0.86rem; }

.main-content > *:last-child {
   margin-bottom: 0; }

.blog-entry .date {
   color: var(--gray);
   font-size: 0.86rem; }

.blog-entry .tags {
   font-size: 0.86rem;
   color: var(--gray); }

/* TODO: footnote->sidenote in tufte css style*/
.footnote {
   font-size: 0.86rem; }

.footnote sup {
   margin-right: 0.29rem; }

.l1-list, .l2-list, .l3-list {
   margin-bottom: 0.58rem; }

.l1-list::before {
   content: "•";
   color: var(--gray);
   margin-right: 0.43rem;
   font-size: 0.86em;
   opacity: 0.6; }

.l2-list::before {
   content: "◦";
   color: var(--gray);
   margin-right: 0.43rem;
   margin-left: 1.44rem;
   font-size: 0.86em;
   opacity: 0.5; }

.l3-list::before {
   content: "▪";
   color: var(--gray);
   margin-right: 0.43rem;
   margin-left: 2.88rem;
   font-size: 0.86em;
   opacity: 0.4; }

blockquote.callout {
   font-style: italic;
   padding-left: 0.86rem;
   border-left: 0.58px solid var(--light-gray);
   color: var(--gray); }

.highlight {
   font-weight: bold; }

.tag-cloud {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 2.07rem; }

img, svg {
   max-width: 100%;
   height: auto; }

strong { font-weight: bold; }

.insert-container {
   width: 100%;
   margin: 1rem 0;
   overflow-x: auto; }

code.inlinecode {
   font-family: monospace;
   font-size: 0.86rem;
   color: var(--gray); }

pre {
   font-family: monospace;
   font-size: 0.86rem;
   border: 0.58px solid var(--light-gray);
   padding: 0.86rem;
   overflow-x: auto; }

pre code { color: inherit; }

pre.verbatim code { color: var(--fg); }

.raw-block {
   margin: 0;
   padding: 0;
   border: none; }

pre code .keyword {
   color: #000000;
   font-weight: bold; }

pre code .type {
   color: #303030;
   font-style: italic; }

pre code .function {
   color: #101010; }

pre code .string {
   color: #606060; }

pre code .comment {
   color: #a0a0a0;
   font-style: italic; }

pre code .variable {
   color: #404040; }

pre code .property {
   color: #505050; }

pre code .constant {
   color: #181818;
   font-weight: bold; }

pre code .operator {
   color: #707070; }

pre code .punctuation {
   color: #808080; }

pre code .number {
   color: #585858; }

pre code .module {
   color: #1a1a1a; }

pre code .constructor {
   color: #2a2a2a;
   font-weight: bold; }

pre code .punctuation.bracket {
   color: #707070; }

pre code .punctuation.delimiter {
   color: #909090; }

pre code .punctuation.special {
   color: #606060; }

pre code .string.special {
   color: #505050; }

pre code .tag {
   color: #0a0a0a; }

pre code .type.builtin {
   color: #383838;
   font-style: italic; }

pre code .function.builtin {
   color: #151515; }

pre code .constant.builtin {
   color: #0d0d0d;
   font-weight: bold; }

pre code .variable.builtin {
   color: #353535; }

pre code .variable.parameter {
   color: #484848; }

pre code .attribute {
   color: #656565; }

[data-theme="dark"] pre code .keyword {
   color: #ffffff;
   font-weight: bold; }

[data-theme="dark"] pre code .type {
   color: #d5d5d5;
   font-style: italic; }

[data-theme="dark"] pre code .function {
   color: #f5f5f5; }

[data-theme="dark"] pre code .string {
   color: #a0a0a0; }

[data-theme="dark"] pre code .comment {
   color: #606060;
   font-style: italic; }

[data-theme="dark"] pre code .variable {
   color: #c0c0c0; }

[data-theme="dark"] pre code .property {
   color: #b0b0b0; }

[data-theme="dark"] pre code .constant {
   color: #ebebeb;
   font-weight: bold; }

[data-theme="dark"] pre code .operator {
   color: #858585; }

[data-theme="dark"] pre code .punctuation {
   color: #757575; }

[data-theme="dark"] pre code .number {
   color: #a8a8a8; }

[data-theme="dark"] pre code .module {
   color: #e5e5e5; }

[data-theme="dark"] pre code .constructor {
   color: #d0d0d0;
   font-weight: bold; }

[data-theme="dark"] pre code .punctuation.bracket {
   color: #858585; }

[data-theme="dark"] pre code .punctuation.delimiter {
   color: #707070; }

[data-theme="dark"] pre code .punctuation.special {
   color: #9a9a9a; }

[data-theme="dark"] pre code .string.special {
   color: #b0b0b0; }

[data-theme="dark"] pre code .tag {
   color: #fafafa; }

[data-theme="dark"] pre code .type.builtin {
   color: #c8c8c8;
   font-style: italic; }

[data-theme="dark"] pre code .function.builtin {
   color: #efefef; }

[data-theme="dark"] pre code .constant.builtin {
   color: #f2f2f2;
   font-weight: bold; }

[data-theme="dark"] pre code .variable.builtin {
   color: #cacaca; }

[data-theme="dark"] pre code .variable.parameter {
   color: #b8b8b8; }

[data-theme="dark"] pre code .attribute {
   color: #959595; }