.rounding-story{--paper:url('/css/diagram-objects/point-rounding/receipt.svg');--ledger:url('/css/diagram-objects/point-rounding/ledger.svg');position:relative;container:rounding / inline-size;margin:1.5rem 0;padding:1rem 0;border-block:1px solid var(--c-border);color:var(--c-ink);scroll-margin-top:calc(var(--site-header-height,61px) + 1rem)}
.rounding-story *{box-sizing:border-box}
.rounding-story figcaption{font-size:1.125rem;font-weight:750;line-height:1.5;margin:0 0 .45rem}
.rounding-story .rounding-rule{font-size:.875rem;margin:0 0 1rem;color:var(--c-ink-soft)}
.rounding-story .rounding-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:0 1.5rem}
.rounding-story .rounding-path{min-width:0;text-align:center;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4}
.rounding-story .rounding-path h3{font-size:1rem;line-height:1.5;margin:0 0 .6rem;padding:0;border:0}
.rounding-story .receipt-set{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:10rem}
.rounding-story .receipt{position:relative;display:flex;align-items:center;flex-direction:column;width:6rem;height:9rem;padding:12px 8px 18px;margin:0;background:var(--paper) center / 100% 100% no-repeat}
.rounding-story .receipt-number{font-size:.875rem;color:var(--c-ink-soft);line-height:1.4}
.rounding-story .receipt-amount{font-size:1.25rem;line-height:1.4;margin:.65rem 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.rounding-story small{font-size:.7em;font-weight:600}
.rounding-story .receipt-stamp{display:inline-flex;gap:2px;align-items:baseline;border:1.5px solid var(--c-money);border-radius:3px;color:var(--c-money);font-size:1.125rem;font-weight:700;padding:0 6px;line-height:1.4;background:var(--c-money-pale)}
.rounding-story .monthly-ledger{width:13rem;max-width:100%;height:10rem;position:relative;margin:0 auto;background:var(--ledger) center / 100% 100% no-repeat;padding:1.1rem 2rem 0}
.rounding-story .ledger-label{display:block;font-size:.875rem;color:var(--c-ink-soft);line-height:1.4;margin-bottom:.25rem}
.rounding-story .ledger-items{margin:0;padding:0;display:grid;gap:0}
.rounding-story .ledger-items>div{display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-size:.875rem;line-height:1.5}
.rounding-story .ledger-items dt{font-weight:400;color:var(--c-ink-soft)}
.rounding-story .ledger-items dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.rounding-story .ledger-total{position:absolute;left:12px;right:12px;bottom:.85rem;color:#fff;text-align:center;font-size:.875rem;line-height:1.3;background:#0e605a;border-radius:2px;padding:.15rem 0}
.rounding-story .ledger-total strong{font-size:1.25rem;display:inline-block;margin-left:.3rem;font-variant-numeric:tabular-nums}
.rounding-story .rounding-cause{font-size:.875rem;line-height:1.6;margin:.6rem 0}
.rounding-story .point-output{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.3rem}
.rounding-story .coin-shelf{display:flex;align-items:center;justify-content:center;gap:0}
.rounding-story .point-coin{display:inline-flex;align-items:baseline;justify-content:center;width:2.5rem;height:2.8rem;padding-top:8px;background:#f8d777 url('/css/diagram-objects/point-rounding/point.svg') center / 100% 100% no-repeat;border-radius:50%;color:#573607;font-size:1rem;line-height:1.4;font-weight:750;font-variant-numeric:tabular-nums}
.rounding-story .point-coin+.point-coin{margin-left:-8px}
.rounding-story .empty-coin{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px dashed var(--c-ink-soft);border-radius:50%;font-size:1.25rem;color:var(--c-ink-soft)}
.rounding-story .point-output>p{margin:0;font-size:.875rem;line-height:1.4;color:var(--c-ink-soft)}
.rounding-story .point-output>p>strong{display:block;color:var(--c-ink);font-size:1.75rem;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rounding-story .point-output>p>strong small{font-size:.5em;letter-spacing:0;margin-left:.15rem}
.rounding-story .rounding-verdict{font-size:1rem;margin:.8rem 0 0;line-height:1.7}
.rounding-story .rounding-verdict strong{color:var(--c-primary-strong)}
.rounding-story .rounding-controls{display:flex;align-items:center;gap:.4rem 1.1rem;flex-wrap:wrap;margin:.6rem 0}
.rounding-story .rounding-controls[hidden]{display:none}
.rounding-story .rounding-case-toggle{min-height:44px;padding:.3rem .7rem;border:1px solid var(--c-primary);border-radius:5px;background:var(--c-surface);color:var(--c-primary-strong);font:inherit;font-size:.875rem;cursor:pointer}
.rounding-story .rounding-replay{min-height:44px;border:0;border-radius:4px;background:none;color:var(--c-link);font:inherit;font-size:.875rem;padding:.25rem 0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
.rounding-story .source{margin:.7rem 0 0;font-size:.75rem;line-height:1.7}
.rounding-story .sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rounding-story .motion-paper{position:absolute;z-index:10;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--c-ink);background:var(--paper) center / 100% 100% no-repeat;will-change:transform,opacity}
@container rounding (max-width:42em){.rounding-story .rounding-paths{column-gap:.8rem}.rounding-story .receipt-set{flex-direction:column;gap:4px;height:10rem}.rounding-story .receipt{width:8.5rem;max-width:100%;height:3.2rem;padding:3px 10px 7px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 4px;text-align:left}.rounding-story .receipt-number{grid-column:1/-1;line-height:1.2}.rounding-story .receipt-amount{font-size:1rem;margin:0;line-height:1.3}.rounding-story .receipt-stamp{font-size:.875rem;padding:0 3px;line-height:1.3;align-self:center}.rounding-story .monthly-ledger{padding:1.1rem 14px 0}.rounding-story .ledger-label{white-space:normal}.rounding-story .ledger-items>div{gap:3px}.rounding-story .ledger-total{left:5px;right:5px}.rounding-story .point-output{flex-direction:column;gap:.3rem}.rounding-story .point-output>p>strong{font-size:1.5rem}}
@container rounding (max-width:16em){.rounding-story .rounding-paths{grid-template-columns:1fr;grid-template-rows:auto;gap:1.5rem}.rounding-story .rounding-path{grid-row:auto;grid-template-rows:auto}.rounding-story .receipt-set{height:auto;min-height:0}.rounding-story .receipt{width:100%;max-width:18rem;height:auto;min-height:4.2rem}.rounding-story .monthly-ledger{height:16rem;width:min(100%,20rem);padding:2.5rem 1.5rem 0}.rounding-story .ledger-total{bottom:1.75rem}.rounding-story .point-output{flex-direction:row}}
@media(prefers-color-scheme:dark){.rounding-story{--paper:url('/css/diagram-objects/point-rounding/receipt-dark.svg');--ledger:url('/css/diagram-objects/point-rounding/ledger-dark.svg')}}
@media(prefers-reduced-motion:reduce){.rounding-story .rounding-replay{display:none}}