@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141218;
    --link: #81d4fa;
    --text: rgb(255, 255, 255);
    --nav-hover: rgba(255, 255, 255, 0.12);
    --trow-even: rgba(255, 255, 255, 0.09);
    --shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --privacy-shadow: 0 0px 3px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --header-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --header-hover: rgb(241, 245, 249);
    --card-outline: #49454F;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: rgb(255, 255, 255);
    --link: #0d47a1;
    --text: #141218;
    --nav-hover: rgba(15, 14, 15, 0.12);
    --trow-even: rgba(15, 14, 15, 0.09);
    --shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --privacy-shadow: 0 0px 3px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --header-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --header-hover: rgb(241, 245, 249);
    --card-outline: #49454F;
  }
}
:root {
  --btn-bg: #F1BF00;
  --btn-bg-lighter: #ffe993;
  --btn-txt: #000;
  --btn-surface: #CFC5B4;
}

* {
  margin: 0;
  padding: 0;
  font-family: "NotoSans";
  color: var(--text);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #f1bf00 var(--text);
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  width: 16px;
}
*::-webkit-scrollbar::-webkit-scrollbar-track {
  border-radius: 8px;
  background: var(--text);
}
*::-webkit-scrollbar::-webkit-scrollbar-track:hover, *::-webkit-scrollbar::-webkit-scrollbar-track:active {
  background-color: var(--header-hover);
}
*::-webkit-scrollbar::-webkit-scrollbar-thumb {
  background-color: #f1bf00;
  border-radius: 8px;
  border: 3px solid var(--text);
}
*::-webkit-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #980010;
}
*::-webkit-scrollbar::-webkit-scrollbar-thumb:hover:active {
  background-color: #980010;
}

header,
nav,
footer,
section,
aside,
article,
ul,
ol {
  display: flex;
  flex-direction: column;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  height: auto;
  font-family: "NotoSans";
  width: 100vw;
  padding: 0;
  width: auto;
  max-width: 1024px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  position: relative;
}

article,
aside {
  flex-direction: column;
}

header,
footer {
  flex-direction: row;
}

header {
  justify-content: space-between;
}

footer {
  justify-content: space-around;
}

ul,
ol {
  list-style: none;
}

.privacy-banner {
  display: none;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
  position: fixed;
  background-color: var(--bg);
  color: var(--text);
  padding: 8px;
  gap: 4px;
  align-self: center;
  box-sizing: border-box;
  bottom: 1rem;
  color: #fff;
  font-weight: bold;
  width: 400px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--privacy-shadow);
  border-radius: 8px;
}
.privacy-banner p {
  font-size: 1rem;
  text-indent: 0;
}
.privacy-banner p.show {
  display: flex;
}
.privacy-banner p-btn {
  background-color: transparent;
  color: white;
  border: none;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 8px;
  color: #f1bf00;
  font-weight: bold;
}

svg {
  fill: var(--text);
}

.main_header {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0 20px;
  background-color: var(--bg);
  color: var(--text);
  display: flex;
}
.main_header-nav {
  gap: 4px;
}
.main_header-nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.main_header-nav-icon {
  height: 32px;
  line-height: 32px;
  text-transform: uppercase;
  text-align: center;
  width: 56px;
  border-radius: 15px;
  transition: background-color ease-in-out 200ms;
}
.main_header-nav-text {
  height: 24px;
}
.main_header-nav-item:hover .main_header-nav-icon {
  background-color: var(--nav-hover);
  transition: background-color ease-in-out 200ms;
}

.post-header {
  grid-area: header;
  min-height: 48px;
  display: grid;
  grid-template-areas: "icon space icons" "title title title";
  grid-template-rows: 48px auto;
  grid-template-columns: 48px auto minmax(48px, auto);
  align-content: center;
  justify-content: space-around;
  align-items: center;
  justify-items: stretch;
  position: sticky;
  top: 0;
  padding: 8px 4px 12px 4px;
  gap: 4px;
  transition: padding 300ms ease-in-out;
}
.post-header.scrolled {
  height: 64px;
  grid-template-rows: 64px;
  padding: 6px 8px 6px 8px;
  transition: padding 300ms ease-in-out;
}
.post-header-back_icon {
  grid-area: icon;
}
.post-header-icons {
  grid-area: icons;
  display: flex;
  flex-direction: row;
}
.post-header-back_icon, .post-header-icons {
  padding: 12px;
}
.post-header .svg-icons {
  height: 24px;
  width: 24px;
}
.post-header-title {
  grid-area: title;
  padding-left: 16px;
}
.post-header .icon {
  height: 48px;
  width: 48px;
  padding: 12px;
  border-radius: 24px;
  transition: background-color ease-in-out 200ms;
}
.post-header .icon svg {
  width: 24px;
  height: 24px;
  transition: fill ease-in-out 300ms;
}

