/* Tip the Scale: a brass balance on a plum wall. */
:root{--bg:#4a2364;--fg:#f6ecd9;--brass:#e2b44c;--brass-deep:#b3852a;--pan:#f6ecd9;--pan-lip:#cdbf9f;--ink:#2c1440;--good:#2f9e6b;--bad:#d6453d;--bar:#e2b44c;--bar-bg:#371a4b;--btn:#371a4b;--btn-fg:#f6ecd9;--go:#e2b44c;--go-fg:#2c1440}
.scale{position:relative;width:100cqw;height:min(100cqh,125cqw);--drop:3.66cqw}
.post{position:absolute;left:50%;top:9%;bottom:0;width:8px;margin-left:-4px;border-radius:4px;background:var(--brass-deep)}
.post::after{content:"";position:absolute;left:50%;bottom:0;width:32cqw;height:12px;margin-left:-16cqw;border-radius:6px 6px 0 0;background:var(--brass-deep)}
.beam{position:absolute;left:50%;top:9%;width:64cqw;height:10px;margin:-5px 0 0 -32cqw;border-radius:5px;background:var(--brass);transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.beam::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;background:var(--brass);box-shadow:inset 0 0 0 7px var(--brass),inset 0 0 0 14px var(--bg)}
/* Each pan hangs from its end of the beam. */
.pan{position:absolute;top:30%;width:42cqw;height:48%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 4px;border-radius:16px 16px 34px 34px;background:var(--pan);color:var(--ink);box-shadow:0 8px 0 var(--pan-lip);transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.pan::before{content:"";position:absolute;left:50%;bottom:100%;width:3px;height:43.75%;margin-left:-1.5px;background:var(--brass)}
#left{left:-1cqw}
#right{right:-1cqw}
.sum{font-size:min(9.4cqw,44px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.worth{min-height:22px;font-size:min(5cqw,20px);font-weight:700;line-height:22px;font-variant-numeric:tabular-nums;opacity:.7}
.scale[data-tip=left] .beam{transform:rotate(-7deg)}
.scale[data-tip=right] .beam{transform:rotate(7deg)}
.scale[data-tip=left] #left,.scale[data-tip=right] #right{transform:translateY(var(--drop))}
.scale[data-tip=left] #right,.scale[data-tip=right] #left{transform:translateY(calc(var(--drop)*-1))}
.pan.good{box-shadow:0 8px 0 var(--pan-lip),inset 0 0 0 5px var(--good)}
.pan.bad{box-shadow:0 8px 0 var(--pan-lip),inset 0 0 0 5px var(--bad)}
.scale[data-state=over] .pan{opacity:.55}
@media(prefers-reduced-motion:reduce){.beam,.pan{transition:none}}