:root {
    --blue: #0A94C8;
    --lighter-blue: #addbec;
    --yellow: #FFB603;
    --red: #FF2F03;
    --dark: #233044;
    --grey: #454963;
    --white: #fff;
    --offwhite: #fafafa;
    --title: 'LXGW WenKai Screen', sans-serif;
    --summary: 'LXGW WenKai Screen', sans-serif;
    --headings: 'LXGW WenKai Screen', sans-serif;
    --h5: 0.83rem;
    --h6: 0.67rem;
}

/********************* General *********************/

body {
  font-family: "LXGW WenKai Screen", sans-serif !important;
  font-weight: 300;
  color: var(--dark);
  background-color: var(--white);
}

#content {
  position: relative;
  min-height: 95vh;
}

a {
  text-decoration: underline var(--grey);
  color: var(--dark);
}

strong {
  font-weight:600;
}

table {
  font-family: var(--summary);
}
thead {
  background-color:whitesmoke;
  border-bottom-color: var(--dark);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
table th , table td{
  padding-right: 40px;
  padding-left: 10px;
}
table th{
  font-size:large;
}
table td{
  font-size: medium;
}

.serif {
  font-family: var(--summary);
  color: var(--grey);
}

.card{
  border-radius: 4px;
  background: var(--offwhite);
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: 1s transform cubic-bezier(.155,1.105,.295,1.12),1s box-shadow,1s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
/* padding: 14px 80px 18px 36px; */
  cursor: pointer;
  font-family: var(--headings);
}
.card-title {
  font-weight: 600;
  font-family: var(--title);
}
.card-footer {
  background-color: var(--white);
}
.card:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}
.top-highlight:hover { 
  border-top-color: var(--blue);
  border-top-width: 2px;
}
.card h3{
  font-weight: 600;
}
.card-right {
  text-align: right;
}
.card-date {
  font-weight: lighter;
  color: var(--grey);
  font-size: x-small;
}

@media(max-width: 990px){
  .card{
    margin: 20px;
  }
} 

blockquote {
  font-family: var(--summary);
  padding: 10px 10px 1px 30px;
  background-color:ghostwhite;
  border-left-width: 5px;
  border-left-color: lightgray;
  border-left-style: solid;
}
code {
  color: var(--grey);
  font-size: smaller;
  font-family: "LXGW WenKai Screen", sans-serif;
}
.btn-link {
  text-decoration: none;
  border-bottom-width: 1px;
  border-radius: 0px;
  color: var(--blue);
  vertical-align: middle;
}
.btn-link i {
  padding-right: 5px;
}
.btn-link:hover {
  text-decoration: underline;
  transition: 0.6s;
  transform: translate(0, 5px);
  color: var(--blue);
}
.status {
  font-weight: lighter;
  color: green;
  font-size: small;
}


/********************* Navbar *********************/

.navbar {
  background: var(--white) !important;
  color: var(--dark);
  font-family: var(--title);
}
.navbar-nav .nav-item .nav-link {
    color: var(--grey);
    font-weight: 300;
    transition: color 1s;
    display: block;
    position: relative;
    margin-left: 1em;
    margin-right: 1em;
    padding: 0.2em 0;
}
/* Fade in */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--red);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
.nav-link:hover::after,
.nav-link:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}



/********************* Home *********************/

.name {
  font-family: var(--title);
  font-weight: 800;
}

.bio {
  max-width: 750px;
  font-weight: 200;
  font-family: var(--summary);
}
.heading {
    font-weight: 400;
    color: var(--grey);
    font-family: var(--headings);
    text-decoration: none;
}
.heading:hover {
  transition: 0.6s;
  color: var(--blue);
  cursor: pointer;
}
.subheading {
  color: var(--grey);
  font-size: 22px;
  padding-bottom: 10px;
}
.tag-badge {
  background-color: var(--blue);
  font-family: var(--headings);
  font-weight: 400;
}
.see-all {
  text-decoration: none;
  border-bottom-width: 1px;
  border-radius: 0px;
  color: var(--blue);
  border-bottom-color:gainsboro;
}
.see-all:hover {
  transition: 0.6s;
  transform: translate(0, 5px);
  border-bottom-color: var(--blue);
  color: var(--blue);
}


/********************* List *********************/

