.code-block {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #050406;
  overflow: hidden;
  margin: 14px 0 22px;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent);
}

.code-head span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.code-block pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #d9ccd0;
  scrollbar-width: thin;
}

.code-block .k { color: #ff8d96; }
.code-block .s { color: #9ee6b4; }
.code-block .n { color: #ffcf7a; }
.code-block .b { color: #ff5a68; }

.copy-btn {
  border: 1px solid var(--line-2);
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.copy-btn:hover {
  color: #fff;
  border-color: var(--line-red);
  background: rgb(255 34 49 / 12%);
}

.copy-btn.is-copied {
  color: var(--ok);
  border-color: rgb(56 215 138 / 40%);
  background: rgb(56 215 138 / 10%);
}