*{box-sizing:border-box;border:0;margin:0;padding:0}:root{--hue:0;--sat:0%;--gray50:hsl(var(--hue), var(--sat), 95%);--gray150:hsl(var(--hue), var(--sat), 85%);--gray600:hsl(var(--hue), var(--sat), 40%);--gray850:hsl(var(--hue), var(--sat), 15%);--gray950:hsl(var(--hue), var(--sat), 5%);--trans-dur:.3s;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-size:clamp(1rem,.9773rem + .1136vw,1.25rem)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body,button{color:var(--lightningcss-light,var(--gray950))var(--lightningcss-dark,var(--gray50));font:1em/1.5 -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif}body{background-color:var(--lightningcss-light,var(--gray50))var(--lightningcss-dark,var(--gray950));height:100vh;transition:background-color var(--trans-dur), color var(--trans-dur);place-items:center;display:grid}h1{margin:0 0 1.5rem;font-size:3em;font-weight:500;line-height:1}main{text-align:center;width:100vw;max-width:37.5em;height:min-content;min-height:100vh}p{margin-bottom:1.5em}section{padding:0 1.5em 1.5em}.btn-link{background-color:var(--lightningcss-light,var(--gray950))var(--lightningcss-dark,var(--gray50));color:var(--lightningcss-light,var(--gray50))var(--lightningcss-dark,var(--gray950));transition:background-color var(--trans-dur), color var(--trans-dur), opacity var(--trans-dur);border-radius:1.5em;width:max-content;margin:3em auto;padding:.75em 1.5em;text-decoration:none;display:block}.btn-link:hover{opacity:.9}.keyboard{background-color:var(--gray150);background-image:linear-gradient(90deg, hsla(var(--hue), var(--sat), 10%, .4), hsla(var(--hue), var(--sat), 10%, 0));box-shadow:-.25em -.25em .375em #0009, 0 0 0 1px hsl(var(--hue), var(--sat), 67%) inset;direction:ltr;border-radius:.375em;grid-template-columns:repeat(11,1fr);gap:.375em;width:min-content;margin:0 auto;padding:.375em;display:grid;position:relative}.keyboard,.keyboard:before,.keyboard:after{transition:background-color var(--trans-dur), box-shadow var(--trans-dur)}.keyboard:before,.keyboard:after{background-color:var(--gray50);content:"";display:block;position:absolute;bottom:100%}.keyboard:before{box-shadow:-.25em -.25em .375em #0009, .125em 0 .125em hsla(var(--hue), var(--sat), 10%, .2) inset, .125em -.625em .25em hsla(var(--hue), var(--sat), 10%, .5) inset;width:.5em;height:9em;left:calc(50% - .25em)}.keyboard:after{box-shadow:.1875em -.125em .25em hsla(var(--hue), var(--sat), 10%, .5) inset;border-radius:.125em .125em 0 0;width:.75em;height:.625em;left:calc(50% - .375em)}.keyboard__key{background-color:var(--lightningcss-light,var(--gray50))var(--lightningcss-dark,var(--gray850));color:var(--lightningcss-light,var(--gray600))var(--lightningcss-dark,var(--gray50));width:2.5em;height:2.5em;transition:background-color var(--trans-dur), box-shadow .1s, color var(--trans-dur);appearance:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:.25em;padding:.375em;position:relative;box-shadow:-.2em -.125em .125em #00000040,0 0 0 .1em #0000004d,inset .02em .02em .02em #0006}.keyboard__key--shaded{background-color:var(--lightningcss-light,var(--gray850))var(--lightningcss-dark,var(--gray50));color:var(--lightningcss-light,var(--gray50))var(--lightningcss-dark,var(--gray600))}.keyboard__key-label{justify-content:center;align-items:center;width:100%;height:100%;transition:transform .1s;display:flex}.keyboard__key-label--small{font-size:.875em}.keyboard__key:active,.keyboard__key--active{box-shadow:0 0 .1em #0003,0 0 0 .1em #0006,inset 0 -.025em #0009}.keyboard__key:active .keyboard__key-label,.keyboard__key--active .keyboard__key-label{transform:scale(.96)}.scroller{align-items:flex-end;width:100%;height:17.25em;margin:0 0 3.75em;padding:0 1.5em .75em;display:flex;overflow-x:auto}