.post-code-block {
  margin-block: var(--block-gap);

  overflow: hidden;

  border-radius: var(--radius-2xl);

  background: var(--surface-raised);

  box-shadow: var(--shadow-panel);
}

.post-code-block-head {
  padding: var(--space-5) var(--space-7);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-4);

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

  background: var(--surface-sunken);
}

.post-code-block pre {

  margin: 0;
  padding: var(--space-7);

  overflow-x: auto;
  white-space: pre;

  scrollbar-width: thin;
}

.post-code-block code {


  tab-size: 2;
}

@media (max-width: 720px) {

  .post-code-block {
    border-radius: var(--radius-xl);
  }

  .post-code-block pre {
    padding: var(--space-6);
  }

}

.post-code-block pre:focus-visible { outline-offset: -3px; }

.post-code-block pre { overflow-wrap: normal; }
.post-code-block-head { flex-wrap: wrap; }