.fraction-illustration {
  --fi-ink: #243851;
  --fi-muted: #526173;
  --fi-edge: #7c8ca1;
  --fi-cut: #899ab0;
  --fi-paper: #fbf7eb;
  --fi-blue: #aec4e4;
  --fi-blue-light: #e4eefb;
  --fi-green: #8fcbbd;
  --fi-green-light: #d9eee7;
  --fi-ochre: #e0b869;
  --fi-rose: #dfaaa2;
  --fi-rose-light: #f7e6df;
  display: grid;
  width: min(100%, 28rem);
  min-width: 0;
  gap: .5rem;
  margin-inline: auto;
  color: var(--fi-ink);
  line-height: 1.24;
}

.fraction-illustration.fi-named {
  --fi-green: var(--fi-rose);
  --fi-green-light: var(--fi-rose-light);
}

.fi-caption,
.fi-formula {
  margin: 0;
  color: var(--fi-muted);
  text-align: center;
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fi-formula {
  color: var(--fi-ink);
  font-size: .91rem;
}

.fraction-illustration .fi-stack {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: .43rem;
}

.fraction-illustration .fi-packed {
  grid-template-columns: repeat(var(--whole-columns), minmax(0, 1fr));
  align-items: end;
  column-gap: .35rem;
}

.fi-whole {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

.fi-whole-label {
  color: var(--fi-muted);
  font-size: .72rem;
  line-height: 1.35;
}

.fi-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--parts), minmax(0, 1fr));
  align-items: stretch;
  width: min(100%, var(--whole-width, 100%));
  min-width: 0;
  height: var(--fi-ribbon-height, 1.85rem);
  border: 1px solid var(--fi-edge);
  border-radius: .25rem;
  box-shadow: 0 2px 0 #ded8c9, 0 4px 6px #24385110;
  overflow: hidden;
}

.fi-first,
.fi-picked {
  --fi-material: linear-gradient(180deg, var(--fi-blue-light), var(--fi-blue) 66%);
  --fi-solid: var(--fi-blue);
}

.fi-second {
  --fi-material: linear-gradient(180deg, var(--fi-green-light), var(--fi-green) 66%);
  --fi-solid: var(--fi-green);
}

.fi-guide {
  --fi-material: linear-gradient(180deg, #fef3d5, #edd29a 70%);
  --fi-solid: #edd29a;
}

.fi-removed,
.fi-removed-again {
  --fi-material: repeating-linear-gradient(137deg, #71502b82 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fff2db, #e7cb9c);
  --fi-solid: #e7cb9c;
}

.fi-removed-again {
  --fi-material: repeating-linear-gradient(43deg, #85535092 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f9eee5, var(--fi-rose));
  --fi-solid: var(--fi-rose);
}

.fi-piece,
.fi-loose,
.fi-cell,
.fi-swatch {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  background: var(--fi-material, linear-gradient(180deg, #fffdfa, var(--fi-paper)));
}

.fi-piece {
  display: grid;
  place-items: center;
  color: var(--fi-ink);
  font-size: .8rem;
}

.fi-piece + .fi-piece {
  border-inline-start: 1px solid var(--fi-cut);
}

.fi-piece[style] {
  background-color: var(--fi-paper);
  background-size: var(--fill, 100%) 100%;
  background-repeat: no-repeat;
}

.fi-cut-columns,
.fi-cut-rows {
  height: 5.45rem;
}

.fi-cut-rows {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--parts), minmax(0, 1fr));
}

.fi-cut-rows .fi-piece + .fi-piece {
  border-inline-start: 0;
  border-block-start: 1px solid var(--fi-cut);
}

.fi-cut-rows .fi-piece[style] {
  background-size: 100% var(--fill, 100%);
}

.fi-key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .22rem .8rem;
  min-width: 0;
  color: var(--fi-muted);
  font-size: .73rem;
}

.fi-key-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}

.fi-swatch {
  flex: 0 0 .72rem;
  width: .72rem;
  height: .72rem;
  border: 1px solid var(--fi-edge);
  border-radius: 2px;
}

.fraction-illustration .fi-rack {
  display: grid;
  grid-template-columns: repeat(var(--parts), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: .27rem 0;
  justify-content: stretch;
}

.fi-loose {
  display: grid;
  place-items: center;
  min-height: 1.9rem;
  margin-inline: 1px;
  padding: 1px;
  border: 1px solid var(--fi-edge);
  border-radius: .22rem;
  box-shadow: 0 2px 0 #24385120;
  font-size: .78rem;
}

.fi-equivalent-rows {
  display: grid;
  gap: .39rem;
  width: 100%;
}

.fi-equivalent-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
}

.fi-fraction-label {
  display: grid;
  place-items: center;
  min-width: 0;
  font-size: .9rem;
}

.fi-scale-sequence {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(.2rem, 2vw, .65rem);
}

.fi-ratio-card,
.fi-scale-factor {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  min-width: 0;
  text-align: center;
}

.fi-ratio-card {
  min-width: 2.35rem;
  padding-inline: .32rem;
  border: 1px solid var(--fi-edge);
  border-radius: .25rem;
  background: linear-gradient(180deg, #fffdfa, var(--fi-paper));
  box-shadow: 0 2px 0 #ded8c9;
  font-size: .98rem;
}

.fi-ratio-card > span,
.fi-scale-factor > span {
  display: grid;
  place-content: center;
  min-height: 1.65rem;
}

.fi-ratio-card > span:first-child {
  border-bottom: 1px solid var(--fi-edge);
}

.fi-scale-factor > span {
  display: block;
  align-content: center;
  color: var(--fi-muted);
  white-space: nowrap;
  font-size: .78rem;
}

.fraction-illustration .fi-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.4rem), 1fr));
  align-items: center;
  gap: .48rem;
  width: 100%;
}

