.is-code-compare {
  --code-bg: #0d1219;
  --code-ink: #bbc3cd;
  --code-muted: #82909f;
  --code-rule: #25313d;
  --code-tag: #9aaed9;
  --code-property: #91c2cb;
  --code-string: #b9c49c;
  --code-number: #c6af91;
  --code-answer: #d4ad67;
  min-width: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: calc(var(--header-h, 64px) + 24px);
}
html[data-theme="light"] .is-code-compare {
  --code-bg: #f0f0eb;
  --code-ink: #39434c;
  --code-muted: #65717a;
  --code-rule: #d6dbd9;
  --code-tag: #586b9b;
  --code-property: #276b78;
  --code-string: #5d713d;
  --code-number: #8b6242;
  --code-answer: #966113;
}
.is-code-compare [hidden] { display: none !important; }
.code-compare-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1rem; }
.code-compare-top a { font: 500 .8rem/1.7 var(--font-mono, monospace); color: var(--ink-dim); text-decoration: none; text-underline-offset: 4px; }
.code-compare-top a:hover { text-decoration: underline; }
.is-code-compare .code-compare-top p { margin: 0; font: .8rem/1.7 var(--font-sans, sans-serif); color: var(--ink-dim); }
.code-compare-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-rule); border-radius: 6px; }
.code-compare-panes figure { min-width: 0; margin: 0; }
.code-compare-panes figure + figure { border-left: 1px solid var(--code-rule); }
.code-compare-panes figcaption { padding: .9rem 1.2rem; border-bottom: 1px solid var(--code-rule); color: var(--ink-dim); font: 500 .82rem/1.5 var(--font-sans, sans-serif); }
.code-compare-panes pre { height: 480px; max-width: 100%; margin: 0; padding: 1.2rem; overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--code-muted) 35%, transparent) transparent; background: none; border: 0; border-radius: 0; color: var(--code-ink); tab-size: 2; font: 400 12px/1.8 var(--font-mono, Consolas, monospace); text-align: left; white-space: pre; }
/* The compact source wraps as one dense block, the way it looks in the file. */
.code-compare-panes figure:last-child pre { white-space: pre-wrap; word-break: break-all; }
.code-compare-panes figure:last-child pre code { word-break: inherit; }
.code-compare-panes pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: inherit; word-break: normal; }
.code-compare-panes .token-tag, .code-compare-panes .token-keyword { color: var(--code-tag); }
.code-compare-panes .token-property { color: var(--code-property); }
.code-compare-panes .token-string { color: var(--code-string); }
.code-compare-panes .token-number { color: var(--code-number); }
.is-interactive .code-token { cursor: pointer; border-radius: 2px; }
.is-interactive .code-token:hover { background: color-mix(in srgb, var(--code-ink) 12%, transparent); }
.code-compare-panes .code-token.is-answer { color: var(--code-answer); background: color-mix(in srgb, var(--code-answer) 18%, transparent); outline: 1px solid color-mix(in srgb, var(--code-answer) 55%, transparent); outline-offset: 1px; }
.code-compare-answer { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin: 1rem 0 0; }
.code-compare-answer label { font: .8rem/1.5 var(--font-sans, sans-serif); color: var(--ink-dim); }
.code-compare-answer > div { display: flex; align-items: stretch; flex: 1; gap: .5rem; }
.code-compare-answer input { flex: 1; min-width: 80px; width: 140px; padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; color: var(--ink); font: .8rem/1.5 var(--font-mono, monospace); }
.code-compare-answer button { flex: 0 0 auto; min-height: 40px; padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; color: var(--ink); font: .8rem/1.5 var(--font-sans, sans-serif); cursor: pointer; }
.code-compare-answer button[data-code-reveal] { border-color: transparent; color: var(--ink-dim); }
.code-compare-answer button:hover { background: var(--panel); border-color: var(--code-muted); }
.is-code-compare :is(pre, input, button, summary, a):focus-visible { outline: 2px solid var(--code-property); outline-offset: 3px; }
.is-code-compare .code-compare-feedback { margin: .85rem 0 0; color: var(--ink-dim); font-size: .82rem; line-height: 1.8; }
.is-code-compare .code-compare-feedback:empty { margin: 0; }
.code-compare-feedback[data-correct="true"] { color: var(--code-answer); }
.is-code-compare .code-compare-static { margin: 1rem 0 0; padding: 0; border: 0; background: none; font: .85rem/1.8 var(--font-sans, sans-serif); }
.code-compare-static summary { cursor: pointer; }
.code-compare-static p { margin: .5rem 0; }
@media (max-width: 620px) {
  .code-compare-panes { grid-template-columns: 1fr; }
  .code-compare-panes figure + figure { border-left: 0; border-top: 1px solid var(--code-rule); }
  .code-compare-panes pre { height: 260px; padding: 1rem; font-size: 12px; }
  .code-compare-panes figcaption { padding: .75rem 1rem; }
  .code-compare-answer { display: block; }
  .code-compare-answer > div { margin-top: .5rem; gap: .3rem; }
  .code-compare-answer button { padding: .5rem .6rem; min-height: 44px; }
}
@media print {
  .code-compare-panes { display: block; }
  .code-compare-panes pre { height: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
  .code-compare-answer { display: none !important; }
}