*,*:before,*:after{box-sizing:border-box}*{margin:0}button{color:inherit}button,[role=button]{cursor:pointer}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}img,svg{display:block}img,video{max-width:100%;height:auto}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.transition-colors{transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-auto{margin-left:auto;margin-right:auto}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-bottom:2rem;padding-top:2rem}.bg-\[\#86efac\]{background-color:#86efac}.text-3xl{font-size:1.875rem;line-height:2.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.border-gray-500{border-color:#6b7280}.bg-white{background-color:#fff}.flex{display:flex}.gap-8{grid-gap:2rem;gap:2rem}.font-bold{font-weight:700}.max-w-screen-md{max-width:768px}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.border-2{border-width:2px}.rounded-sm{border-radius:.25rem}.tabular-nums{font-variant-numeric:tabular-nums}.min-h-screen{min-height:100vh}.fresh-gradient{background-color:#86efac;background-image:linear-gradient(to right bottom,#dbeafe,#bbf7d0,#fef9c3)}.key-active{background-color:#e5e7eb;color:#1f2937;border-color:#9ca3af}.border-gray-300{border-color:#d1d5db}.hover\:bg-gray-200:hover{background-color:#e5e7eb}.text-gray-700{color:#374151}.mb-2{margin-bottom:.5rem}.focus\:border-blue-500:focus{border-color:#3b82f6}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.gap-4{gap:1rem}@media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.space-y-4>*+*{margin-top:1rem}.p-4{padding:1rem}.bg-blue-50{background-color:#eff6ff}.bg-blue-200{background-color:#bfdbfe}.bg-gray-100{background-color:#f3f4f6}.bg-red-100{background-color:#fee2e2}.border-blue-200{border-color:#bfdbfe}.border-red-400{border-color:#f87171}.border{border-width:1px}.text-gray-800{color:#1f2937}.text-gray-600{color:#4b5563}.text-red-700{color:#b91c1c}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.disabled\:bg-gray-100:disabled{background-color:#f3f4f6}.p-2{padding:.5rem}.mt-1{margin-top:.25rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.w-full{width:100%}.w-40{width:10rem}.h-32{height:8rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-6{gap:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.5rem;line-height:1.75rem}.kbd-icon{font-size:1.5rem}.font-semibold{font-weight:600}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-center{text-align:center}.text-right{text-align:right}.text-red-600{color:#dc2626}.text-gray-900{color:#111827}.bg-gray-50{background-color:#f9fafb}.bg-gray-200{background-color:#e5e7eb}.block{display:block}.inline-block{display:inline-block}.max-w-7xl{max-width:80rem}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.resize-y{resize:vertical}.hover\:text-gray-900:hover{color:#111827}.keyboard-width-container{width:50rem;max-width:100%}.relative{position:relative}.absolute{position:absolute}.z-10{z-index:10}.clear-button{position:absolute;top:.5rem;right:.5rem;z-index:10;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:#e5e7eb;border-radius:50%;border:none}.pr-10{padding-right:2.5rem}.h-64{height:16rem}.border-b-2{border-bottom-width:2px}.text-blue-600{color:#2563eb}.border-blue-500{border-color:#3b82f6}.py-2{padding-bottom:.5rem;padding-top:.5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite;display:inline-block}.text-2xl{font-size:1.5rem;line-height:2rem}.h-24{height:6rem}.h-48{height:12rem}.p-3{padding:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.gap-2{gap:.5rem}.text-left{text-align:left}@media(min-width:768px){.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:h-32{height:8rem}.md\:h-64{height:16rem}.md\:p-3{padding:.75rem}.md\:p-4{padding:1rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:gap-4{gap:1rem}.md\:gap-8{gap:2rem}.md\:mb-8{margin-bottom:2rem}.md\:mb-0{margin-bottom:0}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:text-right{text-align:right}.md\:w-40{width:10rem}.md\:flex-shrink-0{flex-shrink:0}}