Paddle

<div class="payment" data-motif="ledger"><div class="head"><b>PADDLE · CHECKOUT</b><span>US · $50/order</span></div><div class="tickets"><div class="ticket"><span>SALE</span><strong>$50.00</strong></div><div class="sign">×</div><div class="ticket count"><span>ORDERS</span><strong id="orders">0</strong></div></div><div class="parts"><span>5% of sale</span><span>+ $0.50/order</span></div><div class="total">PROCESSING FEE <strong id="fee">$0</strong></div><input id="orders-slider" type="range" min="0" max="1000" step="25" value="0" aria-label="Monthly transactions"><small>Base fee only · other charges excluded</small></div>

.payment{width:min(94vw,760px);height:min(88vh,325px);padding:clamp(8px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,2.5vmin,17px)/1.2 var(--font-sans,system-ui);display:flex;flex-direction:column;gap:clamp(3px,1.1vmin,8px);overflow:hidden}.head,.total,.parts{display:flex;justify-content:space-between;align-items:center;gap:5px}.head b{font-size:1.1em;color:var(--accent)}.head span,.payment small{color:var(--muted);font-size:clamp(10px,2.1vmin,13px)}.tickets{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.5vmin,20px)}.ticket{min-width:28%;height:100%;border:2px solid var(--accent);border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,var(--bg));padding:clamp(4px,1.2vmin,10px);display:flex;flex-direction:column;justify-content:space-between}.ticket span{color:var(--muted);font:700 clamp(10px,2vmin,14px)/1 ui-monospace,monospace}.ticket strong{font:800 clamp(16px,5vmin,32px)/1 ui-monospace,monospace}.sign{color:var(--accent-2);font-size:clamp(20px,6vmin,34px)}.parts{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px;white-space:nowrap}.total strong{color:var(--accent-2);font:800 clamp(17px,5vmin,28px)/1 ui-monospace,monospace}.payment input{width:100%;accent-color:var(--accent);height:18px}.payment small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-motif=split] .ticket{border-radius:30px 4px 30px 4px;border-color:var(--accent-3)}[data-motif=split] .sign{transform:rotate(18deg)}[data-motif=ledger] .tickets{justify-content:space-around}[data-motif=ledger] .ticket{border-radius:3px;border-left-width:8px;border-color:var(--accent-2);background:repeating-linear-gradient(0deg,var(--surface) 0 14px,var(--bg) 14px 15px)}[data-motif=ledger] .sign{color:var(--accent-3)}

const slider=document.getElementById('orders-slider');let index=0,timer;const samples=[0,100,250,600,1000];function draw(n){slider.value=String(n);document.getElementById('orders').textContent=n.toLocaleString();document.getElementById('fee').textContent='$'+(n*(50*0.05+0.5)).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2})}draw(samples[0]);timer=setInterval(()=>{index=(index+1)%samples.length;draw(samples[index])},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw(Number(slider.value))})