/* No rule under the bar: the picture starts right there. */
.vscode-shot .lesson-prompt-bar,
:root .vscode-shot .lesson-prompt-bar {
  border-bottom: 0;
}

/* The bar's tint behind the capture too, so the window sits on one ground
   from the bar down, with no white margin around it. */
.vscode-shot-body {
  background: var(--box-chrome);
  cursor: zoom-in;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vscode-shot-body {
    background: #161f2a;
  }
}

:root[data-theme="dark"] .vscode-shot-body {
  background: #161f2a;
}

/* The whole capture at its own height: the shot image rule crops to 16:10
   outside a shot frame. */
.vscode-shot-body .cshot-img {
  aspect-ratio: auto;
  height: auto;
  /* The capture's own top edge is a hairline of window outline; on the dark
     bar it read as a sliver of shadow. Tuck it under the bar. */
  margin-top: -2px;
}

.vscode-shot-body {
  overflow: hidden;
}

/* Typed text over the capture, placed and sized in units of the picture's
   width (cqw), so it stays in its spot at any size. Positions are measured
   on the 1200x800 captures. */
.vscode-shot-body {
  position: relative;
  container-type: inline-size;
}

.vscode-shot-typed {
  position: absolute;
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: none;
}

/* The cursor after the text, as VS Code draws it. */
.vscode-shot-typed i {
  display: inline-block;
  width: 0.08em;
  height: 1.1em;
  margin-left: 0.05em;
  vertical-align: -0.15em;
  background: currentColor;
}

/* At the prompt in the terminal: after "~ %", wrapping at the terminal's
   right edge. */
.vscode-shot-typed.is-terminal {
  left: 11.85%;
  top: 79.6%;
  width: 61.5%;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 1.48cqw;
  line-height: 1.71cqw;
  color: #383a42;
  background: #fafafd;
}

.vscode-shot-typed.is-terminal i {
  width: 0.6em;
}

/* In New App's name box, over its placeholder. */
.vscode-shot-typed.is-newapp {
  left: 20.05%;
  top: 2.7%;
  width: 60%;
  height: 3.4%;
  display: flex;
  align-items: center;
  padding-left: 0.6cqw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.5cqw;
  color: #1f1f1f;
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vscode-shot-typed.is-terminal,
  :root:not([data-theme="light"]) .vscode-shot-typed.is-newapp {
    color: #cccccc;
    background: #191a1b;
  }
}

:root[data-theme="dark"] .vscode-shot-typed.is-terminal,
:root[data-theme="dark"] .vscode-shot-typed.is-newapp {
  color: #cccccc;
  background: #191a1b;
}