body>main {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  flex-direction: column;
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-CN sans-serif";
  src: local("Source Han Sans SC"), local("Source Han Sans"), local("Dengxian"), local("Microsoft Yahei");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "zh-CN sans-serif";
  src: local("Source Han Sans SC Bold"), local("Source Han Sans Bold"), local("Dengxian Bold"), local("Microsoft Yahei Bold");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "zh-CN sans-serif";
  src: local("STLiti"), local("STXingkai"), local("STXinwei"), local("LiSu"), local("YouYuan Regular");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-CN serif";
  src: local("Source Han Serif SC"), local("Source Han Serif"), local("Simsun Regular");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "zh-CN serif";
  src: local("Source Han Serif SC Bold"), local("Source Han Serif Bold"), local("STsong Regular");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "zh-CN serif";
  src: local("STKaiti"), local("KaiTi");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-CN fantasy";
  src: local("Source Han Sans SC");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "en sans-serif";
  src: local("Helvetica"), local("Helvetica Regular"), local("Arial Regular"), local("Arial");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "en sans-serif";
  src: local("Helvetica Bold"), local("Arial Bold");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "en sans-serif";
  src: local("Helvetica Italic"), local("Arial Italic");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "en serif";
  src: local("Georgia Regular"), local("Georgia"), local("Times New Roman Regular"), local("Times New Roman");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "en serif";
  src: local("Georgia Bold"), local("Times New Roman Bold");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "en serif";
  src: local("Georgia Italic"), local("Times New Roman Italic");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "en fantasy";
  src: local("Jost Regular");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-Hant sans-serif";
  src: local("Source Han Sans TC"), local("Source Han Sans"), local("Meiryo"), local("Microsoft JhengHei");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "zh-Hant sans-serif";
  src: local("Source Han Sans TC Bold"), local("Source Han Sans Bold"), local("Meiryo Bold"), local("Microsoft JhengHei Bold");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "zh-Hant sans-serif";
  src: local("Meiryo Italic"), local("UD Digi Kyokasho N"), local("STLiti"), local("STXingkai"), local("STXinwei"), local("LiSu"), local("YouYuan Regular");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-Hant serif";
  src: local("KingHwa_OldSong"), local("Source Han Serif TC"), local("Source Han Serif"), local("Simsun-ExtB Regular");
}
@font-face {
  font-weight: 450 700;
  font-style: normal;
  font-family: "zh-Hant serif";
  src: local("Source Han Serif TC Bold"), local("Source Han Serif Bold"), local("STsong Regular");
}
@font-face {
  font-weight: 250 450;
  font-style: italic;
  font-family: "zh-Hant serif";
  src: local("STKaiti"), local("KaiTi");
}
@font-face {
  font-weight: 250 450;
  font-style: normal;
  font-family: "zh-Hant fantasy";
  src: local("Source Han Sans TC");
}
* {
  font-family: latin var(--font-style), var(--lang) var(--font-style), var(--font-style);
}
.respect-wm {
  writing-mode: var(--writing-mode);
}
.neglect-wm {
  writing-mode: horizontal-tb;
}
button,
input[type="button"] {
  display: block;
  inline-size: fit-content;
  padding-inline: 1em;
  padding-block: 0.25em;
  margin-inline: auto;
  background-color: #fff;
  color: currentColor;
  border-radius: 0.5em;
  border: 1px solid currentColor;
  outline: none;
  box-shadow: 0em 0.25em 0.5em rgba(0,0,0,0.251);
  cursor: pointer;
  font-size: inherit;
}
abbr {
  text-decoration: underline dotted currentColor 2px;
}
.panel {
  display: block;
  position: relative;
  writing-mode: var(--writing-mode);
  border-radius: 0.5em;
  background-color: #fff;
  box-shadow: 0em 0.25em 0.5em rgba(0,0,0,0.251);
  overflow: hidden;
}
.panel.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.panel.flex >header {
  flex: 0 0 auto;
}
.panel.flex >main {
  flex: 1 1 0px;
}
.panel >header {
  display: block;
  block-size: fit-content;
  min-block-size: 2em;
  line-height: 2em;
  font-size: 1.4em;
  padding-inline: 0.5em;
  padding-block: 0em;
  color: #e8e8e8;
  background-color: #111112;
  font-weight: bold;
  user-select: none;
}
.panel >main {
  overflow-inline: auto;
}
@media (min-width: 64rem) {
  .panel >main {
    margin-inline: 0em;
    margin-block: 1em;
    padding-inline: 1.4em;
    padding-block: 0em;
  }
}
@media (max-width: 64rem) {
  .panel >main {
    margin-inline: 0em;
    margin-block: 0.8em;
    padding-inline: 1em;
    padding-block: 0em;
  }
}
#hero {
  display: block;
  position: relative;
  writing-mode: var(--writing-mode);
  border-radius: 0.5em;
  background-color: #fff;
  box-shadow: 0em 0.25em 0.5em rgba(0,0,0,0.251);
  overflow: hidden;
}
#hero.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
#hero.flex >header {
  flex: 0 0 auto;
}
#hero.flex >main {
  flex: 1 1 0px;
}
#hero >header {
  display: block;
  block-size: fit-content;
  min-block-size: 2em;
  line-height: 2em;
  font-size: 1.4em;
  padding-inline: 0.5em;
  padding-block: 0em;
  color: #e8e8e8;
  background-color: #111112;
  font-weight: bold;
  user-select: none;
}
#hero >main {
  overflow-inline: auto;
}
@media (min-width: 64rem) {
  #hero >main {
    margin-inline: 0em;
    margin-block: 1em;
    padding-inline: 1.4em;
    padding-block: 0em;
  }
}
@media (max-width: 64rem) {
  #hero >main {
    margin-inline: 0em;
    margin-block: 0.8em;
    padding-inline: 1em;
    padding-block: 0em;
  }
}
@media (min-width: 64rem) {
  #hero {
    flex-direction: row;
    align-items: flex-start;
    min-height: 25rem;
    height: fit-content;
    align-items: stretch;
  }
  #hero #brief {
    flex: 1 0 0;
  }
  #hero #timeline {
    width: 18rem;
  }
}
@media (max-width: 64rem) {
  #hero {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
#interests {
  display: block;
  height: fit-content;
}
#interests >main {
  margin-inline: 0em;
  margin-block: 0.8em;
  padding-inline: 0.8em;
  padding-block: 0em;
  gap: 0.8em;
}
@media (min-width: 64rem) {
  #interests >main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    block-size: fit-content;
  }
}
@media (max-width: 64rem) {
  #interests >main {
    writing-mode: horizontal-tb;
    display: flex;
    flex-direction: column;
    height: fit-content;
  }
}
#interests >main >.interest {
  box-sizing: border-box;
  border: #070b09 1px solid;
  border-radius: 0.5rem;
  color: #070b09;
  text-decoration: none;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: transform, box-shadow;
  padding: 0.5em;
  display: flex;
  position: relative;
}
@media (min-width: 64rem) {
  #interests >main >.interest {
    block-size: 6rem;
    flex-direction: column;
  }
  #interests >main >.interest:hover {
    transform: scale(1.05);
    box-shadow: 0em 0.25rem #070b09;
  }
  #interests >main >.interest >h3 {
    flex: 1 0 0;
    font-size: 1.4rem;
  }
  #interests >main >.interest >p {
    border-block-start: #070b09 1px solid;
    padding-block-start: 0.25rem;
  }
}
@media (max-width: 64rem) {
  #interests >main >.interest {
    block-size: 3rem;
    flex-direction: row;
    align-items: center;
    gap: 1em;
  }
  #interests >main >.interest >p {
    flex: 1 0 0;
  }
}
#interests >main >.interest >* {
  margin: 0em;
}
#interests >main >.interest >p {
  font-size: 0.8em;
  line-height: 1em;
}