@property --rim-sweep{syntax:"<number>";inherits:true;initial-value:0}@property --card-front{syntax:"<percentage>";inherits:false;initial-value:0%}@property --card-glow{syntax:"<number>";inherits:false;initial-value:0}.lava-card{--lava-metal:#dfe7f2;--lava-ember:255 112 54;--lava-origin:0;--lava-visc:0;--lava-expected:1.2s;--lava-start:0s;position:relative}.lava-rim{pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;overflow:visible}.lava-rim rect{fill:none;stroke-linecap:round}.rim-flow{stroke:url(#lavaChrome);stroke-width:calc(2px + var(--lava-visc) * 1.5px);stroke-dasharray:var(--rim-sweep) calc(100 - var(--rim-sweep));stroke-dashoffset:calc(var(--lava-origin) * -1);filter:drop-shadow(0 0 3px #dfe7f280)}.rim-head{stroke:#fff;stroke-width:calc(3px + var(--lava-visc) * 1.5px);stroke-dasharray:.5 99.5;stroke-dashoffset:calc((var(--lava-origin) + var(--rim-sweep) - .5) * -1);filter:drop-shadow(0 0 4px #fff)}.lava-card:is([data-state=pending],[data-state=slow],[data-state=queued],[data-state=failed],[data-state=confirmed]) .lava-rim{opacity:1}.lava-card[data-state=pending] .lava-rim{animation:rim-measure var(--lava-expected) cubic-bezier(.2, .7, .25, 1) calc(var(--lava-start) * -1) both}.lava-card[data-state=slow] .lava-rim{--rim-sweep:100}.lava-card[data-state=slow] .rim-flow{animation:rim-breathe calc(3.2s * (1 + var(--lava-visc) * .5)) ease-in-out 4}.lava-card[data-state=queued] .lava-rim{--rim-sweep:9;opacity:.75}.lava-card[data-state=queued] .rim-flow{stroke:#8a94a3;filter:none}.lava-card[data-state=queued] .rim-head{opacity:0}.lava-card[data-state=failed] .lava-rim{animation:.9s ease-in both rim-drain}.lava-card[data-state=confirmed] .lava-rim{animation:1.25s cubic-bezier(.65,0,.35,1) both rim-set}.lava-card[data-state=confirmed] .rim-flow{animation:1.25s both rim-flow-out}.lava-card[data-state=confirmed] .rim-set{animation:1.25s both rim-set-color}.lava-card[data-state=confirmed] .rim-head{filter:drop-shadow(0 0 5px rgb(var(--lava-ember)))}.rim-set{stroke-width:calc(2.5px + var(--lava-visc) * 1px);filter:drop-shadow(0 0 6px rgb(var(--lava-ember) / .75));opacity:0}@keyframes rim-measure{0%{--rim-sweep:0}to{--rim-sweep:100}}@keyframes rim-breathe{0%,to{filter:drop-shadow(0 0 2px #dfe7f259)}50%{filter:drop-shadow(0 0 9px #dfe7f2e6)}}@keyframes rim-drain{0%{--rim-sweep:100;opacity:1}to{--rim-sweep:0;opacity:0}}@keyframes rim-set{0%{--rim-sweep:60;opacity:1}40%{--rim-sweep:100;opacity:1}70%{--rim-sweep:100;opacity:1}to{--rim-sweep:100;opacity:0}}@keyframes rim-flow-out{0%,15%{opacity:1}40%,to{opacity:0}}@keyframes rim-set-color{0%{opacity:0}35%,to{opacity:1}}.lava-tube{--obsidian:repeating-linear-gradient(118deg, #ffffff12 0 1px, transparent 1px 9px), linear-gradient(180deg, #1a1d25, #0d0e12);background:#ffffff08;border-radius:30px;width:58px;height:190px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 6px 14px #00000073}.tube-solid{height:var(--confirmed,0%);background:var(--obsidian);transition:height .7s cubic-bezier(.2,.8,.2,1);position:absolute;inset:auto 0 0}.tube-liquid{inset:auto 0 var(--confirmed,0%) 0;height:max(0%, calc(var(--shown,0%) - var(--confirmed,0%)));background:var(--obsidian);transition:height .6s cubic-bezier(.2,.8,.2,1),bottom .7s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s;position:absolute}.tube-liquid:before{content:"";opacity:0;background:radial-gradient(at 40% 40%,#fffffff2,#fff0 70%);border-radius:50%;height:7px;position:absolute;inset:-3px 6% auto}.lava-card:is([data-state=pending],[data-state=slow]) .tube-liquid{background:linear-gradient(90deg,#4a525e,#eef3fa 30%,#9aa4b3 55%,#59616e 80%,#3e454f);box-shadow:0 0 12px #dfe7f240}.lava-card:is([data-state=pending],[data-state=slow]) .tube-liquid:before{opacity:.9;animation:tube-slosh calc(2.4s * (1 + var(--lava-visc) * .8)) ease-in-out 4}.lava-card[data-state=queued] .tube-liquid{opacity:.85;background:linear-gradient(#3a3f48,#2a2e35)}.lava-card[data-state=confirmed] .lava-tube:after{content:"";pointer-events:none;background:linear-gradient(0deg, transparent calc(var(--card-front) - 34%), rgb(var(--lava-ember) / calc(.55 * var(--card-glow))) var(--card-front), transparent calc(var(--card-front) + 3%));animation:1.25s cubic-bezier(.65,0,.35,1) backwards card-front-up;position:absolute;inset:0}@keyframes tube-slosh{0%,to{transform:translate(0)scaleX(1)rotate(0)}25%{transform:translate(-3px)scaleX(.9)rotate(-3deg)}75%{transform:translate(3px)scaleX(1.05)rotate(3deg)}}@keyframes card-front-up{0%{--card-front:0%;--card-glow:1}85%{--card-glow:1}to{--card-front:138%;--card-glow:0}}.lava-row{--lava-visc:0}.lava-bead{transform-origin:50% 80%;background:radial-gradient(circle at 32% 28%,#fff 0 7%,#e4ebf5 12%,#8f99a8 46%,#353b45 100%);border-radius:50%;width:18px;height:18px;transition:transform .35s,border-radius .35s,background .35s,box-shadow .35s,opacity .35s;box-shadow:0 0 8px #dfe7f24d}.lava-row[data-state=pending] .lava-bead{animation:bead-wobble calc(1.5s * (1 + var(--lava-visc) * .8)) ease-in-out 6}.lava-row[data-state=slow] .lava-bead{animation:bead-wobble calc(3.2s * (1 + var(--lava-visc) * .5)) ease-in-out 3}.lava-row[data-state=queued] .lava-bead{box-shadow:none;background:radial-gradient(circle at 35% 30%,#aab3c0,#5a626e 55%,#2d323a);transform:scaleY(.65)translateY(3px)}.lava-row[data-state=failed] .lava-bead{opacity:.35;transform:scale(.7,.2)translateY(7px)}.lava-row:is([data-state=confirmed],[data-state=settled]) .lava-bead{background:conic-gradient(from 20deg,#2a2e36,#565e6b,#1b1e24,#4a515d,#2a2e36);border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff2e}.lava-row[data-state=confirmed] .lava-bead{animation:1.25s cubic-bezier(.65,0,.35,1) both bead-set}@keyframes bead-wobble{0%,to{transform:scale(1)}30%{transform:scale(1.14,.88)}60%{transform:scale(.9,1.12)}}@keyframes bead-set{0%{box-shadow:0 0 0 0 rgb(var(--lava-ember,255 112 54) / 0)}35%{box-shadow:0 0 0 4px rgb(var(--lava-ember,255 112 54) / .45), 0 0 14px rgb(var(--lava-ember,255 112 54) / .5)}to{box-shadow:inset 0 0 0 1px #ffffff2e, 0 0 0 0 rgb(var(--lava-ember,255 112 54) / 0)}}.lava-pool{background:#ffffff05;border-radius:14px;width:132px;height:46px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.pool-level{height:calc(var(--queued,0) * 25%);background:linear-gradient(#eef3fa,#8f99a8 40%,#4a525e);transition:height .8s cubic-bezier(.2,.8,.2,1);position:absolute;inset:auto 0 0}@media (prefers-reduced-motion:reduce){.lava-card[data-state=pending] .lava-rim{--rim-sweep:50;animation:none}.lava-card[data-state=slow] .rim-flow{animation:none}.lava-card[data-state=failed] .lava-rim,.lava-card[data-state=confirmed] .lava-rim,.lava-card[data-state=confirmed] .lava-tube:after{opacity:0;animation:none}.lava-card .tube-liquid:before,.lava-row .lava-bead{animation:none!important}.lava-row[data-state=confirmed] .lava-bead{animation:none}.tube-solid,.tube-liquid,.lava-bead,.pool-level{transition:none}}@media (forced-colors:active){.rim-flow,.rim-head,.rim-set{stroke:highlight;filter:none}.lava-card[data-state=queued] .rim-flow{stroke:graytext}.lava-tube,.lava-pool{border:1px solid canvastext}.tube-solid{background:canvastext}.tube-liquid{background:highlight}.lava-bead{background:canvas;border:1px solid canvastext}.lava-row:is([data-state=confirmed],[data-state=settled]) .lava-bead{background:canvastext}.pool-level{background:highlight}}