body{background-color:#f2efe9;background-image:radial-gradient(circle,#f8f6f2 0%,#ebe6dc 100%);min-height:100vh;margin:0;padding:0;font-family:Inter,sans-serif}.keycap-base{--keycap-size:clamp(280px, 80vmin, 480px);width:var(--keycap-size);height:var(--keycap-size);background:#374354;border-radius:40px 40px 52px 52px;transition:transform .1s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 40px 80px -15px #00000073,0 25px 35px -10px #00000040,inset 0 3px 6px #ffffff26,inset 0 -12px 24px #0006,inset -4px 0 12px #0003,inset 4px 0 12px #0003}.keycap-top{top:calc(var(--keycap-size) * .029);left:calc(var(--keycap-size) * .042);right:calc(var(--keycap-size) * .042);bottom:calc(var(--keycap-size) * .133);background:linear-gradient(#5b6a7f 0%,#445263 60%,#4a586b 100%);border:1px solid #ffffff0d;border-radius:28px;position:absolute;box-shadow:0 4px 12px #0006,inset 0 4px 6px #fff3,inset 0 -4px 8px #0000004d,inset -2px 0 6px #00000026,inset 2px 0 6px #00000026}.keycap-highlight{pointer-events:none;background:linear-gradient(#ffffff14 0%,#0000 100%);border-radius:28px 28px 0 0;height:40%;position:absolute;top:0;left:0;right:0}.legend-text{color:#f1f5f9;text-shadow:0 1px 3px #0000004d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.legend-secondary{color:#f1f5f9b3}