/* The reading slot stays in flow while the actual demo fills a shared layer. */
.ascii-run-anchor {
  display: flow-root;
  min-width: 0;
  overflow-anchor: none;
}
.article-body .ascii-run-anchor > .ascii-run { margin: 0; }
.article-body .ascii-run .ascii-run__header { flex-wrap: wrap; }
.ascii-run__view-actions {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.ascii-run__expand {
  flex: none;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: #DFE8FF;
  color: #354DB5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}
.ascii-run__expand:focus-visible {
  outline: 3px solid #ED3C8B;
  outline-offset: 3px;
}
@media (hover: hover) {
  .ascii-run__expand:hover { background: #CCD9FF; color: #2448BD; }
}

/* The site header remains above this layer at z-index 1000. */
.ascii-immersive-layer.article-body {
  position: fixed;
  inset: 0;
  z-index: 900;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: var(--site-nav-clearance, 84px) 16px 16px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.ascii-immersive-layer[hidden] { display: none; }
.ascii-immersive-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #F8FAFF;
  pointer-events: none;
}
.ascii-immersive-surface {
  position: fixed;
  z-index: -1;
  box-sizing: border-box;
  background: #EDF2FF;
  box-shadow: 0 14px 40px -28px rgba(40, 66, 143, .45);
  pointer-events: none;
}
.ascii-immersive-surface[hidden] { display: none; }
.article-body .ascii-run.is-immersive {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  border-radius: 16px;
  background: #EDF2FF;
  box-shadow: 0 14px 40px -28px rgba(40, 66, 143, .45);
}
.article-body .ascii-run.is-immersive-changing { background: transparent; box-shadow: none; }
.article-body .ascii-run.is-immersive .ascii-run__header {
  position: sticky;
  top: 0;
  z-index: 3;
  flex-wrap: nowrap;
  gap: 12px;
  background: #EDF2FF;
}
.article-body .ascii-run.is-immersive .ascii-run__heading {
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.4;
}
.ascii-run.is-immersive .ascii-run__eyebrow { font-size: 11px; line-height: 1.3; }
.article-body .ascii-run.is-immersive .ascii-run__steps { gap: 8px; margin: 0; }
.ascii-run.is-immersive .ascii-run__step {
  flex-direction: row;
  gap: 8px;
  min-height: 46px;
  padding: 6px 8px;
}
.ascii-run.is-immersive .ascii-run__viewport {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.ascii-run.is-immersive .ascii-run__terminalbar { padding: 8px 14px; }
.ascii-run.is-immersive .ascii-run__workspace {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.ascii-run.is-immersive .ascii-run__code-pane,
.ascii-run.is-immersive .ascii-run__result-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ascii-run.is-immersive .ascii-run__pane-label { min-height: 34px; padding: 7px 14px; }
.article-body .ascii-run.is-immersive .ascii-run__code,
.article-body .ascii-run.is-immersive .ascii-run__screen {
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: auto;
}
.article-body .ascii-run.is-immersive .ascii-run__code { font-size: 15px; }
.article-body .ascii-run.is-immersive .ascii-run__screen { padding: 16px; font-size: 16px; }
.ascii-run.is-immersive .ascii-run__explanation { min-height: 0; margin: 0; }
.article-body .ascii-run.is-immersive .ascii-run__explanation > strong { font-size: 16px; line-height: 1.5; }
.article-body .ascii-run.is-immersive .ascii-run__explanation > p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
.ascii-run.is-immersive .ascii-run__footer {
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

@media (max-width: 760px) {
  .ascii-run__view-actions .ascii-run__mode { display: none; }
  .ascii-immersive-layer.article-body { padding-inline: 8px; padding-bottom: 8px; }
  .article-body .ascii-run.is-immersive { gap: 10px; padding: 14px; border-radius: 12px; }
  .article-body .ascii-run.is-immersive .ascii-run__heading { font-size: 18px; }
  .ascii-run.is-immersive .ascii-run__eyebrow { display: none; }
  .ascii-run.is-immersive .ascii-run__step { flex-direction: column; min-height: 50px; gap: 3px; padding: 4px 2px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
  .ascii-run.is-immersive .ascii-run__step > span:first-child { width: 18px; height: 18px; font-size: 10px; }
  .ascii-run.is-immersive .ascii-run__workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ascii-run.is-immersive .ascii-run__pane-label { min-height: 30px; padding: 5px 10px; }
  .article-body .ascii-run.is-immersive .ascii-run__code { font-size: 14px; }
  .article-body .ascii-run.is-immersive .ascii-run__screen { padding: 12px; font-size: 15px; }
  .ascii-run.is-immersive .ascii-run__footer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* A short window may scroll the panel; its close action stays in the header. */
@media (max-height: 600px) {
  .ascii-immersive-layer.article-body { padding-inline: 8px; padding-bottom: 8px; }
  .article-body .ascii-run.is-immersive {
    grid-template-rows: auto auto minmax(140px, 1fr) auto auto;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
  }
  .ascii-run.is-immersive .ascii-run__eyebrow,
  .ascii-run.is-immersive .ascii-run__mode { display: none; }
  .article-body .ascii-run.is-immersive .ascii-run__heading { margin: 0; font-size: 18px; }
  .ascii-run.is-immersive .ascii-run__step { min-height: 36px; padding-block: 4px; }
  .ascii-run.is-immersive .ascii-run__terminalbar { padding-block: 6px; }
  .ascii-run.is-immersive .ascii-run__pane-label { min-height: 28px; padding-block: 4px; }
  .article-body .ascii-run.is-immersive .ascii-run__explanation > strong { font-size: 14px; }
  .article-body .ascii-run.is-immersive .ascii-run__explanation > p { font-size: 12px; line-height: 1.45; }
  .ascii-run__expand { min-height: 34px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ascii-run__expand { transition: none; }
}