@font-face{font-family:TT Firs Neue Trial Var Roman;src:local("TT Firs Neue Trial Var Roman Medium"),local("TT Firs Neue Trial Var Roman"),local("TT Firs Neue Trial"),url(/fonts/TT-Firs-Neue-Trial-Var.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:#141414;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:sans-serif}#root{display:flex;align-items:center;justify-content:center;width:100%}.keyboard-wrapper{position:relative;z-index:1}.keyboard-card{position:relative;width:534px;padding:25px 33px 33px;border-radius:32px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,#2c2c2e,#202022);box-shadow:0 40px 80px #0009,inset 0 1px 1px #ffffff14,inset 0 -1px 1px #0006;display:flex;flex-direction:column;gap:20px}.top-bar{display:flex;align-items:center;width:100%}.led-container{flex-shrink:0;width:32px;height:32px;border-radius:100px;background:linear-gradient(180deg,#202022,#2c2c2e);border:.4px solid #363636;position:relative;overflow:clip}.led-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:100px;background:#ffbdec}.led-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:100px;pointer-events:none;box-shadow:0 0 12px 2px #ff9797b3,inset 0 1px 2px #fff;animation:led-breathe 3s ease-in-out infinite}@keyframes led-breathe{0%,to{opacity:1;box-shadow:0 0 12px 2px #ff9797b3,inset 0 1px 2px #fff}50%{opacity:.22;box-shadow:0 0 4px 1px #ff979733,inset 0 1px 2px #fff}}.divider-wrap{flex:1;padding:0 24px}.divider{height:1px;background:#3a3a3c;box-shadow:0 1px #ffffff0d}.brand-text{flex-shrink:0;color:#aaaaaf;font-family:TT Firs Neue Trial Var Roman,TT Firs Neue Trial,system-ui,sans-serif;font-size:24px;font-weight:500;font-style:normal;letter-spacing:-1.5px;line-height:1;white-space:nowrap}.key-bed{position:relative;width:100%}.white-keys{display:flex;gap:8px}.key--white{flex-shrink:0;width:60px;height:180px;border-radius:12px;border:1px solid #252525;background:linear-gradient(180deg,#3e3c3d,#454344);box-shadow:0 4px 8px #0006,inset 0 2px 2px 1px #ffffff0d,inset 0 -4px 6px 1px #0000004d;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;position:relative;transform-origin:top center;transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .42s ease-out,background .34s ease-out,border-color .26s ease-out}.key--white:hover:not(.key--active){filter:brightness(1.15)}.key--white.key--active{border:1px solid #ff44aa;transform:scaleY(.965);background:radial-gradient(ellipse 320% 260% at 50% -12%,#ffbdec,#ffdbd1 16.747%,#ffa9cf,#f7c);box-shadow:0 0 24px 8px #ff64c840,0 4px 8px #ff64c866,inset 0 2px 4px 1px #fff,inset 0 -4px 8px 1px #c8006466;transition:none}.key--black{position:absolute;top:0;width:36px;height:100px;border-radius:8px;border:.4px solid #252525;background:linear-gradient(180deg,#252525,#2a2a2a);box-shadow:0 8px 12px #0000006b,inset 0 2px 2px 1px #ffffff1a,inset 0 -4px 6px 1px #000c;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;z-index:2;transform-origin:top center;transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .42s ease-out,background .34s ease-out,border-color .26s ease-out}.key--black.key--active{border-color:#f4a;transform:scaleY(.96);background:linear-gradient(180deg,#ff78d2d9,#c80078bf);box-shadow:0 0 16px 6px #ff64c859,0 4px 8px #ff64c880,inset 0 2px 4px 1px #fff9,inset 0 -4px 8px 1px #b40064b3;transition:none}