.peachq-inline.is-ready { margin: 1em 0; border: 2px solid #7c4dff; border-radius: .25rem; overflow: hidden; }
.peachq-inline textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; border: 0; padding: .65rem; font: inherit; font-family: var(--md-code-font-family); font-size: .8em; line-height: 1.5; color: var(--md-code-fg-color); background: var(--md-code-bg-color); tab-size: 2; }
.peachq-inline textarea:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: -2px; }
.peachq-inline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .25rem .6rem; font-size: .7rem; }
.peachq-inline-controls button { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .4rem; cursor: pointer; color: var(--md-primary-fg-color); }
.peachq-inline-controls button:disabled { opacity: .5; cursor: wait; }
.peachq-inline-controls button:focus-visible { outline: 2px solid var(--md-accent-fg-color); }
.peachq-inline-status { margin-left: auto; color: var(--md-default-fg-color--light); }
.peachq-inline pre.peachq-inline-output { margin: 0; padding: .55rem .65rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; font-size: .8em; border-top: 1px solid var(--md-default-fg-color--lightest); }
.peachq-inline-output[hidden] { display: none; }
.peachq-inline[data-state="error"] .peachq-inline-output { color: var(--md-default-fg-color); border-left: 3px solid var(--md-default-fg-color); }

@media (pointer: coarse) {
  .peachq-inline textarea { font-size: max(16px, .8em); }
}

.peachq-inline-play { width: .8rem; height: .8rem; fill: currentColor; }