.aspl-playground {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  color: #171d24;
  background: #fffdf7;
  font-family: Alexandria, "Noto Sans Arabic", Tahoma, sans-serif;
}

.aspl-playground__work,
.aspl-playground__result {
  min-inline-size: 0;
}

.aspl-playground__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
  border-block: 1px solid #aeb9b6;
  background: #aeb9b6;
}

.aspl-playground__run,
.aspl-playground__stop,
.aspl-playground__reset {
  min-block-size: 46px;
  border: 0;
  border-radius: 0;
  padding: 8px 18px;
  font: 650 0.79rem/1.2 Alexandria, "Noto Sans Arabic", Tahoma, sans-serif;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.aspl-playground__run {
  --aspl-focus: #fff;
  color: #fff;
  background: #087f6a;
}

.aspl-playground__reset,
.aspl-playground__stop {
  color: #171d24;
  background: #fffdf7;
}

.aspl-playground__run:hover:not(:disabled) {
  background: #055c4d;
}

.aspl-playground__reset:hover,
.aspl-playground__stop:hover:not(:disabled) {
  color: #0c2d57;
  background: #dfe8f3;
}

.aspl-playground__run:focus-visible,
.aspl-playground__stop:focus-visible,
.aspl-playground__reset:focus-visible {
  outline: 3px solid var(--aspl-focus, #173d74);
  outline-offset: -5px;
}

.aspl-playground__run:disabled,
.aspl-playground__stop:disabled {
  color: #171d24;
  background: #aeb9b6;
  cursor: not-allowed;
}

.aspl-playground__status-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-block-size: 46px;
  padding: 0.5rem 1rem;
  background: #fffdf7;
}

.aspl-playground__status {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  color: #171d24;
  font-size: 0.79rem;
  font-weight: 650;
}

.aspl-playground__status-lamp {
  inline-size: 0.72rem;
  block-size: 0.72rem;
  flex: 0 0 auto;
  background: #66736f;
}

.aspl-playground__status[data-phase="check-queued"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="checking"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="checking-run"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="loading"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="running"]
  .aspl-playground__status-lamp {
  background: #f1ad3d;
}

.aspl-playground__status[data-phase="complete"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="ready"]
  .aspl-playground__status-lamp {
  background: #087f6a;
}

.aspl-playground__status[data-phase="blocked"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="failed"]
  .aspl-playground__status-lamp,
.aspl-playground__status[data-phase="host-failure"]
  .aspl-playground__status-lamp {
  background: #a83d35;
}

.aspl-playground__revision,
.aspl-playground__snapshot,
.aspl-playground__outcome {
  font-family: "Noto Sans Mono", "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.aspl-playground__revision {
  color: #52605e;
  font-size: 0.79rem;
}

.aspl-playground__trap-details {
  border-block-start: 1px solid #aeb9b6;
  margin-block-start: 1rem;
  overflow-wrap: anywhere;
}

.aspl-playground__trap-details h3 {
  margin-block: 1.25rem 0.5rem;
  font-size: 1rem;
}

.aspl-playground__trap-details pre {
  white-space: pre-wrap;
  font: 0.85rem/1.6 "Noto Sans Mono", "Cascadia Code", Consolas, monospace;
  unicode-bidi: isolate;
}

.aspl-playground__trap-details ol {
  padding-inline-start: 1.5rem;
}

.aspl-playground__trap-details button {
  min-block-size: 44px;
  border: 0;
  padding: 0.35rem;
  color: #173d74;
  background: transparent;
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.aspl-playground__trap-details button:hover:not(:disabled) {
  color: #0c2d57;
  background: #dfe8f3;
}

.aspl-playground__trap-details button:focus-visible {
  outline: 3px solid #173d74;
  outline-offset: 2px;
}

.aspl-playground__trap-details button:disabled {
  color: #52605e;
  text-decoration: none;
}

.aspl-playground__progress {
  grid-column: 1 / -1;
  block-size: 3px;
  overflow: hidden;
  background: #aeb9b6;
}

.aspl-playground__progress span {
  display: block;
  inline-size: 12%;
  block-size: 100%;
  background: #f1ad3d;
  transition: inline-size 440ms cubic-bezier(.16, 1, .3, 1),
    background-color 180ms ease-out;
}

.aspl-playground[data-phase="check-queued"]
  .aspl-playground__progress span {
  inline-size: 28%;
}

.aspl-playground[data-phase="checking"]
  .aspl-playground__progress span,
.aspl-playground[data-phase="checking-run"]
  .aspl-playground__progress span {
  inline-size: 56%;
}

.aspl-playground[data-phase="running"] .aspl-playground__progress span {
  inline-size: 78%;
}

.aspl-playground[data-phase="blocked"] .aspl-playground__progress span,
.aspl-playground[data-phase="failed"] .aspl-playground__progress span,
.aspl-playground[data-phase="host-failure"] .aspl-playground__progress span {
  inline-size: 100%;
  background: #a83d35;
}

.aspl-playground[data-phase="complete"] .aspl-playground__progress span,
.aspl-playground[data-phase="ready"] .aspl-playground__progress span {
  inline-size: 100%;
  background: #087f6a;
}

.aspl-playground__capability {
  grid-column: 1 / -1;
  padding: 0.4rem 0.55rem;
  color: #52605e;
  background: #d9eee8;
  font-size: 0.79rem;
  unicode-bidi: isolate;
}

.aspl-playground__result {
  padding: 1rem;
  background: #d9eee8;
}

.aspl-playground__output-prompt {
  margin-block: 1rem;
  color: #52605e;
  font-size: 0.85rem;
}

.aspl-playground__snapshot[hidden] {
  display: none;
}

.aspl-playground[data-result-class="host-failure"]
  .aspl-playground__result,
.aspl-playground[data-result-class="policy-rejection"]
  .aspl-playground__result,
.aspl-playground[data-result-class="source-error"]
  .aspl-playground__result {
  color: #a83d35;
  background: #fffdf7;
}

.aspl-playground[data-phase="failed"] .aspl-playground__result {
  color: #a83d35;
  background: #fffdf7;
}

.aspl-playground[data-result-class="host-failure"]
  .aspl-playground__result h2,
.aspl-playground[data-result-class="host-failure"]
  .aspl-playground__outcome,
.aspl-playground[data-result-class="policy-rejection"]
  .aspl-playground__result h2,
.aspl-playground[data-result-class="policy-rejection"]
  .aspl-playground__outcome,
.aspl-playground[data-result-class="source-error"]
  .aspl-playground__result h2,
.aspl-playground[data-result-class="source-error"]
  .aspl-playground__outcome {
  color: #a83d35;
}

.aspl-playground[data-phase="failed"] .aspl-playground__result h2,
.aspl-playground[data-phase="failed"] .aspl-playground__outcome {
  color: #a83d35;
}

.aspl-playground__result[hidden] {
  display: none;
}

.aspl-playground__interruption {
  color: #a83d35;
  font-size: 0.79rem;
}

.aspl-playground__status-group .aspl-playground__outcome,
.aspl-playground__interruption {
  grid-column: 1 / -1;
  margin: 0;
  overflow-wrap: anywhere;
}

.aspl-playground__interruption:empty {
  display: none;
}

.aspl-playground__result h2 {
  margin: 0 0 0.35rem;
  color: #055c4d;
  font-size: 0.79rem;
}

.aspl-playground__snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  color: #52605e;
  font-size: 0.79rem;
}

.aspl-playground__previous-snapshot {
  padding: 0.2rem 0.45rem;
  color: #65400a;
  background: #f8e3b9;
  font-family: Alexandria, "Noto Sans Arabic", Tahoma, sans-serif;
  font-weight: 700;
}

.aspl-playground__previous-snapshot[hidden] {
  display: none;
}

.aspl-playground__partial-output {
  font-family: Alexandria, "Noto Sans Arabic", Tahoma, sans-serif;
}

.aspl-playground__output {
  min-block-size: 2.75rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  color: #f5f6ef;
  background: #101a24;
  font: 400 clamp(0.78rem, 1vw, 0.94rem)/1.75 "Noto Sans Mono",
    "Cascadia Code", Consolas, monospace;
  tab-size: 4;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.aspl-playground__outcome {
  margin: 0.65rem 0 0;
  color: #055c4d;
  font-size: 0.79rem;
}

.aspl-playground[data-result-class="cancelled"] .aspl-playground__result h2,
.aspl-playground[data-result-class="cancelled"] .aspl-playground__outcome,
.aspl-playground[data-result-class="limit-stop"] .aspl-playground__result h2,
.aspl-playground[data-result-class="limit-stop"] .aspl-playground__outcome {
  color: #a83d35;
}

.aspl-playground__log {
  grid-column: 1 / -1;
  padding-inline: 1rem;
  border-block-start: 1px solid #aeb9b6;
  background: #fffdf7;
}

.aspl-playground__log summary {
  min-block-size: 44px;
  padding-block: 0.75rem;
  color: #0c2d57;
  font-size: 0.79rem;
  font-weight: 650;
  cursor: pointer;
}

.aspl-playground__log ol {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  margin-block-end: 1rem;
  background: #aeb9b6;
  list-style: none;
}

.aspl-playground__log li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  color: #171d24;
  background: #fff;
  font-size: 0.79rem;
}

.aspl-playground__event-identity {
  color: #52605e;
  font-family: "Noto Sans Mono", "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

@media (max-width: 36rem) {
  .aspl-playground__status-group {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 50rem) {
  .aspl-playground {
    grid-template-columns: minmax(0, 1fr);
  }

  .aspl-playground .aspl-source-editor {
    min-block-size: 170px;
    block-size: 170px;
  }
}

@media (forced-colors: active) {
  .aspl-playground__status-lamp {
    border: 1px solid currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aspl-playground__progress span {
    transition: none;
  }
}