@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
  --bg1:#0090ff;
  --bg2:#043e65;
  --panel-left:#3d3d41;
  --panel-right:#232326;
  --text:#ffffff;
  --muted:#cfcfcf;
  --accent:#00b4ff;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Montserrat, Arial, sans-serif;color:var(--text)}
body{
  min-height:100vh;
  background:linear-gradient(120deg,var(--bg1),var(--bg2));
  background-size:200% 200%;
  animation:bgMove 14s ease-in-out infinite;
  position:relative;
}

.intro-mask{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#3d3d41;
  border-radius:inherit;
  color:#f2f2f2;
  font-size:52px;
  font-weight:800;
  letter-spacing:-0.5px;
  pointer-events:none;
  opacity:1;
  transform:scale(1);
  visibility:visible;
  transition:opacity .72s ease, transform .72s ease, visibility .72s ease;
}

.intro-mask.hide{
  opacity:0;
  transform:scale(1.01);
  visibility:hidden;
}

@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 18px 14px;
}

.shell{
  width:820px;
  max-width:calc(100vw - 36px);
  min-height:590px;
  max-height: 700px;
  border-radius:40px;
  overflow:hidden;
  display:flex;
  background:var(--panel-right);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  position:relative;
}

.left{
  width:250px;
  background:var(--panel-left);
  padding:28px 12px;
}

.brand{
  margin:2px 0 18px;
  text-align:center;
  font-size:24px;
  font-weight:800;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu-btn,
.menu-link,
.submenu-link{
  width:100%;
  border:0;
  border-radius:12px;
  text-decoration:none;
  color:#efefef;
  background:#17171a;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.menu-link.active,
.submenu-link.active,
.menu-btn.active{
  background:#0f0f11;
  outline:2px solid rgba(255,255,255,.18);
}

.menu-btn{
  justify-content:space-between;
}

.chevron{
  font-size:16px;
  transition:transform .2s ease;
}

.docs.open .chevron{transform:rotate(180deg)}

.submenu{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
}

.docs.open .submenu{
  max-height:180px;
  opacity:1;
  transform:translateY(0);
  margin-top:8px;
  pointer-events:auto;
}

.submenu-link{
  background:#222226;
  font-size:13px;
  font-weight:600;
}

.right{
  flex:1;
  padding:34px 30px;
  overflow-y: auto;
}

.content-title{
  margin:0 0 20px;
  font-size:34px;
  font-weight:800;
}

.content p{
  margin:0 0 14px;
  font-size:14px;
  font-weight:500;
  color:#ececec;
}

.content a{
  color:var(--accent);
  text-decoration:none;
}

.content a:hover{text-decoration:underline; overflow-y: auto;}

.footer{
  margin-top:18px;
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:700;
}

@media (max-width:900px){
  .shell{min-height:auto;flex-direction:column}
  .left{width:100%;padding:18px}
  .right{padding:22px 16px}
  .content-title{font-size:26px}
  .content p{font-size:16px}
}

@media (prefers-reduced-motion: reduce){
  body{animation:none}
}