*,*:before,*:after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{--light-bg-color: hsl(152, 1%, 95%);--light-color: hsl(273, 100%, 29%);--light-card-color: hsl(54, 100%, 92%);--light-black-transparent: hsla(237, 100%, 75%, .1);--light-white-transparent: hsla(173, 16%, 100%, .5);--light-accent: hsl(250, 100%, 50%);--dark-bg-color: hsl(273, 100%, 15%);--dark-color: hsl(58, 61%, 89%);--dark-card-color: hsl(240, 100%, 5%);--dark-white-transparent: hsla(173, 16%, 0%, .35);--dark-black-transparent: hsla(50, 12%, 69%, .05);--dark-accent: hsl(60, 100%, 80%);--highlight-color: violet;font-family:Kanit,sans-serif;font-weight:500;font-size:calc(1rem + 1vw);color-scheme:light dark;color:var(--dark-color);background-color:var(--dark-bg-color);background-image:linear-gradient(var(--dark-black-transparent) 2px,transparent 2px),linear-gradient(90deg,var(--dark-black-transparent) 2px,transparent 2px);background-size:10px 10px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:flex;flex-direction:column;align-items:center}h1,span,details{text-align:center}h1{margin-bottom:2rem}a,button{font-size:1.5em;margin:.5rem;border-radius:.5rem;color:var(--dark-accent);border:.25rem solid var(--dark-accent);padding:.25rem .75rem;text-decoration:none;background-color:var(--dark-white-transparent);outline:.01rem solid transparent;transition:outline .3s;cursor:pointer}a:disabled,button:disabled{cursor:not-allowed;opacity:.5}a span,button span{display:inline-block;scale:1;transition:scale .3s}summary{width:fit-content;padding:0 .5em;margin-left:auto;margin-right:auto;color:var(--dark-accent);border-radius:.5rem;cursor:pointer;z-index:10}a:hover,button:hover,summary:hover{filter:hue-rotate(45deg)}a:hover span,button:hover span{scale:1.1}a:active span,button:active span{scale:.9}a:focus,button:focus,summary:focus{outline:.25rem var(--highlight-color) solid}.large-bottom-margin{margin-bottom:2.75rem}.fit-container{width:fit-content;margin:auto}.full{width:100%}.row{display:flex;flex-wrap:wrap;align-items:center}.col{display:flex;flex-wrap:wrap;align-items:center;flex-direction:column}.end{justify-content:flex-end}.between{justify-content:space-between}.margin-right{margin-right:1em}.large-top-margin:not(:has(~details:nth-of-type(1)[open])){margin-top:30vh}.large-top-margin{margin-top:-2rem;transition:margin .3s ease-in-out}.sample-text{position:absolute;z-index:-1;font-size:2.5em;transform:rotate(45deg);top:5rem;left:2.5rem;opacity:1;color:var(--highlight-color)}.sample-text~button:hover{cursor:auto;filter:hue-rotate(0deg)}.sample-text~button:hover span{scale:1}.sample-text~button:active,.sample-text~button:focus{outline:none}.card{position:relative;overflow:hidden;width:clamp(250px,50vh,min(500px,80vw));height:clamp(250px,50vh,min(500px,80vw));aspect-ratio:1 / 1;background-color:var(--dark-card-color);color:#fff;font-size:2em;display:flex;justify-content:center;align-items:center}.paper-texture{width:100%;height:100%;position:absolute;top:0;left:10%;transform:scaleX(1.5);opacity:.08}.card>p:first-child{position:absolute;right:.25rem;top:-.25rem;font-size:.5em}.card>p:nth-child(2){position:absolute;left:.25rem;top:-.25rem;font-size:.5em}.card div{display:flex;justify-content:center;align-items:center;flex-direction:column}.card div .bar{background-color:#fff;height:.25rem;width:120%}.card div p{align-self:end}.card-contents{line-height:1.1}.operation{display:inline-block;scale:1.5}.activeResults{height:50px;width:250px;border-radius:25px;background-color:var(--dark-card-color);margin:.5rem auto;overflow:hidden;display:flex;flex-direction:row-reverse;position:relative}.activeResults img{position:absolute;height:44px;width:44px;margin:3px;animation:grow .5s cubic-bezier(.25,0,.6,1.25);transition:right .3s linear}.activeResults .incorrect{transform:rotate(45deg)}.correction{color:var(--dark-accent)}.push-right:has(.caret){position:relative;left:.5rem}.caret{color:var(--highlight-color);animation:flashing 1s ease-in-out infinite}.confetti{max-width:none;opacity:.5;position:absolute;width:100vw;height:100vh;top:0;left:0;z-index:-1}@keyframes grow{0%{scale:0}to{scale:1}}@keyframes flashing{0%{opacity:0}50%{opacity:1}to{opacity:0}}@media(prefers-color-scheme:light){:root{color:var(--light-color);background-color:var(--light-bg-color);background-image:linear-gradient(var(--light-black-transparent) 2px,transparent 2px),linear-gradient(90deg,var(--light-black-transparent) 2px,transparent 2px)}a,button{color:var(--light-accent);border-color:var(--light-accent);background-color:var(--light-white-transparent)}summary{color:var(--light-accent)}.activeResults{background-color:var(--light-card-color)}.correction{color:var(--light-accent)}.card{background-color:var(--light-card-color);color:#000}.paper-texture{opacity:.25}.card div .bar{background-color:#000}a:hover,button:hover,summary:hover{filter:hue-rotate(-90deg)}}img{max-width:400px;transition:scale .3s}a:has(img){padding:0}a:has(img):hover img{scale:1.1}a{max-width:90vw;overflow:hidden;display:flex;justify-content:center}.loader{margin:50px;width:150px;aspect-ratio:1;display:grid;border-radius:50%;background:conic-gradient(#25b09b 25%,#f03355 0 50%,#514b82 0 75%,#ffa516 0);animation:l22 2s infinite linear}.loader:before,.loader:after{content:"";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;animation:inherit}.loader:after{margin:25%;animation-duration:3s}@keyframes l22{to{transform:rotate(1turn)}}.num-pad,.atm{margin-top:.25rem;display:grid}.num-pad button,.atm button{margin:.25rem}.num-pad{position:relative;display:grid;grid-template-areas:"h i j n" "e f g m" "b c d l" "a a k l"}.atm{position:relative;display:grid;grid-template-areas:"b c d n" "e f g m" "h i j l" ". a k l"}@media only screen and (max-width:500px){section.row{flex-direction:column;margin-bottom:2rem}}