@layer components{.dial-screen{--dial-safe-top: max(.75rem, env(safe-area-inset-top, 0px));--dial-safe-bottom: max(.75rem, env(safe-area-inset-bottom, 0px));--dial-pad-rows: 5.25;--dial-pad-cols: 3.56;--dial-size-ideal: min( 5.5rem, max(4rem, calc((min(100dvw, 28rem) - 2.5rem) / var(--dial-pad-cols))) );--dial-chrome: clamp(5.25rem, 18dvh, 8.75rem);--dial-size-fit: calc( ( 100dvh - var(--dial-safe-top) - var(--dial-safe-bottom) - var(--dial-chrome) ) / var(--dial-pad-rows) );--dial-size: min(var(--dial-size-ideal), max(2.75rem, var(--dial-size-fit)));--dial-gap-x: calc(var(--dial-size) * .28);--dial-gap-y: calc(var(--dial-size) * .38);--dial-font: calc(var(--dial-size) * .42);--dial-currency-size: clamp(1.125rem, 3.25dvh, 1.75rem);display:flex;height:100dvh;max-height:100dvh;flex-direction:column;overflow:hidden;overscroll-behavior:none;padding-top:var(--dial-safe-top);padding-bottom:var(--dial-safe-bottom);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.dial-screen *{user-select:none;-webkit-user-select:none}.dial-main{min-height:0;flex:1 1 0%;gap:clamp(.625rem,2.5dvh,1.25rem)}.dial-pad-footer{flex-shrink:0;padding-top:clamp(.25rem,1.25dvh,1.5rem)}.dial-pad{--dial-press-scale: 1.24}.dial-amount-wrap{display:flex;width:100%;flex-shrink:1;justify-content:center;min-height:0;overflow:visible}.dial-amount{position:relative;display:inline-block;max-width:100%}.dial-currency-badge{position:absolute;top:.1em;right:calc(100% + .35rem);display:flex;width:var(--dial-currency-size);height:var(--dial-currency-size);align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--border);background:var(--background);font-size:clamp(.5rem,1.35dvh,.75rem);font-weight:500;color:var(--muted-foreground);box-shadow:0 1px 2px #0000000d}.dial-amount-value{font-size:clamp(1.75rem,min(10dvh,12vw),5.25rem);line-height:1}.dial-history{flex-shrink:0;margin-top:clamp(.125rem,.75dvh,.5rem)}@media(max-height:32rem){.dial-screen{--dial-chrome: clamp(4.75rem, 16dvh, 7rem);--dial-currency-size: clamp(1rem, 2.75dvh, 1.375rem)}.dial-amount-value{font-size:clamp(1.5rem,min(8dvh,10vw),2.5rem)}.dial-main{gap:clamp(.375rem,1.75dvh,.75rem)}}html:has(.dial-screen),html:has(.dial-screen) body{height:100%;overflow:hidden;overscroll-behavior:none}.dial-key{transform:scale(1);transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out;will-change:transform}.dial-key[data-pressed=true]{border-color:color-mix(in oklch,var(--primary) 55%,var(--border));background:color-mix(in oklch,var(--primary) 28%,var(--input));color:var(--primary);transform:scale(var(--dial-press-scale));transition:transform .1s ease-out,background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out}.dial-key.dial-key-bounce{animation:dial-key-bounce .8s cubic-bezier(.34,1.45,.64,1) forwards}@keyframes dial-key-bounce{0%{transform:scale(var(--dial-press-scale))}38%{transform:scale(.97)}68%{transform:scale(1.03)}to{transform:scale(1)}}.dark .dial-key[data-pressed=true]{border-color:color-mix(in oklch,var(--primary) 50%,var(--border));background:color-mix(in oklch,var(--primary) 35%,var(--input))}}