.price-scene{width:min(94vw,740px);height:min(88vh,330px);border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:clamp(9px,2.4vmin,18px);display:flex;flex-direction:column;gap:clamp(3px,1.2vmin,8px);font:600 clamp(11px,2.4vmin,15px)/1.2 system-ui,sans-serif;overflow:hidden}.price-scene header,.metric,.price-scene footer{display:flex;align-items:center;justify-content:space-between;gap:7px}.price-scene header b{font-size:clamp(13px,3vmin,19px)}.price-scene header span{font-size:clamp(15px,3.6vmin,25px);color:var(--accent)}.metric span,.price-scene footer small{color:var(--muted)}.metric strong{font-size:clamp(12px,2.8vmin,18px)}.art{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,13px);position:relative}.art i{display:block;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 24%,var(--surface));transition:transform .4s,background .4s}.track{height:clamp(5px,1.4vmin,9px);border-radius:9px;background:var(--line);position:relative;overflow:hidden}.track div{height:100%;width:0;background:var(--accent);transition:width .4s}.track em{position:absolute;left:0;top:0;height:100%;border-right:2px solid var(--fg);pointer-events:none}.price-scene input{width:100%;height:clamp(14px,2.5vmin,22px);margin:0;accent-color:var(--accent)}.price-scene footer{font-size:clamp(10px,2.2vmin,13px)}.price-scene footer span{white-space:nowrap}.price-scene footer small{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.storage .art i{width:clamp(35px,10vmin,75px);height:clamp(20px,5vmin,36px);border-radius:50%;box-shadow:0 5px 0 var(--surface),0 8px 0 var(--accent)}.storage .art i:nth-child(2){transform:translateY(-8px)}.compute .art i{width:clamp(9px,2.4vmin,18px);height:var(--fill);min-height:16%;max-height:80%;border-radius:4px}.compute .art i:nth-child(even){transform:translateY(8px)}.documents .art i{width:clamp(25px,7vmin,50px);height:72%;border-radius:4px;box-shadow:4px 4px 0 var(--line)}.documents .art i:nth-child(even){transform:rotate(7deg)}.rows .art i{width:clamp(12px,3vmin,23px);height:clamp(12px,3vmin,23px);border-radius:4px;transform:rotate(45deg)}.cluster .art i{height:68%;width:clamp(30px,8vmin,60px);border-radius:9px;background:repeating-linear-gradient(to bottom,var(--surface) 0 18%,var(--accent) 19% 25%)}.requests .art i{width:clamp(8px,2vmin,14px);height:65%;border-radius:9px;transform:skew(-16deg)}.matrix .art{display:grid;grid-template-columns:repeat(3,clamp(16px,4vmin,30px));grid-template-rows:repeat(3,clamp(12px,3vmin,24px));align-content:center}.matrix .art i{width:100%;height:100%;border-radius:3px}.functions .art i{width:clamp(25px,7vmin,50px);height:clamp(25px,7vmin,50px);border-radius:50%}.functions .art i+ i:before{content:'→';position:absolute;transform:translate(-1.8em,.2em);color:var(--muted)}.branches .art i{width:clamp(25px,7vmin,50px);height:clamp(25px,7vmin,50px);border-radius:4px;transform:rotate(45deg)}.branches .art i:nth-child(2){transform:translateY(-13px) rotate(45deg)}.price-scene.over .art i{background:color-mix(in srgb,var(--accent-3) 32%,var(--surface));border-color:var(--accent-3)}
const cfg={"title":"FIREBASE · READS","metric":"Firestore reads/day","unit":"reads","free":50000,"paidBase":0,"paidIncluded":50000,"rate":0.03,"rateBlock":100000,"max":500000,"step":10000,"start":50000,"motif":"documents","foot":"Iowa · 50k/day free, then $0.03/100k · cost per day"};const input=document.getElementById('usage'),scene=document.querySelector('.price-scene');let timer;function money(n){return n===0?'$0':n<0.01?'$'+n.toFixed(4):'$'+n.toFixed(2)}function draw(v){const value=Number(v);const over=value>cfg.free;const paidUnits=Math.max(0,value-cfg.paidIncluded);const cost=over?cfg.paidBase+paidUnits/cfg.rateBlock*cfg.rate:0;scene.classList.toggle('over',over);scene.style.setProperty('--fill',Math.min(100,value/cfg.max*100)+'%');document.getElementById('amount').textContent=value.toLocaleString()+' '+cfg.unit;document.getElementById('bill').textContent=money(cost);document.getElementById('tier').textContent=over?'Paid estimate':'Free tier';document.getElementById('used').style.width=Math.min(100,value/cfg.max*100)+'%';document.getElementById('free-mark').style.left=Math.max(0,cfg.free/cfg.max*100)+'%';input.value=String(value)}draw(cfg.start);let sequence=[cfg.start,Math.min(cfg.max,cfg.free+cfg.step*3),cfg.max,0],cursor=0;timer=setInterval(()=>{cursor=(cursor+1)%sequence.length;draw(sequence[cursor])},1250);input.addEventListener('input',()=>{clearInterval(timer);draw(input.value)})
