#root{padding:1rem;text-align:center;width:100%;height:100%;display:flex;flex-direction:column;gap:30px;justify-content:flex-start;align-items:center}.header{margin-block-end:10px;display:flex}.logo{width:6rem;padding:10px;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.title{padding:20px;margin-block-end:30px;background-image:linear-gradient(90deg,#9467fe,#00d8ff);border-radius:100px;font-size:2rem;font-weight:bolder;font-family:monospace;color:#fff;width:100%;max-width:500px}.description{font-size:1.5rem;font-family:monospace;font-weight:bolder;background-image:linear-gradient(90deg,#9467fe,#00d8ff);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:500px}.info{font-family:monospace;font-weight:bolder;font-size:1.05rem;max-width:500px;align-items:center;gap:10px;background-image:linear-gradient(90deg,#9467fe,#00d8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.info>svg{margin-right:10px;color:#00d8ff}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 450px){.logo{width:5rem}.title{padding:15px;font-size:1.5rem;border-radius:25px}}@media (prefers-reduced-motion: no-preference){.logo.react{animation:logo-spin infinite 20s linear}}.calculator{display:flex;flex-direction:column;background-color:#888;gap:10px;padding:20px;border-radius:10px;box-shadow:0 0 10px 3px #333,0 0 10px #fff inset;width:420px;-webkit-user-select:none;user-select:none}.calculator>.screen{width:100%;height:100px;background-color:#444;display:flex;flex-direction:column;box-shadow:0 0 20px 1px #111 inset;padding:10px;font-family:monospace}.calculator>.screen>.inputs{flex:1;display:flex;gap:10px;justify-content:flex-start;align-items:center;padding-inline:10px;font-size:.9rem;overflow:auto}.calculator>.screen>.result{flex:2;display:flex;justify-content:flex-start;align-items:center;font-size:1.7rem;color:orange;padding-inline:10px;overflow:auto}.calculator>.keys{display:grid;grid:repeat(5,1fr) / repeat(4,1fr);gap:5px;padding:10px}.calculator>.keys>.key{display:grid;place-content:center;padding:20px;border-radius:5px;cursor:pointer;transition:background-color .2s,color .2s,scale .2s}.calculator>.keys>.key.clicked{scale:.9}.calculator>.keys>.key:active{scale:.9}.calculator>.keys>.key.in{background-color:#555}.calculator>.keys>.key.in.clicked{background-color:#eee;color:#000}.calculator>.keys>.key.in:hover{background-color:#eee;color:#000}.calculator>.keys>.key.op{background-color:#444}.calculator>.keys>.key.op.clicked{background-color:#bbb;color:#000}.calculator>.keys>.key.op:hover{background-color:#bbb;color:#000}.calculator>.keys>.key.dot{font-size:5px}.calculator>.keys>.key.clear{background-color:#a62b2b99}.calculator>.keys>.key.clear.clicked{background-color:#a62b2b}.calculator>.keys>.key.clear:hover{background-color:#a62b2b}.calculator>.keys>.key.calc{background-color:#00800099}.calculator>.keys>.key.calc.clicked{background-color:green}.calculator>.keys>.key.calc:hover{background-color:green}@media (max-width: 450px){.calculator{width:250px}.calculator>.screen{height:75px}.calculator>.keys>.key{padding:10px}}@media (prefers-color-scheme: light){.calculator{color:#fff}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{scroll-behavior:smooth}body{display:flex;justify-content:center;min-height:100vh}*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;scrollbar-width:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}