/* ---- button-filters ---- */
.button {
  font-weight: 200;
  display: inline-block;
  padding: 0.15em 0.5em;
  background: var(--white);
  border: 2px;
  margin-bottom: 10px;
  margin-right: 3px;
  color:var(--grey);
  cursor: pointer;
  text-transform: capitalize;
  font-size: small;
}
.button:hover {
  background-color:var(--lighter-blue);
  color:var(--dark);
  transition: 1s;
}
.button:active,
.button.is-checked {
  background-color: var(--lighter-blue);
  color:var(--dark);
}
.btn-check:active+.button, 
.btn-check:checked+.button, 
.button.active, 
.button.dropdown-toggle.show, 
.button:active {
  color: #fff;
  background-color: var(--lighter-blue);
  color: var(--dark);
}
.button-group:after {
  content: '';
  display: block;
  /* clear: both; */
}
.button-group .button {
  float: left;
  border-radius: 5px;
}

/* ---- Title ---- */
.display-2 {
  font-family: var(--title);
  font-weight: 700;
  color: var(--dark);
}

.main-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/********************* Content *********************/

.main-content {
    width: 78%;
    line-height: 40px;
    font-size: 22px;
}
a {
  color: var(--blue);
  text-decoration: underline 0.10em rgba(255, 255, 255, 0);
  transition: text-decoration-color 0.5s;
}
a:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}
.main-content h2, h3, h4 {
  font-family: var(--headings);
  font-weight: bold;
  color: var(--dark);
  padding-top: 10px;
  padding-bottom: 10px;
}
.highlight {
  line-height: normal;
  font-size: medium;
  border-left-style: solid;
  border-left-width: 5px;
  padding-left: 10px;
  border-color: var(--dark);
}

/* Markdown content polish */
.main-content {
  --md-code-bg: #f8fafc;
  --md-code-fg: #1e293b;
  --md-code-inline-bg: #eef2ff;
  --md-code-inline-fg: #1e293b;
  --md-table-stripe: #f8fbff;
  --md-callout-note: #2563eb;
  --md-callout-tip: #059669;
  --md-callout-warning: #d97706;
  --md-callout-danger: #dc2626;
}

.main-content pre {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e7ecf3;
  background: var(--md-code-bg) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  line-height: 1.55;
}

