*{box-sizing:border-box}html,body{margin:0;padding:0}h1,h2,h3{margin:0;padding:0}
body{background-color:#010409;color:#e6edf3;font-size:.875rem;font-family:"Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
a{color:#f0f6fc;text-decoration:none}.main a:hover{color:#4493f8}
a.external:after{content:"";display:inline-block;position:relative;top:.075rem;left:.2rem;width:.875rem;height:.875rem;background:currentColor;color:#4493f8;--icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/></svg>");mask-image:var(--icon)}
header{background-color:rgba(1,4,9,0.6);height:64px;padding:1rem;border-bottom:1px solid #30363d}
header a{color:#e6edf3}a.home{font-weight:600;font-size:1.2rem;padding:8px;position:relative;top:-.5rem}a.home:hover{background:#b1bac41f;border-radius:0.375rem}
a.headerlogo{padding-left:.75rem;padding-right:.3rem}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
    z-index: 50;
}
#overlay.show {
    display: block;
    opacity: 1;
}
#sidebar {
    width: 320px;
    height: 100vh+2px;
    background-color: #151b23;
    color: #f0f6fc;
    position: fixed;z-index:90;
    top:-1px;
    bottom:-1px;
    left: -320px;
    transition: left 0.2s ease;
    border:1px solid #3d444d;
    border-radius:0.75rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left:none;
    padding:1rem;
}
#sidebar.open {
    left: 0;
}
#sidebar ul{list-style:none;padding:0;margin:2rem 0}
#sidebar li{padding:0.5rem 1rem}
#sidebar li:hover{
    background-color: #262c36;
    border-radius: 0.375rem;
}
#sidebar .foot{color:#9198a1;font-size:0.75rem;margin:2rem .5rem}

.lside{width:336px}
.lside-content{
    position: sticky;
    top: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    min-height:100vh;
    max-height: 100vh;
    flex-direction: column;
    padding:3rem 1.5rem;
    background-color:rgba(1,4,9,0.6);
    border-right:1px solid #303633;
}
#menubtn{
  cursor: pointer;
  display: inline-grid;
  grid-auto-columns: max-content;
  width: 2rem;
  height: 2rem;
  color:#848d97;
  background:transparent;
  border: max(1px,0.0625rem) solid #30363d;
  border-radius: 0.375rem;
  align-items: center;
  justify-content: center;
  position:relative;top:-.5rem;
}
#closebtn{
    float:right;
    display: grid;
    cursor: pointer;
    color:#9198a1;
    background: transparent;
    border:0;
    transition: .2s;
    width:2rem;
    height:2rem;
    border-radius:0.375rem;
    place-content: center;
}
#closebtn:hover{
    background-color: #262c36;
    color:#f0f6fc;
}
#menubtn:hover{
    background-color:#262c36;border-color:#3d444d;transition-duration:80ms;
}
.octicon {
    fill: currentColor;
  }
.lside .avatar{width:150px;border-radius:10px}
.flex-auto{flex:auto !important}
aside .widget{border:1px solid #30363db3;border-radius:.375rem;padding:1rem}
aside img.qq{width:100%}
#universe{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-10}
.widget h3{margin:0 0 1rem;font-size:1.1rem}

.primary{flex:auto;display:flex;justify-content:center;width:66.66666664%;padding:24px;gap:24px}
.content{flex:auto;width:100%;max-width:900px}
.article{min-height:120px;padding:1rem;margin:1rem auto;border:1px solid #30363db3;border-radius:.375rem;background:rgba(45,45,45,0.5)}
.article:hover{border-color:#42444a}
.article h3{font-size:1.2rem;font-weight:700;margin:.5rem 0}
.rside{width:100%;max-width:300px}
.stack{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem}
.stack img{display:block;width:45px;height:45px}
.quotation .price1{text-decoration:line-through;padding-right:2rem}
@media (max-width: 1199px) {
    .primary{flex-direction:column}
    .rside{max-width:100%}
}
@media (max-width: 767px) {
    .main{flex-direction:column}
    .lside{order:1;width:100%}
    .lside-content{position:relative;min-height:0}
    .primary{order:0;width:100%}
}