.post-article-content {
  --ppo-code-ink: #11243e;
  --ppo-code-muted: #5e7188;
  --ppo-code-line: #d8e5f1;
  --ppo-code-blue: #62a8ff;
  --ppo-code-cyan: #56e3d0;
  --ppo-code-gold: #f6c85f;
  --ppo-code-coral: #ff7f96;
  --ppo-code-violet: #a99cff;
  --ppo-code-panel: #081424;
  --ppo-code-panel-soft: #101f35;
}

.ppo-code-callout,
.post-article-content .ppo-code-callout {
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.32fr) minmax(0, 1fr);
  gap: 0.8rem 1rem;
  align-items: start;
  margin: 1.55rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid #b9d8f8;
  border-left: 5px solid #438fe9;
  border-radius: 13px;
  background: linear-gradient(135deg, #f5faff, #eef7ff);
  color: #3f5b78;
  line-height: 1.65;
}

.ppo-code-callout strong,
.post-article-content .ppo-code-callout strong {
  color: #165b9e;
}

.ppo-code-callout-warning,
.post-article-content .ppo-code-callout-warning {
  border-color: #ecd7a6;
  border-left-color: #d89a20;
  background: linear-gradient(135deg, #fffdf5, #fff8e6);
  color: #6f5b36;
}

.ppo-code-callout-warning strong,
.post-article-content .ppo-code-callout-warning strong {
  color: #956513;
}

.ppo-code-lab,
.post-article-content .ppo-code-lab {
  position: relative;
  margin: 2rem 0 2.45rem;
  padding: clamp(1rem, 2.7vw, 1.65rem);
  overflow: hidden;
  border: 1px solid rgba(130, 170, 224, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% -15%, rgba(74, 141, 240, 0.27), transparent 37%),
    radial-gradient(circle at 100% 0%, rgba(64, 214, 193, 0.16), transparent 31%),
    linear-gradient(155deg, #10203a, var(--ppo-code-panel));
  box-shadow: 0 22px 54px rgba(4, 15, 31, 0.25);
  color: #e9f2ff;
  color-scheme: dark;
  isolation: isolate;
}

.ppo-code-lab::after {
  position: absolute;
  z-index: -1;
  right: -8rem;
  bottom: -9rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(86, 227, 208, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.7rem rgba(86, 227, 208, 0.025),
    0 0 0 5.4rem rgba(86, 227, 208, 0.018);
  content: "";
  pointer-events: none;
}

.ppo-code-lab-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 1rem;
}

.ppo-code-lab-heading h3,
.post-article-content .ppo-code-lab-heading h3 {
  margin: 0.16rem 0 0;
  color: #f8fbff;
  font-size: clamp(1.04rem, 2.2vw, 1.34rem);
  line-height: 1.4;
}

.ppo-code-eyebrow {
  color: #7ceadc;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.ppo-code-button,
.post-article-content .ppo-code-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 5.5rem;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 0.56rem 0.82rem;
  border: 1px solid rgba(139, 202, 255, 0.42);
  border-radius: 999px;
  background: rgba(18, 40, 70, 0.88);
  box-shadow: none;
  color: #deedff !important;
  font: 700 0.78rem/1.2 inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ppo-code-button:hover,
.post-article-content .ppo-code-button:hover {
  border-color: #79dcff;
  background: rgba(37, 83, 132, 0.92);
  color: #f5fbff !important;
  transform: translateY(-1px);
}

.ppo-code-button:focus-visible,
.ppo-code-lab select:focus-visible,
.ppo-code-lab input:focus-visible {
  outline: 3px solid rgba(86, 227, 208, 0.48);
  outline-offset: 3px;
}

.ppo-code-controls {
  display: grid;
  gap: 0.8rem;
  align-items: end;
  margin: 0 0 1rem;
  padding: 0.88rem;
  border: 1px solid rgba(143, 178, 225, 0.18);
  border-radius: 15px;
  background: rgba(5, 14, 28, 0.45);
}

.ppo-code-controls-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ppo-code-controls-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ppo-code-controls label,
.post-article-content .ppo-code-controls label {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  margin: 0;
  color: #b9cce4;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.ppo-code-controls output {
  justify-self: end;
  color: #7ceadc;
  font-variant-numeric: tabular-nums;
}

.ppo-code-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #56e3d0;
  cursor: pointer;
}

.ppo-code-controls select,
.post-article-content .ppo-code-controls select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 2rem 0 0.72rem;
  border: 1px solid rgba(147, 185, 235, 0.32);
  border-radius: 9px;
  background-color: #12243d;
  box-shadow: none;
  color: #eef6ff;
  font: 600 0.75rem/1.25 inherit;
  cursor: pointer;
}

.ppo-code-lab canvas,
.post-article-content .ppo-code-lab canvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: clamp(300px, 46vw, 500px);
  margin: 0;
  border: 1px solid rgba(137, 177, 229, 0.18);
  border-radius: 15px;
  background: #07111f;
  box-shadow: inset 0 0 34px rgba(2, 9, 20, 0.42);
  touch-action: pan-y;
}