h2 {
  margin: 12px 0 8px;
  color: var(--text);
}

p {
  line-height: 1.5em;
}

a {
  text-decoration: none;
  color: var(--link);
}

a, p, li {
  font-weight: 400;
}

h1 {
  font-size: 1.53rem;
  margin: 16px 0;
}

h2 {
  font-size: 1.39rem;
  margin: 12px 0 8px;
}

h3 {
  font-size: 1.24rem;
  margin: 8px 0 8px;
}

h4 {
  font-size: 1.15rem;
  margin-top: 10px;
}

h1, h2, h3, h4, h5, h6 {
  width: 100%;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .footnote-ref, .footnoteBackLink {
  font-weight: bold;
  scroll-margin-top: 156px;
  color: var(--text);
}

p, li {
  color: var(--text);
}

body {
  display: grid;
}

.post {
  display: grid;
  grid-template-areas: "main nav";
  position: relative;
}
.post-content {
  grid-area: main;
  max-width: 1024px;
  display: grid;
  position: relative;
}
.post-content-main {
  padding: 16px;
  grid-area: content;
}
.post .headerlink {
  padding: 4px;
}
.post .headerlink:active, .post .headerlink:focus-within, .post .headerlink:focus-visible {
  color: #f1bf00;
}
.post-aside {
  grid-area: aside;
  padding: 16px;
}
.post-aside .toc a {
  color: var(--link);
}
.post-aside .toc ul {
  margin-left: 16px;
  padding-left: 16px;
  margin-bottom: 8px;
}

.scroll_to_top {
  position: fixed;
  font-size: 0.9rem;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #f1bf00;
  cursor: pointer;
  opacity: 0.7;
  transition: 300ms ease-in-out opacity;
}
.scroll_to_top:hover {
  opacity: 1;
  transition: 300ms ease-in-out opacity;
}
.scroll_to_top span {
  color: var(--text);
}

ol {
  list-style-type: decimal;
}

ol, ul {
  margin: 8px 16px;
  padding-left: 16px;
}

ul:not([class]) li {
  position: relative;
}
ul:not([class]) li::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #f1bf00;
  left: -15px;
  top: 15px;
  border-radius: 2px;
}

li {
  padding: 4px 0;
}

table {
  border-collapse: collapse;
  width: 95%;
}

th, td {
  border: 1px solid var(--card-outline);
  padding: 8px;
  text-align: left;
}

tr {
  transition: background-color 0.2s ease-in-out;
}
tr:nth-child(even) {
  background-color: var(--trow-even);
}
tr:hover {
  cursor: pointer;
  background-color: var(--nav-hover);
  transition: background-color 0.2s ease-in-out;
}

.post_footer {
  display: flex;
  gap: 8px;
}

