.keyboard-page{position:relative;min-height:100vh;overflow-x:hidden;padding:145px 0 105px;background:radial-gradient(circle at 70% 23%,rgba(233,43,87,.09),transparent 27%),radial-gradient(circle at 15% 65%,rgba(233,43,87,.04),transparent 25%),#09090d}.keyboard-page:before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(hsla(0,0%,100%,.025) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.025) 1px,transparent 0);background-size:76px 76px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);mask-image:linear-gradient(180deg,#000,transparent 78%)}.keyboard-glow{position:absolute;top:230px;right:15%;width:280px;height:280px;border-radius:50%;background:rgba(233,43,87,.07);filter:blur(100px)}.keyboard-shell{position:relative;z-index:2;max-width:1080px}.keyboard-breadcrumbs{display:flex;align-items:center;gap:11px;color:#55545e;font-size:11px;font-weight:700}.keyboard-breadcrumbs a:hover{color:var(--color-primary)}.keyboard-breadcrumbs strong{color:#92909a}.keyboard-header{margin:50px 0 37px}.keyboard-header h1{margin:13px 0 14px;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:-.06em}.keyboard-header p{margin:0;color:#777680;font-size:13px}.keyboard-intro{padding:23px 26px;border:1px solid hsla(0,0%,100%,.08);border-radius:9px;background:linear-gradient(145deg,hsla(0,0%,100%,.035),hsla(0,0%,100%,.012));box-shadow:0 18px 45px rgba(0,0,0,.14)}.keyboard-intro p{margin:0 0 15px;color:#b8b7bf;font-size:11px;font-weight:600}.keyboard-legend{display:flex;gap:20px;color:#65646d;font-size:9px}.keyboard-legend span{display:flex;align-items:center;gap:7px}.keyboard-legend i{width:9px;height:9px;border:1px solid hsla(0,0%,100%,.18);border-radius:3px;background:hsla(0,0%,100%,.03)}.keyboard-legend i.legend-active{border-color:rgba(233,43,87,.65);background:rgba(233,43,87,.25);box-shadow:0 0 10px rgba(233,43,87,.18)}.keyboard-board-wrap{margin-top:20px;padding:35px 32px;border:1px solid hsla(0,0%,100%,.09);border-radius:13px;background:linear-gradient(145deg,hsla(0,0%,100%,.045),hsla(0,0%,100%,.012));box-shadow:0 25px 65px rgba(0,0,0,.25);overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(233,43,87,.4) transparent}.keyboard-board{min-width:930px;display:flex;flex-direction:column;gap:6px}.keyboard-row{display:flex;justify-content:center;gap:6px}.keyboard-key{width:57px;height:52px;flex:0 0 57px;display:grid;place-items:center;border:1px solid hsla(0,0%,100%,.09);border-radius:6px;color:#696872;background:linear-gradient(145deg,#18181f,#111116);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.025),0 5px 12px rgba(0,0,0,.18);font-family:inherit;font-size:9px;font-weight:800;transition:transform .15s,border-color .15s,color .15s,background .15s,box-shadow .15s}.keyboard-key.has-action{color:#d2d1d7;border-color:rgba(233,43,87,.16);cursor:pointer}.keyboard-key.has-action:focus-visible,.keyboard-key.has-action:hover,.keyboard-key.is-selected{outline:none;color:#fff;border-color:var(--color-primary);background:linear-gradient(145deg,rgba(233,43,87,.32),rgba(233,43,87,.12));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.08),0 0 20px rgba(233,43,87,.16);transform:translateY(-2px)}.keyboard-key.key-medium{width:75px;flex-basis:75px}.keyboard-key.key-wide{width:100px;flex-basis:100px}.keyboard-key.key-shift{width:124px;flex-basis:124px}.keyboard-key.key-space{width:315px;flex-basis:315px}.keyboard-preview{margin-top:20px;padding:24px 27px;border:1px solid hsla(0,0%,100%,.09);border-radius:11px;background:linear-gradient(145deg,hsla(0,0%,100%,.035),hsla(0,0%,100%,.012));box-shadow:0 20px 50px rgba(0,0,0,.18)}.preview-label{margin-bottom:17px;color:#5f5e67;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.preview-content{display:flex;align-items:center;gap:16px;min-height:50px}.preview-key{min-width:47px;height:42px;display:grid;place-items:center;padding:0 10px;border:1px solid var(--color-primary);border-radius:6px;color:#fff;background:rgba(233,43,87,.13);box-shadow:0 0 18px rgba(233,43,87,.11);font-size:10px;font-weight:900}.preview-content strong{display:block;margin-bottom:5px;font-size:13px}.preview-content p{margin:0;color:#777680;font-size:10px;line-height:1.5}@media(max-width:680px){.keyboard-page{padding:110px 0 75px}.keyboard-header{margin:40px 0 30px}.keyboard-header h1{font-size:48px}.keyboard-intro{padding:20px}.keyboard-legend{flex-direction:column;gap:8px}.keyboard-board-wrap{padding:24px 18px}.keyboard-board{min-width:850px}.keyboard-key{width:51px;flex-basis:51px;height:47px}.keyboard-key.key-medium{width:68px;flex-basis:68px}.keyboard-key.key-wide{width:90px;flex-basis:90px}.keyboard-key.key-shift{width:112px;flex-basis:112px}.keyboard-key.key-space{width:286px;flex-basis:286px}.keyboard-preview{padding:22px 20px}}