@layer components {
  .ai-facts[data-astro-cid-i3gi2dr6] {
    --rule-hair: 1px;
    --rule-medium: 4px;
    --rule-thick: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, var(--font-inter), sans-serif;
    font-size: .8125rem;
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    color: var(--text);
    transition: background var(--durations-color-scheme),
        color var(--durations-color-scheme);
    border-width: 2px;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
    margin-block: var(--spacing-8);
    width: 100%;
    max-width: 26rem;
  }

  .title[data-astro-cid-i3gi2dr6] {
    font-size: clamp(2rem, 11vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: var(--line-height-tighter);
    padding-block-end: var(--spacing-1);
    border-block-end-width: var(--rule-hair);
  }

  .servings[data-astro-cid-i3gi2dr6] {
    padding-block-start: var(--spacing-1);
  }

  .serving-size[data-astro-cid-i3gi2dr6], .headline-row[data-astro-cid-i3gi2dr6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-4);
  }

  .serving-size[data-astro-cid-i3gi2dr6] {
    font-weight: 700;
    padding-block-end: var(--spacing-1);
  }

  .headline[data-astro-cid-i3gi2dr6] {
    border-block-start-width: var(--rule-thick);
    padding-block-start: var(--spacing-1);
  }

  .amount-per[data-astro-cid-i3gi2dr6] {
    font-size: .6875rem;
    font-weight: 700;
  }

  .headline-row[data-astro-cid-i3gi2dr6] {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .headline-value[data-astro-cid-i3gi2dr6] {
    font-size: clamp(1.75rem, 9vw, 2.25rem);
    line-height: var(--line-height-tighter);
  }

  .value-heading[data-astro-cid-i3gi2dr6] {
    text-align: end;
    font-weight: 700;
    margin-block-start: var(--spacing-1);
    border-block-start-width: var(--rule-medium);
    padding-block: var(--spacing-1);
  }

  .rows[data-astro-cid-i3gi2dr6] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--spacing-4);
  }

  .row[data-astro-cid-i3gi2dr6] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
    margin: 0;
    padding-block: var(--spacing-1);
    border-block-start-width: var(--rule-hair);
  }

  .row[data-astro-cid-i3gi2dr6].divider {
    border-block-start-width: var(--rule-thick);
  }

  .name[data-astro-cid-i3gi2dr6] {
    font-weight: 700;
  }

  .indent[data-astro-cid-i3gi2dr6] {
    padding-inline-start: var(--spacing-4);
    font-weight: 400;
  }

  .detail[data-astro-cid-i3gi2dr6] {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    text-wrap: pretty;
  }

  .value[data-astro-cid-i3gi2dr6] {
    text-align: end;
    font-weight: 700;
    white-space: nowrap;
  }

  .footnote[data-astro-cid-i3gi2dr6] {
    margin: 0;
    font-size: .6875rem;
    text-wrap: pretty;
    border-block-start-width: var(--rule-medium);
    padding-block-start: var(--spacing-2);
  }
}
@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;
  }
}