.admonition {
  border-radius: 24px;
  padding: 24px;
  background-color: #1F1B13;
  margin: 8px 0 12px;
  position: relative;
}
.admonition::before {
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--btn-bg);
  padding: 15px;
  border-radius: 0 24px;
  width: 54px;
  height: 54px;
  box-sizing: border-box;
}
.admonition-title {
  margin-bottom: 4px;
  font-weight: bold;
  position: relative;
  max-width: calc(100% - 54px);
}
.admonition-title::before {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
}
.admonition.note::before {
  content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 21L14.25 18L15.41 16.84L17 18.43L20.59 14.84L21.75 16.25M12.8 21H5C3.89 21 3 20.11 3 19V5C3 3.89 3.89 3 5 3H19C20.11 3 21 3.89 21 5V12.8C20.39 12.45 19.72 12.2 19 12.08V5H5V19H12.08C12.2 19.72 12.45 20.39 12.8 21ZM12 17H7V15H12M14.68 13H7V11H17V12.08C16.15 12.22 15.37 12.54 14.68 13ZM17 9H7V7H17" fill="white"/></svg>');
  background-color: #3D392F;
}
.admonition.example::before {
  content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 11H23V13H20V11ZM1 11H4V13H1V11ZM13 1V4H11V1H13ZM4.92 3.5L7.05 5.64L5.63 7.05L3.5 4.93L4.92 3.5ZM16.95 5.63L19.07 3.5L20.5 4.93L18.37 7.05L16.95 5.63ZM12 6C13.5913 6 15.1174 6.63214 16.2426 7.75736C17.3679 8.88258 18 10.4087 18 12C18 14.22 16.79 16.16 15 17.2V19C15 19.2652 14.8946 19.5196 14.7071 19.7071C14.5196 19.8946 14.2652 20 14 20H10C9.73478 20 9.48043 19.8946 9.29289 19.7071C9.10536 19.5196 9 19.2652 9 19V17.2C7.21 16.16 6 14.22 6 12C6 10.4087 6.63214 8.88258 7.75736 7.75736C8.88258 6.63214 10.4087 6 12 6ZM14 21V22C14 22.2652 13.8946 22.5196 13.7071 22.7071C13.5196 22.8946 13.2652 23 13 23H11C10.7348 23 10.4804 22.8946 10.2929 22.7071C10.1054 22.5196 10 22.2652 10 22V21H14ZM11 18H13V15.87C14.73 15.43 16 13.86 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12C8 13.86 9.27 15.43 11 15.87V18Z" fill="white"/></svg>');
  background-color: #E4C36C;
}
.admonition.important {
  background-color: #FFB3AC;
}
.admonition.important::before {
  content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1L21 5V11ZM12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21ZM11 7H13V13H11V7ZM11 15H13V17H11V15Z" fill="white"/></svg>');
  background-color: #980010;
}
.admonition.important * {
  color: var(--bg);
}
.admonition.hint {
  background-color: #B6F1BB;
}
.admonition.hint::before {
  content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1L21 5V11ZM12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.58L18 9" fill="white"/></svg>');
  background-color: #f1bf00;
}
.admonition.hint * {
  color: var(--bg);
}

.to-read {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(152, 144, 128, 0.4392156863);
  border-radius: 4px;
  padding: 4px 8px;
}
.to-read-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(152, 144, 128, 0.4392156863);
  border-radius: 4px 16px 16px 4px;
  padding: 0px 0 0 8px;
}
.to-read-inline.arrow::after {
  content: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3 10.85C9.1 10.65 9.004 10.4083 9.012 10.125C9.02067 9.84167 9.125 9.6 9.325 9.4L12.15 6.575H1C0.716667 6.575 0.479 6.479 0.287 6.287C0.0956668 6.09567 0 5.85833 0 5.575C0 5.29167 0.0956668 5.054 0.287 4.862C0.479 4.67067 0.716667 4.575 1 4.575H12.15L9.3 1.725C9.1 1.525 9 1.28733 9 1.012C9 0.737333 9.1 0.5 9.3 0.3C9.5 0.0999997 9.73767 0 10.013 0C10.2877 0 10.525 0.0999997 10.725 0.3L15.3 4.875C15.4 4.975 15.471 5.08333 15.513 5.2C15.5543 5.31667 15.575 5.44167 15.575 5.575C15.575 5.70833 15.5543 5.83333 15.513 5.95C15.471 6.06667 15.4 6.175 15.3 6.275L10.7 10.875C10.5167 11.0583 10.2877 11.15 10.013 11.15C9.73767 11.15 9.5 11.05 9.3 10.85Z" fill="white"/></svg>');
  position: absolute;
}

