.rest-api-demo {
  --rest-blue: #4e8cff;
  --rest-cyan: #37d8d0;
  --rest-green: #45d59b;
  --rest-amber: #ffb75d;
  --rest-red: #ff7085;
  --rest-purple: #aa8cff;
  --rest-ink: #eef5ff;
  --rest-muted: #91a7c8;
  --rest-line: #2b4164;
  --rest-panel: #12233f;
  --rest-deep: #09172c;
  display: grid;
  width: min(100%, 460px);
  gap: 8px;
  color: var(--rest-ink);
  font: 600 11px/1.35 "DM Sans", sans-serif;
}

.rest-api-toolbar {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rest-api-toolbar > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #61718a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rest-api-toolbar > span i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--rest-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rest-cyan) 14%, transparent);
  transform: rotate(45deg);
}

.rest-api-toolbar button {
  border: 1px solid #c8d5e8;
  border-radius: 7px;
  background: #fff;
  color: #075de8;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  padding: 5px 8px;
  cursor: pointer;
}

.rest-api-toolbar button:hover {
  border-color: #075de8;
}

.rest-api-toolbar button:focus-visible {
  outline: 2px solid #075de8;
  outline-offset: 2px;
}

.rest-api-console {
  overflow: hidden;
  border: 1px solid var(--rest-line);
  border-radius: 11px;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--rest-blue) 20%, transparent), transparent 35%),
    linear-gradient(145deg, var(--rest-panel), var(--rest-deep));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 10px 26px rgba(13, 32, 62, .12);
}

.rest-api-request-line {
  display: grid;
  min-height: 37px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--rest-line);
  background: rgba(5, 15, 31, .42);
  padding: 6px 9px;
}

.rest-api-method {
  min-width: 34px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--rest-blue);
  font: 900 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-align: center;
  padding: 5px 4px;
}

.rest-api-method-get { color: var(--rest-green); }
.rest-api-method-post { color: var(--rest-blue); }
.rest-api-method-put { color: var(--rest-amber); }
.rest-api-method-patch { color: var(--rest-purple); }
.rest-api-method-delete { color: var(--rest-red); }

.rest-api-request-line code {
  min-width: 0;
  overflow: hidden;
  color: var(--rest-ink);
  font: 600 8px/1.4 "IBM Plex Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rest-api-request-line > b {
  color: var(--rest-muted);
  font-size: 8px;
  letter-spacing: 2px;
}

.rest-api-exchange {
  display: grid;
  min-height: 100px;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 11px 9px;
}

.rest-api-pane {
  display: grid;
  min-width: 0;
  min-height: 67px;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--rest-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 8px;
  transition: border-color 220ms, background 220ms, transform 220ms;
}

.rest-api-pane small {
  color: var(--rest-muted);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.rest-api-pane strong,
.rest-api-pane span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rest-api-pane strong {
  color: var(--rest-ink);
  font: 650 8px/1.3 "IBM Plex Mono", monospace;
}

.rest-api-pane span {
  color: var(--rest-muted);
  font-size: 7px;
  font-weight: 600;
}

.rest-api-flow {
  position: relative;
  display: grid;
  height: 35px;
  place-items: center;
}

.rest-api-flow i {
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rest-line);
}

.rest-api-flow i::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--rest-blue), var(--rest-cyan));
  transition: width 420ms ease;
}

.rest-api-flow b {
  position: absolute;
  right: -1px;
  color: var(--rest-cyan);
  font-size: 15px;
}

.rest-api-demo > small {
  min-height: 15px;
  overflow: hidden;
  color: #61718a;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rest-api-demo.is-active .rest-api-flow i::before { width: 100%; }

.rest-api-demo.is-active .rest-api-pane-request {
  border-color: color-mix(in srgb, var(--rest-blue) 65%, var(--rest-line));
  transform: translateX(1px);
}

.rest-api-demo.is-active .rest-api-pane-response {
  border-color: color-mix(in srgb, var(--rest-green) 75%, var(--rest-line));
  background: color-mix(in srgb, var(--rest-green) 9%, transparent);
  transform: translateX(-1px);
}

.rest-api-demo-query .rest-api-flow i::before { background: linear-gradient(90deg, var(--rest-purple), var(--rest-cyan)); }
.rest-api-demo-contract .rest-api-flow i::before { background: linear-gradient(90deg, var(--rest-amber), var(--rest-green)); }
.rest-api-demo-reliability .rest-api-flow i::before { background: linear-gradient(90deg, var(--rest-red), var(--rest-amber)); }
.rest-api-demo-lifecycle .rest-api-flow i::before { background: linear-gradient(90deg, var(--rest-purple), var(--rest-blue)); }

.concept-card[data-card-id^="rest-api-"] .concept-card-header h4 {
  overflow-wrap: anywhere;
}

.concept-card-preview .rest-api-demo {
  font-size: 7px;
}

.concept-card-preview .rest-api-toolbar > span {
  max-width: 86px;
  font-size: 6.3px;
}

.concept-card-preview .rest-api-toolbar button {
  max-width: 84px;
  min-height: 24px;
  overflow: hidden;
  font-size: 7px;
  line-height: 1.15;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concept-card-preview .rest-api-request-line {
  min-height: 31px;
  gap: 5px;
  padding: 5px 6px;
}

.concept-card-preview .rest-api-method {
  min-width: 29px;
  font-size: 5.7px;
  padding: 4px 3px;
}

.concept-card-preview .rest-api-request-line code { font-size: 6.5px; }

.concept-card-preview .rest-api-exchange {
  min-height: 83px;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 3px;
  padding: 7px 6px;
}

.concept-card-preview .rest-api-pane {
  min-height: 58px;
  gap: 3px;
  padding: 5px;
}

.concept-card-preview .rest-api-pane strong { font-size: 6.3px; }
.concept-card-preview .rest-api-pane span { font-size: 5.6px; }

[data-theme="dark"] .rest-api-toolbar > span,
[data-theme="dark"] .rest-api-demo > small {
  color: #93a7c5;
}

[data-theme="dark"] .rest-api-toolbar button {
  border-color: #43526c;
  background: #172238;
  color: #83b0ff;
}

@media (max-width: 560px) {
  .rest-api-demo { width: 100%; }
  .rest-api-exchange { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rest-api-flow i::before,
  .rest-api-pane { transition: none; }
}

@media (forced-colors: active) {
  .rest-api-console,
  .rest-api-pane,
  .rest-api-toolbar button { border: 1px solid CanvasText; }
  .rest-api-flow i { background: CanvasText; }
}