@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";:root{--clr-accent-color: hsl(228, 57%, 33%);--clr-accent-color-variant: hsl(235, 30%, 33%);--clr-neutral-0: hsl(0, 0%, 0%);--clr-neutral-5: hsl(0, 0%, 5%);--clr-neutral-10: hsl(0, 0%, 10%);--clr-neutral-15: hsl(0, 0%, 15%);--clr-neutral-20: hsl(0, 0%, 20%);--clr-neutral-25: hsl(0, 0%, 25%);--clr-neutral-30: hsl(0, 0%, 30%);--clr-neutral-35: hsl(0, 0%, 35%);--clr-neutral-40: hsl(0, 0%, 40%);--clr-neutral-45: hsl(0, 0%, 45%);--clr-neutral-50: hsl(0, 0%, 50%);--clr-neutral-55: hsl(0, 0%, 55%);--clr-neutral-60: hsl(0, 0%, 60%);--clr-neutral-65: hsl(0, 0%, 65%);--clr-neutral-70: hsl(0, 0%, 70%);--clr-neutral-75: hsl(0, 0%, 75%);--clr-neutral-80: hsl(0, 0%, 80%);--clr-neutral-85: hsl(0, 0%, 85%);--clr-neutral-90: hsl(0, 0%, 90%);--clr-neutral-95: hsl(0, 0%, 95%);--clr-neutral-100: hsl(0, 0%, 100%)}*,*:before,*:after{box-sizing:border-box}:root,html,body{margin:0;padding:0;max-width:100vw;min-height:100vh}:root{box-sizing:border-box;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--clr-neutral-20);background-color:var(--clr-neutral-100);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;font-family:roboto,sans-serif}h1{font-size:3.2em;line-height:1.1}h1,h2,a{color:var(--clr-accent-color)}a{font-weight:500;text-decoration:inherit}a :hover{color:var(--clr-accent-color-variant)}.button,button{border-radius:8px;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--clr-accent-color);color:var(--clr-neutral-90);cursor:pointer;transition:.25s}.button:hover,button:hover{background-color:var(--clr-neutral-50);outline:3px solid var(--clr-accent-color-variant);color:var(--clr-neutral-0)}.button:focus,.button:focus-visible button:focus,button:focus-visible{outline:4px auto var(--clr-accent-color-variant)}button[disabled]{cursor:not-allowed;filter:grayscale(100%)}.card{padding:2em}#app{margin:0;padding:0;display:grid}pre{text-align:left;border:1px solid var(--clr-accent-color);background:var(--clr-neutral-0)}