.read-btn {
  position: relative;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border: none;
  border-radius: 16px;
  background-color: #9BD4A1;
  cursor: pointer;
}
.read-btn::before {
  content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.53142 15.0051C4.03291 14.9078 4.32377 14.2328 4.18109 13.4975C4.03841 12.7622 3.5162 12.245 3.01471 12.3424C2.51323 12.4397 2.22236 13.1146 2.36504 13.8499C2.50773 14.5852 3.02993 15.1024 3.53142 15.0051Z" fill="%23616161"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.80483 13.7743C2.59743 12.0082 2.47006 10.1592 2.55148 8.48633L3.30055 8.52278C3.22197 10.1373 3.34459 11.9405 3.54967 13.6868L2.80483 13.7743Z" fill="%23616161"/><path d="M15.6328 13.8482C15.7754 13.1129 15.4846 12.4379 14.9831 12.3406C14.4816 12.2433 13.9594 12.7605 13.8167 13.4958C13.674 14.2311 13.9649 14.906 14.4664 15.0034C14.9679 15.1007 15.4901 14.5835 15.6328 13.8482Z" fill="%23616161"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4492 13.6868C14.6543 11.9405 14.7769 10.1373 14.6983 8.52278L15.4474 8.48633C15.5288 10.1592 15.4015 12.0082 15.1941 13.7743L14.4492 13.6868Z" fill="%23616161"/><path d="M15.2405 9.32584C14.5943 9.29584 14.058 8.81086 13.9743 8.16965C13.8805 7.44344 13.6393 6.60473 13.0343 5.79977C12.0831 4.53609 10.6907 3.86738 9.0058 3.86738C7.82461 3.86738 6.1647 4.20236 4.96351 5.79977C4.35104 6.61473 4.11231 7.47093 4.02106 8.2084C3.94482 8.81961 3.44984 9.29334 2.83362 9.32209L2.75863 9.32584C2.32615 9.34584 1.96867 8.98835 1.99367 8.55713C2.05366 7.50343 2.31865 5.63228 3.37485 4.22736C4.69728 2.46745 6.69717 1.5 9.0058 1.5C11.3057 1.5 13.3006 2.46745 14.623 4.22486C15.6804 5.63103 15.9442 7.50343 16.0054 8.55588C16.0304 8.98835 15.6729 9.34584 15.2405 9.32584Z" fill="%23616161"/><path d="M5.84092 16.4106C4.62598 16.5793 3.23231 15.6831 2.95107 13.6095C2.67108 11.5446 3.65228 10.2897 4.64723 10.0972L5.84092 16.4106Z" fill="%23424242"/><path d="M5.91087 9.66946L4.85342 9.8507C4.42594 9.93319 4.09096 10.2644 4.00347 10.6919C3.88597 11.2681 3.81098 12.1893 4.05346 13.4455C4.2972 14.7004 4.71093 15.5266 5.03716 16.0179C5.27715 16.3804 5.71213 16.5628 6.1396 16.4791L7.19705 16.2979C7.70827 16.1991 7.83451 14.6342 7.47828 12.8043C7.1233 10.9744 6.42209 9.57071 5.91087 9.66946Z" fill="%23757575"/><path opacity="0.5" d="M7.30082 16.0162C7.72709 15.9335 7.80666 14.4958 7.47855 12.8049C7.15045 11.1141 6.53891 9.81048 6.11264 9.8932C5.68638 9.97591 5.6068 11.4137 5.93491 13.1045C6.26302 14.7953 6.87456 16.0989 7.30082 16.0162Z" fill="%23424242"/><path d="M7.2309 12.8529C7.45339 13.9978 7.50214 14.9515 7.34089 14.9828C7.17965 15.014 6.86717 14.1116 6.64593 12.9666C6.42344 11.8217 6.3747 10.868 6.53594 10.8367C6.69718 10.8055 7.00841 11.7079 7.2309 12.8529Z" fill="url(%23paint0_linear_2030_69)"/><path d="M12.158 16.4106C13.3729 16.5793 14.7666 15.6831 15.0478 13.6095C15.3278 11.5446 14.3466 10.2897 13.3516 10.0972L12.158 16.4106Z" fill="%23424242"/><path d="M12.088 9.66946L13.1454 9.8507C13.5729 9.93319 13.9079 10.2644 13.9954 10.6919C14.1129 11.2681 14.1879 12.1893 13.9454 13.4455C13.7017 14.7004 13.2879 15.5266 12.9617 16.0179C12.7217 16.3804 12.2867 16.5628 11.8593 16.4791L10.8018 16.2979C10.2906 16.1991 10.1644 14.6342 10.5206 12.8043C10.8756 10.9744 11.5768 9.57071 12.088 9.66946Z" fill="%23757575"/><path opacity="0.5" d="M12.0635 13.1038C12.3916 11.4129 12.312 9.97518 11.8858 9.89246C11.4595 9.80975 10.848 11.1134 10.5199 12.8042C10.1918 14.495 10.2713 15.9328 10.6976 16.0155C11.1239 16.0982 11.7354 14.7946 12.0635 13.1038Z" fill="%23424242"/><path d="M10.768 12.8529C10.5455 13.9978 10.4968 14.9515 10.658 14.9828C10.8192 15.014 11.1317 14.1116 11.353 12.9666C11.5755 11.8217 11.6242 10.868 11.463 10.8367C11.3017 10.8055 10.9905 11.7079 10.768 12.8529Z" fill="url(%23paint1_linear_2030_69)"/><path d="M15.8854 8.76235C15.5316 9.00234 15.0954 8.73235 14.9617 8.36737C14.8067 7.45742 14.5004 6.40122 13.9005 5.53002C12.7768 3.80636 10.8881 2.94266 8.99947 2.94141C7.11082 2.94266 5.22217 3.80636 4.09848 5.53002C3.49851 6.40122 3.19353 7.45867 3.03729 8.36737C2.90355 8.73235 2.46732 9.00234 2.11359 8.76235C2.08484 8.74235 2.04109 8.69235 1.99609 8.66485C2.03109 9.04608 2.36357 9.34232 2.75855 9.32482L2.8673 9.31982C3.63976 9.32607 3.94599 8.83485 4.01724 8.24113C4.10598 7.49742 4.34222 6.62621 4.96469 5.80001C6.16337 4.20634 7.81829 3.86886 8.99947 3.86761C10.1807 3.86886 11.8356 4.20634 13.0343 5.80001C13.6467 6.61496 13.8855 7.47117 13.9767 8.20863C14.0542 8.82735 14.3542 9.32607 15.1979 9.32357L15.2391 9.32607C15.6341 9.34482 15.9666 9.04733 16.0016 8.6661C15.9579 8.69235 15.9141 8.74235 15.8854 8.76235Z" fill="%23424242"/><path d="M2.83103 6.20091C2.71478 6.11841 2.62354 6.02717 2.78978 5.3997C2.99102 4.64349 3.92472 3.17982 5.80587 2.20987C6.1546 2.02988 7.00206 1.76114 7.26079 2.22737C7.50578 2.66984 6.32209 2.99233 5.90462 3.21607C4.81217 3.80353 4.02346 4.63224 3.59974 5.28721C3.46474 5.49595 3.10851 6.3959 2.83103 6.20091Z" fill="%23757575"/><defs><linearGradient id="paint0_linear_2030_69" x1="6.67963" y1="12.9607" x2="7.03917" y2="12.8909" gradientUnits="userSpaceOnUse"><stop offset="0.2016" stop-color="%23212121"/><stop offset="1" stop-color="%23212121" stop-opacity="0"/></linearGradient><linearGradient id="paint1_linear_2030_69" x1="11.3193" y1="12.9607" x2="10.9597" y2="12.891" gradientUnits="userSpaceOnUse"><stop offset="0.2016" stop-color="%23212121"/><stop offset="1" stop-color="%23212121" stop-opacity="0"/></linearGradient></defs></svg>');
  position: absolute;
  width: 24px;
  height: 24px;
  top: 7px;
  left: 4px;
}
.read-btn.speaking {
  background-color: #FFE08E;
}

