:root{

  --bg:#f6f8fb;

  --card:#ffffff;

  --text:#172033;

  --muted:#5f6b7a;

  --primary:#0b63ce;

  --border:#e3e8ef;

}

*{box-sizing:border-box}

body{

  margin:0;

  font-family:Arial,Helvetica,sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.75;

}

header{

  background:#fff;

  border-bottom:1px solid var(--border);

}

.header-inner{

  max-width:1000px;

  margin:auto;

  padding:18px 20px;

}

.brand{

  color:var(--text);

  text-decoration:none;

  font-weight:700;

  font-size:20px;

}

nav{

  margin-top:10px;

  display:flex;

  flex-wrap:wrap;

  gap:14px;

}

nav a{

  color:var(--primary);

  text-decoration:none;

  font-size:14px;

}

main{

  max-width:900px;

  margin:35px auto;

  padding:0 20px;

}

article{

  background:var(--card);

  border:1px solid var(--border);

  border-radius:14px;

  padding:30px;

}

h1,h2{

  line-height:1.3;

  color:#101828;

}

h1{

  font-size:34px;

  margin-top:0;

}

h2{

  margin-top:35px;

  font-size:25px;

}

p,li{

  font-size:17px;

}

.intro{

  font-size:19px;

  color:#3f4b5b;

}

.box{

  background:#f2f7ff;

  border-left:4px solid var(--primary);

  padding:18px;

  border-radius:8px;

  margin:24px 0;

}

.example{

  background:#fafafa;

  border:1px solid var(--border);

  padding:18px;

  border-radius:10px;

  margin:20px 0;

}

.related{

  margin-top:35px;

  padding-top:20px;

  border-top:1px solid var(--border);

}

.related ul{

  padding-left:20px;

}

.related a{

  color:var(--primary);

  text-decoration:none;

}

.related a:hover{

  text-decoration:underline;

}

.disclaimer{

  margin-top:35px;

  background:#fff8e8;

  border:1px solid #f0dfad;

  padding:18px;

  border-radius:10px;

  color:#5c4b1d;

}

footer{

  text-align:center;

  padding:25px 20px 40px;

  color:var(--muted);

  font-size:14px;

}

@media(max-width:600px){

  main{

    margin:20px auto;

    padding:0 12px;

  }

  article{

    padding:22px 18px;

  }

  h1{

    font-size:28px;

  }

  h2{

    font-size:23px;

  }

  p,li{

    font-size:16px;

  }

}

.table-of-contents{

  margin:24px 0;

  border:1px solid #e1e6ee;

  border-radius:12px;

  background:#f8fafc;

  overflow:hidden;

}



.toc-toggle{

  width:100%;

  border:0;

  background:#071b35;

  color:#fff;

  padding:16px 18px;

  font-size:16px;

  font-weight:700;

  display:flex;

  justify-content:space-between;

  align-items:center;

  cursor:pointer;

}



.toc-arrow{

  font-size:18px;

  line-height:1;

}



.toc-content{

  display:none;

  padding:14px 22px;

}



.table-of-contents.open .toc-content{

  display:block;

}



.toc-content ul{

  margin:0;

  padding-left:18px;

}



.toc-content li{

  margin:10px 0;

}



.toc-content a{

  color:#0d3b66;

  text-decoration:none;

  font-weight:600;

}



.toc-content a:hover{

  text-decoration:underline;

}



@media(max-width:600px){

  .toc-toggle{

    padding:15px;

  }



  .toc-content{

    padding:12px 18px;

  }

}

.author-box{

    margin:30px 0;

    padding:20px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#f8f9fa;

}

.author-box strong{

    display:block;

    font-size:18px;

    margin-bottom:5px;

}

.author-box span{

    display:block;

    font-size:14px;

    margin-bottom:12px;

    color:#555;

}

.author-box p{

    margin:0;

    line-height:1.6;

}