.nf-figure {
  --nf-paper: var(--surface);
  --nf-soft: var(--surface-alt);
  --nf-ink: var(--text);
  --nf-dim: var(--text-dim);
  --nf-line: var(--border);
  --nf-accent: var(--brand);
  --nf-tint: var(--brand-soft);
  --nf-copper: var(--warning);
  container-type: inline-size;
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100%;
  margin: 0;
  padding: min(1rem,16px);
  background: var(--nf-paper);
  color: var(--nf-ink);
  border: 1px solid var(--nf-line);
  border-block-start: .25rem solid var(--nf-accent);
  border-radius: var(--r-panel);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.nf-figure *, .nf-figure *::before, .nf-figure *::after { box-sizing: border-box; min-inline-size: 0; }
.nf-figure.nf-figure p, .nf-figure.nf-figure dl, .nf-figure.nf-figure dd { margin: 0; }
.nf-figure.nf-figure .nf-eyebrow { color: var(--nf-accent); font-size: .9375rem; font-weight: 700; }
.nf-figure.nf-figure .nf-title { margin-block-start: .375rem; font-family: var(--font-display); font-size: clamp(1.25rem, 1.15rem + 1cqi, 1.875rem); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.nf-heading { padding-block-end: 1rem; border-block-end: 1px solid var(--nf-line); }
.nf-body { display: grid; grid-template-columns: minmax(0,1fr); gap: .875rem; padding-block: 1rem; }
.nf-figure.nf-figure .nf-context { font-size: 1rem; color: var(--nf-dim); }
.nf-figure.nf-figure .nf-context strong { color: var(--nf-ink); }
.nf-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; padding-block: .5rem; border-block-end: 1px solid var(--nf-line); }
.nf-row dt { flex: 1 1 9rem; color: var(--nf-dim); }
.nf-row dd { flex: 0 1 auto; color: var(--nf-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.nf-row--subtotal { border-block-end: 2px solid var(--nf-accent); }
.nf-row--subtotal dd { color: var(--nf-accent); }
.nf-result { display: grid; grid-template-columns: minmax(0,1fr); gap: .25rem; padding: min(.75rem,12px); border-inline-start: .25rem solid var(--nf-accent); background: var(--nf-tint); }
.nf-result > span { font-size: 1rem; color: var(--nf-dim); }
.nf-result > strong { font-family: var(--font-display); font-size: clamp(1.625rem,1.45rem + 1cqi,2.25rem); font-weight: 700; line-height: 1.2; color: var(--nf-accent); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.nf-pair, .nf-batches { display: grid; grid-template-columns: minmax(0,1fr); gap: .875rem; align-items: start; }
.nf-panel { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; padding: min(.875rem,14px); background: var(--nf-soft); border-radius: var(--r-control); }
.nf-panel--copper { border-block-start: .2rem solid var(--nf-copper); }
.nf-figure.nf-figure .nf-panel-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.nf-figure.nf-figure .nf-stage { color: var(--nf-dim); font-weight: 600; }
.nf-equation { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nf-figure.nf-figure .nf-note { margin-block: 0; padding-block: .875rem; border-block-start: 1px solid var(--nf-line); color: var(--nf-dim); font-size: .9375rem; line-height: 1.5; }
.nf-figure.nf-figure figcaption { margin-block-start: .5rem; color: var(--nf-dim); font-size: .9375rem; line-height: 1.5; }
.nf-figure.nf-figure .nf-rate { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--nf-accent); line-height: 1.15; }
.nf-rate > span { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--nf-dim); }
.nf-bars { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.nf-bar-row { display: grid; grid-template-columns: minmax(0,1fr); gap: .375rem; }
.nf-bar-label { display: flex; flex-wrap: wrap; gap: .25rem .75rem; justify-content: space-between; }
.nf-bar-label span { color: var(--nf-dim); }
.nf-bar-value { font-family: var(--font-display); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.nf-meter { appearance: none; display: block; inline-size: 100%; block-size: 1rem; padding: 0; border: 0; background: var(--nf-soft); color: var(--nf-accent); border-radius: var(--r-control); }
.nf-meter::-webkit-meter-bar { background: var(--nf-soft); border: 1px solid var(--nf-line); border-radius: var(--r-control); }
.nf-meter::-webkit-meter-optimum-value { background: var(--nf-accent); border-radius: var(--r-control); }
.nf-meter::-moz-meter-bar { background: var(--nf-accent); border-radius: var(--r-control); }
.nf-meter--copper { color: var(--nf-copper); }
.nf-meter--copper::-webkit-meter-optimum-value { background: var(--nf-copper); }
.nf-meter--copper::-moz-meter-bar { background: var(--nf-copper); }
.nf-meter--soft { color: var(--nf-dim); }
.nf-meter--soft::-webkit-meter-optimum-value { background: var(--nf-dim); }
.nf-meter--soft::-moz-meter-bar { background: var(--nf-dim); }
.nf-axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--nf-dim); font-size: .9375rem; font-variant-numeric: tabular-nums; border-block-start: 1px solid var(--nf-line); padding-block-start: .375rem; }
.nf-figure.nf-figure .nf-timeline { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; list-style: none; padding: 0; margin: 0; counter-reset: nf-clock; }
.nf-timeline > li { position: relative; padding-inline-start: 2.5rem; }
.nf-timeline > li::before { counter-increment: nf-clock; content: counter(nf-clock); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; background: var(--nf-tint); color: var(--nf-accent); border: 1px solid var(--nf-line); border-radius: var(--r-circle); font-weight: 700; }
.nf-timeline > li > strong { font-family: var(--font-display); font-size: 1.125rem; }
.nf-figure.nf-figure .nf-timeline p { margin-block-start: .375rem; color: var(--nf-dim); }
.nf-counts { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.nf-count-row { display: grid; grid-template-columns: minmax(0,1fr); gap: .375rem; padding-block-end: .75rem; border-block-end: 1px solid var(--nf-line); }
.nf-figure.nf-figure .nf-count-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.nf-count-row dl { display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; }
.nf-count-row dl > div { display: grid; grid-template-columns: minmax(0,1fr); gap: .25rem; }
.nf-count-row dt { color: var(--nf-dim); }
.nf-count-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nf-count-row .nf-meter { flex: 1 1 8rem; }
.nf-count-row dd > strong { flex: 0 1 auto; font-variant-numeric: tabular-nums; }
@container (min-width: 38rem) {
  .nf-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nf-count-row dl > div { grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items: center; }
}