.keyboard{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:10px;flex-direction:column;gap:6px;width:100%;margin:0 auto;padding:30px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;box-shadow:0 4px 20px #0000001a}.key{background:hsl(var(--muted));border:1px solid hsl(var(--border));width:48px;height:48px;color:hsl(var(--foreground));cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:15px;font-weight:400;transition:all .1s;display:flex;position:relative;box-shadow:0 1px 3px #0000001a}.key:hover{background:hsl(var(--accent));transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.key:active,.key.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary));transform:translateY(1px);box-shadow:inset 0 2px 4px #0000001a}.key.dual{flex-direction:column;gap:1px;padding:6px 4px;line-height:1}.key.dual span:first-child{color:hsl(var(--muted-foreground));font-size:11px;font-weight:400}.key.dual span:last-child{color:hsl(var(--foreground));font-size:15px;font-weight:400}.key.num{width:48px}.key.backspace{width:84px;font-size:13px}.key.tab{width:80px;font-size:13px}.key.caps{width:100px;font-size:12px}.key.enter{width:84px;font-size:13px}.key.shift{width:120px;font-size:13px}.key.space{width:315px}.key.ctrl,.key.win,.key.alt{width:52px;font-size:12px}.key.slash{width:48px}.icon-pre{opacity:.7;margin-right:6px;font-size:12px}.icon-post{opacity:.7;margin-left:6px;font-size:12px}.keyboard>div>div{justify-content:center;align-items:center;gap:6px;display:flex}