:root{
  --bg:#202123;
  --panel:#202123;
  --sidebar:#141517;
  --panel2:#2a2b32;
  --text:#d1d5db;
  --muted:rgba(236,236,241,.72);
  --muted2:rgba(236,236,241,.55);
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.06);
  --hover:rgba(255,255,255,.06);
  --active:rgba(255,255,255,.10);
  --link:#4ea3ff;
  --accent:#10a37f;
  --code:#202123;
  --code2:rgba(255,255,255,.06);
  --title:#ffffff;
  --content-indent:1.5em;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

::selection{background:rgba(16,163,127,.28);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20);}

.app{display:flex;height:100vh;min-height:0;}

.sidebar{
  width:320px;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  height:100vh;
  min-height:0;
}

.sidebar-header{padding:14px 14px 10px 14px;}
.sidebar-title{font-weight:650;opacity:.96;color:var(--title);}
.sidebar-sub{margin-top:6px;font-size:12px;color:var(--muted2);}

.sidebar-lang{padding:0 14px 10px 14px;}
.sidebar-lang select{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  outline:none;
}
.sidebar-lang select:focus{
  border-color:rgba(16,163,127,.45);
  box-shadow:0 0 0 2px rgba(16,163,127,.16);
}

.sidebar-search{padding:0 14px 12px 14px;}
.sidebar-search input{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  outline:none;
}
.sidebar-search input:focus{
  border-color:rgba(16,163,127,.45);
  box-shadow:0 0 0 2px rgba(16,163,127,.16);
}

.nav{padding:6px 8px 10px 8px;overflow:auto;flex:1;min-height:0;}

.nav-group{margin:6px 0;}

.nav-group-header{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.26);
  border:0;
  color:rgba(236,236,241,1);
  cursor:pointer;
  text-align:left;
}

.nav-group-header:hover{background:rgba(0,0,0,.34);color:var(--title);}

.nav-group-toggle{
  width:14px;
  flex:0 0 14px;
  opacity:.9;
}

.nav-group-header[data-expanded="true"] .nav-group-toggle::before{content:"v";}
.nav-group-header[data-expanded="false"] .nav-group-toggle::before{content: ">";}

.nav-group-title{font-size:15px;font-weight:700;letter-spacing:.2px;}

.nav-children{padding-left:20px;margin-top:2px;}

.nav-item{
  display:block;
  padding:10px 10px;
  margin:4px 0;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  line-height:1.25;
  font-size:13px;
  opacity:.92;
}
.nav-item:hover{background:var(--hover);}
.nav-item.active{background:var(--active);}

.main{flex:1;display:flex;justify-content:center;overflow:auto;min-height:0;}

.content-wrap{width:100%;max-width:1120px;display:flex;gap:18px;padding:24px 24px;min-height:0;}

.content{
  flex:1;
  background:transparent;
}

.content > :first-child{margin-top:0;}

.toc{
  width:260px;
  flex:0 0 260px;
  border-left:1px solid var(--border);
  padding-left:16px;
  position:sticky;
  top:16px;
  height:calc(100vh - 48px);
  overflow:auto;
}

.toc-title{font-size:12px;color:var(--muted);margin:4px 0 8px 0;}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:6px 6px;border-radius:8px;}
.toc a:hover{background:var(--hover);color:var(--text);}

h1{font-size:28px;line-height:1.25;margin:0 0 18px 0;color:var(--title);}
h2{font-size:20px;line-height:1.35;margin:30px 0 16px 0;color:var(--title);}
h3{font-size:16px;line-height:1.35;margin:22px 0 14px 0;color:var(--title);}

p{margin:8px 0;color:var(--text);line-height:1.75;}
ul,ol{margin:10px 0 10px 22px;}
li{margin:6px 0;line-height:1.6;}

.content p,
.content ul,
.content ol,
.content pre,
.content blockquote,
.content hr,
.content .notice{
  margin-left:var(--content-indent);
}

pre{
  background:var(--code);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:14px;
  overflow:auto;
  line-height:1.55;
}
pre code{display:block;color:rgba(255,255,255,.92);}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}

code.inline{
  background:var(--code2);
  border:1px solid var(--border2);
  padding:2px 6px;
  border-radius:8px;
  font-size:0.95em;
}

blockquote{
  margin:12px 0;
  padding:10px 12px;
  border-left:3px solid rgba(16,163,127,.40);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  color:var(--muted);
}

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

hr{border:0;border-top:1px solid var(--border);margin:18px 0;}

.notice{padding:12px 14px;border:1px solid var(--border2);border-radius:12px;background:rgba(0,0,0,.10);color:var(--muted);}

@media (max-width: 1100px){
  .content-wrap{flex-direction:column;}
  .toc{width:auto;flex:auto;position:relative;top:auto;height:auto;border-left:none;border-top:1px solid var(--border);padding:16px 0 0 0;}
}

@media (max-width: 860px){
  .sidebar{display:none;}
  .content-wrap{padding:18px 16px;}
}