@layer components {
  .jj-graph[data-astro-cid-sy6w2aor] {
    --jj-default-light: #2563eb;
    --jj-default-dark: #60a5fa;
    --jj-working-copy-light: #16a34a;
    --jj-working-copy-dark: #4ade80;
    --jj-immutable-light: #6366f1;
    --jj-immutable-dark: #818cf8;
    --jj-dim-light: #d6dae1;
    --jj-dim-dark: #333b47;
    --jj-dim-text-light: #a3abb6;
    --jj-dim-text-dark: #5b6678;
    --jj-edge-light: #cbd2da;
    --jj-edge-dark: #3f4855;
    --jj-arrow-light: #9aa3af;
    --jj-arrow-dark: #6b7280;
    --jj-command-light: #ea580c;
    --jj-command-dark: #fbbf24;
  }

  .jj-graph-canvas[data-astro-cid-sy6w2aor] {
    display: flex;
    justify-content: center;
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-graph-svg {
    max-width: 100%;
    height: auto;
  }

  .jj-graph[data-astro-cid-sy6w2aor] :is(.jj-label, .jj-dot) text {
    font-family: var(--font-ibm-plex-mono), ui-monospace, monospace;
    font-style: normal;
    letter-spacing: normal;
    word-spacing: normal;
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot {
    --jj-dot-light: var(--jj-default-light);
    --jj-dot-dark: var(--jj-default-dark);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot.is-working-copy {
    --jj-dot-light: var(--jj-working-copy-light);
    --jj-dot-dark: var(--jj-working-copy-dark);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot.is-immutable {
    --jj-dot-light: var(--jj-immutable-light);
    --jj-dot-dark: var(--jj-immutable-dark);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot.is-selected :is(ellipse, polygon) {
    fill: light-dark(var(--jj-dot-light), var(--jj-dot-dark));
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot:not(.is-selected) :is(ellipse, polygon) {
    fill: light-dark(var(--jj-dim-light), var(--jj-dim-dark));
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-working-copy-glyph {
    fill: var(--bg);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-dot:not(.is-selected) .jj-working-copy-glyph {
    fill: var(--text);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-label text {
    fill: light-dark(var(--jj-dim-text-light), var(--jj-dim-text-dark));
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-label.is-selected :is(.jj-change-id, .jj-bookmark) {
    fill: var(--text);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-label.is-selected .jj-change-id-rest {
    fill: light-dark(#9aa2ad, #6b7280);
  }

  .jj-graph[data-astro-cid-sy6w2aor] .jj-edge path {
    stroke: light-dark(var(--jj-edge-light), var(--jj-edge-dark));
  }

  .jj-graph-pair[data-astro-cid-sy6w2aor] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    column-gap: var(--spacing-3);
    row-gap: var(--spacing-6);
    container-type: inline-size;
  }

  .jj-graph-pair[data-astro-cid-sy6w2aor] .jj-graph-canvas[data-astro-cid-sy6w2aor] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .jj-op[data-astro-cid-sy6w2aor] {
    --jj-arrow-length: 64px;
    --jj-arrow-thickness: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    align-self: center;
    order: 0;
    flex-basis: 100%;
  }

  .jj-op-command[data-astro-cid-sy6w2aor] {
    color: light-dark(var(--jj-command-light), var(--jj-command-dark));
    font-size: .875rem;
    text-align: center;
    max-width: 100%;
  }

  .jj-op-arrow[data-astro-cid-sy6w2aor] {
    width: var(--jj-arrow-length);
    height: var(--jj-arrow-thickness);
    transform: rotate(90deg);
    margin-block: calc((var(--jj-arrow-length) - var(--jj-arrow-thickness)) / 2);
  }

  .jj-op-shaft[data-astro-cid-sy6w2aor] {
    stroke: light-dark(var(--jj-arrow-light), var(--jj-arrow-dark));
    stroke-width: 1.6px;
  }

  .jj-op-head[data-astro-cid-sy6w2aor] {
    fill: light-dark(var(--jj-arrow-light), var(--jj-arrow-dark));
  }

  @container (width >= 480px) {
    .jj-graph-pair[data-astro-cid-sy6w2aor] .jj-graph-canvas[data-astro-cid-sy6w2aor] {
      flex-basis: auto;
    }

    .jj-op[data-astro-cid-sy6w2aor] {
      order: -1;
    }

    .jj-op-arrow[data-astro-cid-sy6w2aor] {
      transform: none;
      margin-block: 0;
    }
  }

  @container (width >= 656px) {
    .jj-op[data-astro-cid-sy6w2aor] {
      order: 0;
      flex-basis: auto;
    }

    .jj-op-command[data-astro-cid-sy6w2aor] {
      max-width: 160px;
    }
  }

  figcaption[data-astro-cid-sy6w2aor] {
    max-width: 42ch;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
}