.main-content .highlight {
  margin: 1.2rem 0;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

.main-content .highlight pre {
  margin: 0;
  border-radius: 12px;
  border: 0;
  font-size: 0.92rem;
}

.main-content pre code {
  background: transparent !important;
  color: inherit;
  padding: 0;
  font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
}

.main-content :not(pre) > code {
  display: inline-block;
  padding: 0.12rem 0.42rem;
  border-radius: 6px;
  border: 1px solid #d7def2;
  background: var(--md-code-inline-bg);
  color: var(--md-code-inline-fg);
  font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95em;
  line-height: 1.4;
}

.main-content table {
  width: 100%;
  display: block;
  overflow-x: auto;
  margin: 1.25rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  background: #fff;
  font-size: 1em;
  line-height: inherit;
}

.main-content table thead {
  background: linear-gradient(180deg, #f7f9ff 0%, #f1f5ff 100%);
}

.main-content table th,
.main-content table td {
  min-width: 120px;
  padding: 0.72rem 0.9rem;
  vertical-align: top;
  font-size: 1em;
}

.main-content table tbody tr:nth-child(even) {
  background: var(--md-table-stripe);
}

.main-content table :not(pre) > code {
  font-size: 1em;
}

.main-content .md-callout {
  margin: 1.15rem 0;
  padding: 0.78rem 1rem 0.82rem;
  border-left: 4px solid var(--md-callout-note);
  border-radius: 10px;
  background: #f6f9ff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.main-content .md-callout-title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-callout-note);
}

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

.main-content .md-callout-tip {
  border-left-color: var(--md-callout-tip);
  background: #f2fcf8;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.1);
}

.main-content .md-callout-tip .md-callout-title {
  color: var(--md-callout-tip);
}

.main-content .md-callout-warning,
.main-content .md-callout-caution,
.main-content .md-callout-important {
  border-left-color: var(--md-callout-warning);
  background: #fff9f0;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.1);
}

.main-content .md-callout-warning .md-callout-title,
.main-content .md-callout-caution .md-callout-title,
.main-content .md-callout-important .md-callout-title {
  color: var(--md-callout-warning);
}

.main-content .md-callout-danger {
  border-left-color: var(--md-callout-danger);
  background: #fff5f5;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
}

.main-content .md-callout-danger .md-callout-title {
  color: var(--md-callout-danger);
}


/********************* Sidebar *********************/

.sidebar {
    width: 20%;
    position: sticky;
    top: 0;
    overflow-y: auto;
    background-color: var(--white);
    align-self: flex-start;
}

.sidebar ul {
    list-style: none;
    /* 去掉前面的点 */
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 0;
    margin: 0;
}

/* 不同层级的标题增加 2ch 缩进 */
.sidebar ul ul {
    padding-left: 0ch;
}

/* 二级 */
.sidebar ul ul ul {
    padding-left: 1ch;
}

/* 三级 */
.sidebar ul ul ul ul {
    padding-left: 1ch;
}

/* 四级 */

/********************* Footer *********************/

.footer-social a,
.footer-social i{
  color: var(--dark);
  font-size: x-large;
}

.footer-social a,
.footer-social i:hover{
  color: var(--blue);
  transition: color .5s;
}


/********************* Linked Header *********************/

button.anchor {
  fill: var(--blue);
  background-color: inherit;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: inherit;
  padding: 0;
}

@media (hover: hover) {
	button.anchor {
	  opacity: 0.1;
	}
  h1:hover button.anchor,
  h2:hover button.anchor,
  h3:hover button.anchor,
  h4:hover button.anchor,
  h5:hover button.anchor,
  h6:hover button.anchor {
    opacity: 1;
  }
}

@media (hover: none) {
	button.anchor {
	  opacity: 1;
	}
}

@media (hover: hover) {
  [data-title] {
  position: relative;
  }

  [data-title]:after {
  font-size: var(--h6);
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: 100%;
  color: var(--white);
  background-color: var(--dark);
  width: max-content;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  }

  [data-title]:hover:after {
  opacity: 1;
  }
}

.link-copied {
  font-size: var(--h5);
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  margin: 1rem;
  color: var(--white);
  background-color: var(--dark);
  width: max-content;
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  z-index: 1;
}

/* 窄卡片专属样式 */
.top-highlight {
    border-radius: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.top-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* 图片悬停效果 */
.card img {
    transition: transform 0.3s ease;
}

.card:hover img {
    transform: scale(1.03);
}

/* 文字截断优化 */
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.card-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 更紧凑的徽章 */
.badge {
    padding: 0.25em 0.4em !important;
    font-weight: 500 !important;
}

/********************* Links *********************/

.links-page {
  padding-top: 6px;
}

.links-header {
  margin-bottom: 20px;
}

.links-title {
  margin: 0 0 8px 0;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  color: #27304a !important;
}

.links-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #4d5568;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.links-page .friend-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d9dde4;
  border-top: 2px solid transparent;
  border-radius: 6px;
  padding: 10px 12px;
  height: 108px;
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
  transition: 1s transform cubic-bezier(.155, 1.105, .295, 1.12), 1s box-shadow, 1s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
}

.links-page .friend-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  border-color: #d9dde4;
  border-top-color: var(--blue);
}

.friend-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.friend-avatar-wrap {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  pointer-events: none;
}

.friend-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  background: #ffffff;
}

.friend-info {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1 1 auto;
  pointer-events: none;
}

.friend-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-site {
  font-size: 36px;
  font-weight: 600;
  color: #1e2435;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.friend-github {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  color: #5e6677;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

.friend-desc {
  margin: 4px 0 0 0;
  color: #4e5668;
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media(max-width: 1200px) {
  .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .friend-site {
    font-size: 30px;
  }

  .friend-desc {
    font-size: 16px;
  }
}

@media(max-width: 575px) {
  .links-title {
    font-size: 36px;
  }

  .links-summary {
    font-size: 15px;
  }

  .links-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .friend-card {
    height: 96px;
    padding: 10px;
  }

  .friend-avatar {
    width: 62px;
    height: 62px;
  }

  .friend-site {
    font-size: 24px;
  }

  .friend-desc {
    font-size: 14px;
  }
}