:root{
  --site-paper:#fff8ea;
  --site-ink:#352d24;
  --site-soft:#7c6f61;
  --site-line:#eadfc9;
  --site-blue:#32a9e6;
  --site-coral:#ff695b;
  --site-green:#49bc72;
  --site-gold:#ffbf34;
  --site-teal:#23b7a5;
  --site-shadow:0 5px 0 rgba(53,45,36,.16);
}
.site-shell{
  color:var(--site-ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",sans-serif;
}
.site-nav{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,248,234,.92);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(234,223,201,.72);
}
.site-nav-inner{
  max-width:980px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.site-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  color:var(--site-ink);
  text-decoration:none;
  font-weight:900;
}
.site-brand-mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#fff;
  border:2px solid var(--site-line);
  box-shadow:0 3px 0 rgba(53,45,36,.12);
}
.site-nav-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.site-nav-link{
  color:var(--site-soft);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  background:#fff;
  border:2px solid var(--site-line);
  border-radius:12px;
  padding:8px 10px;
}
.site-nav-link:hover{
  color:var(--site-ink);
  border-color:var(--site-gold);
}
.site-grade-ribbon{
  max-width:520px;
  margin:10px auto 0;
  padding:0 16px;
}
.site-grade-ribbon span{
  display:block;
  background:#fffdf8;
  border:2px dashed var(--site-line);
  border-radius:14px;
  padding:9px 12px;
  color:var(--site-soft);
  font-size:13px;
  font-weight:800;
  text-align:center;
}
.site-grade-ribbon .grade-short{
  display:none;
}
.site-adventure-note{
  margin:8px 16px 4px;
  border:2px solid var(--site-line);
  border-radius:16px;
  background:#fffdf8;
  padding:10px 12px;
  color:var(--site-soft);
  font-size:13px;
  font-weight:700;
  line-height:1.55;
  text-align:center;
}
.site-shell .topbar{
  top:58px;
}

@media (max-width:620px){
  .site-nav-inner{padding:8px 12px;}
  .site-shell:not(.home-page) .site-brand span:last-child{display:none;}
  .site-nav-links{gap:6px;}
  .site-nav-link{font-size:12px;padding:8px 8px;}
  .home-page .site-nav-inner{flex-wrap:wrap;}
  .home-page .site-nav-links{
    width:100%;
    margin-left:0;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .home-page .site-nav-link{flex:0 0 auto;}
  .site-alt-link{display:none;}
  .site-grade-ribbon{margin-top:6px;padding:0 12px;}
  .site-grade-ribbon .grade-full{display:none;}
  .site-grade-ribbon .grade-short{
    display:block;
    padding:6px 10px;
    font-size:12px;
    border-radius:999px;
  }
  .site-shell .topbar{top:54px;}
}