.ppo-code-lab[data-ppo-lab="pipeline"] canvas,
.post-article-content .ppo-code-lab[data-ppo-lab="pipeline"] canvas {
  height: clamp(300px, 40vw, 430px);
}

.ppo-code-lab[data-ppo-lab="policy"] canvas,
.post-article-content .ppo-code-lab[data-ppo-lab="policy"] canvas,
.ppo-code-lab[data-ppo-lab="clip"] canvas,
.post-article-content .ppo-code-lab[data-ppo-lab="clip"] canvas {
  height: clamp(390px, 44vw, 480px);
}

.ppo-code-lab[data-ppo-lab="gae"] canvas,
.post-article-content .ppo-code-lab[data-ppo-lab="gae"] canvas {
  height: clamp(420px, 46vw, 500px);
}

.ppo-code-lab[data-ppo-lab="batch"] canvas,
.post-article-content .ppo-code-lab[data-ppo-lab="batch"] canvas {
  height: clamp(470px, 48vw, 540px);
}

.ppo-code-button:disabled,
.post-article-content .ppo-code-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.ppo-code-lab canvas:focus-visible {
  outline: 3px solid rgba(98, 168, 255, 0.48);
  outline-offset: 3px;
}

.ppo-code-readout,
.post-article-content .ppo-code-readout {
  min-height: 1.5em;
  margin: 0.78rem 0 0;
  color: #b8c9de;
  font-size: 0.82rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

.ppo-code-readout strong,
.post-article-content .ppo-code-readout strong {
  color: #f3c969;
}

.ppo-code-lab.is-paused .ppo-code-button,
.ppo-code-lab.is-static .ppo-code-button {
  border-color: rgba(246, 200, 95, 0.48);
  color: #ffe5a7 !important;
}

.post-article-content table {
  max-width: 100%;
}

@media (max-width: 920px) {
  .ppo-code-controls-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ppo-code-callout,
  .post-article-content .ppo-code-callout {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .ppo-code-lab,
  .post-article-content .ppo-code-lab {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
    padding: 0.9rem;
    border-radius: 17px;
  }

  .ppo-code-lab::after,
  .post-article-content .ppo-code-lab::after {
    display: none;
  }

  .ppo-code-lab-heading {
    align-items: center;
    padding-right: 4rem;
  }

  .ppo-code-controls-three,
  .ppo-code-controls-four {
    grid-template-columns: 1fr;
  }

  .ppo-code-controls {
    gap: 0.7rem;
  }

  .ppo-code-lab canvas,
  .post-article-content .ppo-code-lab canvas {
    border-radius: 11px;
  }
}

@media (max-width: 430px) {
  .ppo-code-lab-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ppo-code-button,
  .post-article-content .ppo-code-button {
    justify-self: start;
  }

  .ppo-code-eyebrow {
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppo-code-button,
  .post-article-content .ppo-code-button {
    transition: none;
  }

  .ppo-code-button:hover,
  .post-article-content .ppo-code-button:hover {
    transform: none;
  }
}

@media print {
  .ppo-code-lab,
  .post-article-content .ppo-code-lab {
    break-inside: avoid;
    border: 1px solid #aab8c7;
    background: #101b2d !important;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .ppo-code-controls,
  .ppo-code-button,
  .post-article-content .ppo-code-button {
    display: none;
  }

  .ppo-code-callout,
  .post-article-content .ppo-code-callout {
    box-shadow: none;
  }
}