.page{flex-direction:column;align-items:center;gap:clamp(2.5rem,8vh,4.5rem);min-height:100vh;padding:42vh 1.5rem 5rem;transition:padding-top .55s cubic-bezier(.22,.61,.36,1);display:flex}.page[data-has-result=true]{padding-top:clamp(3rem,12vh,7rem)}.digit-field{cursor:text;gap:clamp(.9rem,4vw,1.6rem);display:flex;position:relative}.digit-slot{border-bottom:2px solid var(--ink);width:clamp(2rem,9vw,2.75rem);height:clamp(3rem,12vw,4rem);color:var(--ink);place-items:center;font-size:clamp(2rem,9vw,2.75rem);font-weight:700;line-height:1;display:grid}.digit-slot[data-caret=true]:after{content:"";background:var(--ink);width:2px;height:clamp(1.5rem,6.5vw,2.1rem);animation:1.1s step-end infinite blink;position:absolute;bottom:.5rem}@keyframes blink{50%{opacity:0}}.digit-input{opacity:0;color:#0000;cursor:text;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.steps{--dw:1.7rem;--flash:#e9e9e9;flex-direction:column;align-items:center;gap:clamp(1.5rem,5vh,2.5rem);display:flex}@media (width<=420px){.steps{--dw:1.35rem}}.calc-list{flex-direction:column;align-items:center;gap:clamp(1.25rem,4vh,2rem);display:flex}.calc{flex-direction:column;gap:.35rem;animation:.3s both fade;display:flex}.line{align-items:center;gap:.5rem;display:flex;position:relative}.op{text-align:center;width:1.1rem;font-size:calc(var(--dw) * .95);color:var(--ink-2);flex:none}.digit{width:var(--dw);text-align:center;font-size:calc(var(--dw) * .95);color:var(--ink);border-radius:6px;flex:none}.track{width:calc(var(--dw) * 4);height:1.5em;display:inline-block;position:relative}.track.enter{animation:.6s cubic-bezier(.3,0,.2,1) both float-in}@keyframes float-in{0%{opacity:.25;transform:translateY(-3.5rem)}to{opacity:1;transform:translateY(0)}}.digit.moving{z-index:1;transition:transform .42s cubic-bezier(.35,0,.25,1),background-color .2s;position:absolute;top:0;left:0}.digit.moving[data-lift=true]{z-index:5;background-color:var(--flash)}.line.total .digits{padding-top:.24rem;display:inline-flex;position:relative}.line.total[data-state=hidden]{opacity:0}.line.total .digits:before{content:"";width:calc(var(--dw) * 4);background:var(--ink);transform-origin:0;height:2px;position:absolute;top:0;left:0;transform:scaleX(0)}.line.total[data-state=shown] .digits:before{transform:scaleX(1)}.line.total[data-state=revealing] .digits:before{animation:.4s both draw}.line.total[data-state=revealing] .digit{animation:.45s .2s both reveal}.calc[data-final=true] .line.total .digit{font-weight:700}.calc[data-final=true] .line.total .digits:after{content:"";width:calc(var(--dw) * 4);background:var(--ink);transform-origin:0;height:2px;position:absolute;bottom:-3px;left:0;transform:scaleX(0)}.calc[data-final=true] .line.total[data-state=shown] .digits:after{transform:scaleX(1)}.calc[data-final=true] .line.total[data-state=revealing] .digits:after{animation:.4s .4s both draw}.result-link{width:calc(var(--dw) * 4);color:inherit;align-items:baseline;text-decoration:none;display:inline-flex}.suffix{font-size:calc(var(--dw) * .95);color:var(--ink);opacity:0;flex:none;margin-left:-.35rem;font-weight:700;position:relative}.suffix:after{content:"";background:var(--ink);transform-origin:0;height:2px;position:absolute;bottom:-3px;left:0;right:0;transform:scaleX(1)}.line.total[data-state=shown] .suffix{opacity:1}.line.total[data-state=revealing] .suffix{animation:.5s 1.6s both no-in}@keyframes no-in{0%{opacity:0}to{opacity:1}}@keyframes draw{to{transform:scaleX(1)}}@keyframes reveal{0%{opacity:0;transform:translateY(-6px)}}@keyframes fade{0%{opacity:0}}:root{--bg:#fff;--ink:#141414;--ink-2:#9a9a9a;--font-mono:"Space Mono", ui-monospace, "SFMono-Regular", monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}body{min-height:100vh;font-family:var(--font-mono);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}input{font:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
