/* Styling for the body/source preview cards (the screenshot target for non-HTML entries). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.card { display: flex; align-items: center; justify-content: center; padding: 32px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #1f2225; }
.frame { width: min(900px, 100%); max-height: 100%; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: #2a2d31; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #3a4046; }
.bar .dot:nth-child(1) { background: #ff5f56; } .bar .dot:nth-child(2) { background: #ffbd2e; }
.bar .dot:nth-child(3) { background: #27c93f; }
.fn { margin-left: 8px; color: #979ca2; font-size: 13px; }
pre { margin: 0; padding: 18px 20px; overflow: auto; font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; background: #202327; }
.resp { color: #cdd2d8; }
.code { color: #c8ccd1; }
/* let highlight.js color the tokens, but keep the card's charcoal background */
pre.code code { font: inherit; }
pre.code .hljs, pre.code code.hljs { background: transparent; padding: 0; color: #c8ccd1; }