.fraction-illustration .fi-share-round {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.6rem), 1fr));
  gap: .25rem .38rem;
  justify-items: center;
}

.fi-share-card {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
}

.fi-plate {
  display: block;
  width: min(100%, 4.3rem);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 3px 2px #60482320);
}

.fi-plates .fi-plate {
  width: min(100%, 5.15rem);
}

.fi-plate-edge {
  fill: var(--fi-ochre);
  stroke: #8c673c;
  stroke-width: 1.2;
}

.fi-crust {
  fill: none;
  stroke: #bd873a;
  stroke-width: 1.4;
}

.fi-sector {
  fill: #fff0cf;
  stroke: #8c673c;
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.fi-sector.fi-picked {
  fill: var(--fi-blue);
}

.fi-sector.fi-first,
.fi-sector.fi-second,
.fi-sector.fi-removed,
.fi-sector.fi-removed-again {
  fill: var(--fi-solid);
}

.fi-sector.fi-blank {
  fill: #fffcf4;
}

.fi-sector-mark {
  fill: none;
  stroke: #6c471f;
  stroke-width: 1.45;
  stroke-linecap: round;
}

.fi-crust-line {
  fill: none;
  stroke: #b8833a;
  stroke-width: .85;
  stroke-dasharray: 1.8 2.5;
  opacity: .66;
}

.fi-whole-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .4rem;
  color: var(--fi-muted);
  font-size: .76rem;
}

.fi-whole-total strong {
  color: var(--fi-ink);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.fi-part-brace {
  box-sizing: border-box;
  width: var(--part-width);
  min-height: .58rem;
  padding-top: .2rem;
  border-top: 1px solid var(--fi-edge);
  border-radius: 0 0 .2rem .2rem;
  color: var(--fi-ink);
  text-align: center;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.fi-hundred-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  width: min(100%, var(--fi-grid-size, 9.4rem), var(--fi-space-size, 9.4rem));
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid var(--fi-edge);
  border-radius: 2px;
  box-shadow: 0 2px 0 #ded8c9, 0 4px 8px #24385110;
  overflow: hidden;
}

.fi-cell {
  border-inline-end: 1px solid #a9b3bf;
  border-block-end: 1px solid #a9b3bf;
}

.fi-cell:nth-child(10n) {
  border-inline-end: 0;
}

.fi-cell:nth-child(n+91) {
  border-block-end: 0;
}

.fi-cell[data-fifth-column] {
  border-inline-end-color: var(--fi-ink);
}

.fi-cell[data-fifth-row] {
  border-block-end-color: var(--fi-ink);
}

.fi-compare-rows {
  display: grid;
  gap: .55rem;
}

.fi-compare-row {
  display: grid;
  grid-template-columns: var(--fi-label-width, 1.45rem) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: .34rem;
}

.fi-compare-named {
  --fi-label-width: min(27%, 7rem);
}

.fi-compare-row .fi-share-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.4rem), 1fr));
}

.fi-compare-row .fi-share-round {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 3.6rem), 1fr));
}

.fi-compare-row .fraction-illustration {
  --fi-ribbon-height: 1.38rem;
  width: 100%;
  gap: .24rem;
}

.fi-compare-row .fi-stack {
  gap: .26rem;
}

.fi-compare-label {
  color: var(--fi-ink);
  font-size: .76rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.fi-compare-grids {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fi-compare-grids .fi-compare-row {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  text-align: center;
}

.fi-compare-grids .fi-hundred-grid {
  --fi-grid-size: 7.4rem;
}

@media (forced-colors: active) {
  .fi-piece, .fi-loose, .fi-cell, .fi-swatch, .fi-plate {
    forced-color-adjust: none;
  }
}