h1,h6,strong{font-weight:700}.canvas-container{width:100vw;max-width:800px;padding-bottom:50%;position:relative}codebody{background-color:#f1f1f1;font-family:Arial,sans-serif;font-size:20px;line-height:1.6;border:3px solid #d9d9d9;border-radius:5px;padding:40px}h6{font-size:36px;color:#000}h1{font-size:30px;color:#333}p{margin:1em 0}em{font-style:italic}ul{list-style-type:disc;padding-left:20px}code{background-color:#f4f4f4;font-size:18px;color:green;border:1px solid #ddd;border-radius:3px;padding:2px 4px;font-family:"Courier New",monospace}
.chart-container {
            width: 80%;
            margin: auto;
        }
.tabs {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  flex: 1;
  padding: 10px;
  text-align: center;
  background: #c8f8f8;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background 0.3s ease;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: #fff;
  border-bottom: 2px solid #c07bff;
}

.tab-content {
  padding: 20px;
  background: #fff;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}