.day_card-list {
  gap: 8px;
}
.day_card-item {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--card-outline);
  background-color: var(--bg);
  color: var(--text);
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.day_card-title.wnum {
  display: grid;
  grid-template: "num title";
  grid-template-columns: 32px auto;
  margin-top: 0;
  gap: 8px;
}
.day_card-title-number {
  grid-area: num;
  margin-top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: var(--text);
  color: var(--bg);
  text-align: center;
}
.day_card-title-text {
  grid-area: title;
}
.day_card-sub {
  text-transform: capitalize;
}
.day_card-link {
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--btn-txt);
  background-color: var(--btn-bg);
  line-height: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  align-self: flex-end;
  box-sizing: border-box;
}

@media screen and (min-width: 0) {
  body {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr 64px;
  }
  body.home_page {
    grid-template: "header" "main" "nav";
  }
  body.home_page .main_header {
    grid-area: header;
    position: sticky;
    height: 72px;
    top: 0;
    width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  body.home_page-content {
    grid-area: main;
  }
  body .nav {
    grid-area: nav;
    position: fixed;
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 64px;
    background-color: #1F1B13;
    color: var(--text);
    justify-content: space-around;
  }
  body .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40px;
    align-self: center;
  }
  body .nav-icon {
    height: 40px;
    text-align: center;
    width: 56px;
    border-radius: 20px;
    line-height: 40px;
    text-transform: uppercase;
    transition: background-color ease-in-out 200ms;
  }
  body .nav-icon:hover {
    background-color: var(--nav-hover);
  }
  body .nav-text {
    display: none;
  }
  .main_header {
    flex-direction: row;
    padding: 0;
  }
  .main_header-nav {
    flex-direction: row;
  }
  .main_header-nav-text {
    display: none;
  }
  .post-header.scrolled {
    grid-template-areas: "icon space icons";
  }
  .post-header.scrolled .post-header-title {
    display: none;
  }
  .post-header.scrolled .post-header-back_icon, .post-header.scrolled .post-header-icons {
    padding: 12px;
  }
  .post-header.scrolled .icon {
    background-color: var(--btn-surface);
    transition: background-color ease-in-out 200ms;
  }
  .post-header.scrolled .icon svg {
    fill: var(--bg);
    transition: fill ease-in-out 300ms;
  }
  .post {
    grid-area: main;
    color: var(--text);
  }
  .post-content {
    grid-template-areas: "header" "content" "aside";
  }
  .post_footer {
    flex-direction: column;
  }
  .post_footer-nav {
    display: grid;
    grid-template-areas: "a" "b";
    gap: 8px;
    border-radius: 24px;
    grid-template-rows: 24px auto;
    width: 100%;
    padding: 24px;
    background-color: #231F17;
  }
  .post_footer-nav-day {
    grid-area: a;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .post_footer-nav:hover {
    background-color: var(--nav-hover);
  }
  .post_footer-nav-content {
    grid-area: b;
    font-size: 1.39rem;
    max-width: calc(100% - 48px);
  }
  .post .table-container {
    width: calc(100vw - 36px);
    margin: 16px 0;
    overflow-y: hidden;
    overflow-x: auto;
  }
  .post .admonition {
    width: 100%;
  }
  .post .admonition .table-container {
    width: 100%;
  }
  .scroll_to_top {
    display: none;
    height: 48px;
    width: 48px;
    bottom: 68px;
    right: 24px;
    border-radius: 29px;
  }
  .scroll_to_top span {
    display: none;
  }
  .day_card-list {
    flex-direction: column;
    width: 100%;
    margin: 16px 0;
    padding: 0 16px;
  }
}
@media screen and (min-width: 768px) {
  .day_card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .day_card-item {
    width: calc(50% - 4px);
  }
  .post-header {
    grid-template-columns: 48px 1fr minmax(48px, auto);
  }
  .post-header.scrolled {
    background-color: #1F1B13;
    grid-template-areas: "icon title icons";
    grid-template-rows: 64px;
    grid-template-columns: 48px 1fr auto;
    z-index: 9;
  }
  .post-header.scrolled .post-header-title {
    display: unset;
  }
  .post-header.scrolled .post-header-icons {
    padding: 0;
  }
  .post-header.scrolled .icon {
    background-color: unset;
    padding: 12px;
  }
  .post-header.scrolled .icon svg {
    fill: var(--text);
  }
  .post .admonition {
    width: 95%;
  }
  .post-content {
    grid-template-areas: "header header" "content aside" "footer footer";
    grid-template-columns: 70% 30%;
  }
  .post-content-main {
    grid-area: content;
  }
  .post-header {
    grid-area: header;
  }
  .post_footer {
    grid-area: footer;
  }
  .post-aside {
    grid-area: aside;
  }
  .post .table-container {
    width: 100%;
  }
  .post_footer {
    flex-direction: row;
  }
  .post_footer a {
    width: calc(50% - 16px);
  }
}
@font-face {
  font-family: "NotoSans";
  src: url("/assets/fonts/NSG.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 100%;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
@font-face {
  font-family: "NotoSans";
  src: url("/assets/fonts/NS.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 100%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}